Angular JS – Part 2

Angular Routing Services and Directives:

• Routing Services:
  • $route - $routeProvider is used to map the URL with template + assigned controller. (specially for SPAs). Methods: when(), otherwise(redirectTo:), current, params, pathParams, reload(). Also we can use resolve() to decide before load template.
  • $routeParams – Used to pass the parameters via URL
  • $location –Use to enable html5 routing. Can get the URL informations Eg. absUrl, protocol, port, host, path, search, hash, url. Replace() method will not keep URL history.
• Directives:
  • Uses of Directives: Create custom element, custom event, observe and react to changes
  • Use eventApp.dirctive("directiveName",function(){ return {restrict: 'E', template: "<input>"}});
  • Can restrict the directive to how should use. E(element), C(class), A(attribute), M(comment).
  • Instead of template HTML text, the URL can be used. Use" replace: true" to replace the element name to html in source output. Use "link" property to handle an event on element.
  • Use "isolate: []" to work the directives to work on own(work separately, one will not interfere other)
  • The isolates directive requires the models(data/methods) to bind it to elements.
  • Use prefix '&' to functions, which you want to execute in parent scope.
  • Params: Scope, element, attrs, controller. Attrs parameter will have observe(newValue, oldValue) method.
  • Can create own directive controller to encapsulate the directive functions. To pass dynamic controller name, assign '&' sign for controller and use name property to specify the attribute name which holds the controller name in view.
  • "require" property on directive can point out another directive which is having the controller to use here.
  • Use "priority" property to fire the directives in priority.
  • Use "terminal" property to terminate the lower priority directive actions. NOTE: The use of 'terminal' will also affect the Angular built-in directives.
  • Use "ngTrasclude" directive and "^ prefix to controller" to get the common controllers in nested elements. This "ng-transclude" also used to leave(not to replace) the inner elements inside the directives.
  • "$compile" function is expensive since it is used to manipulate the DOM. So use Clone() method if possible.