Angular Programming


Top Features

  1. Two way data binding
  2. Templating
  3. MVC framework, actually closer to MVVM (Model-View-ViewModel).  The viewmodel is the $scope object
  4. Dependency Injection.  Great for testing
  5. Directives
  6. Filters
  7. Broadcasting & listening for events; watchers
  8. Built-in promises framework
  9. Digest cycle:  polling. Dirty checking: if change is detected, the watches set on that model are fired.
  10. jqLite:  a tiny, API-compatible subset of jQuery, does lots of what we do with jQuery, but without the big footprint.
  11. Testing.  Many libraries like $httpBackend, angular-mock

Isolate Scope:  Such an object has its own scope, and that the scope is private to each instance of the directive.

$scope.apply:  for when things fall outside of Angular’s binding.  Often an HTML handler needs to call it, or wrap it’s actions inside a $scope.apply(function() {});

Compile function:  In a directive.  If you need to do some manipulation of your html template before creating it, do it in compile: function() {}.  It returns a link function, so you do not define both link() and compile() in the same directive.

Link function:  In a directive.  Basically a controller for the directive.

$rootScope:  the parent of all $scopes.  The $rootScope is the top-most scope that is created on the DOM element that contains the ng-app directive.

Communicate between modules

  • Using services
  • Using events
  • By assigning models on $rootScope
  • Directly between controllers, using $parent, nextSibling, etc
  • Directly between controllers, using ControllerAs, or other forms of inheritence

Transclusion

  • Including a document or parts of a document in another document by reference.
  • merging the content of the initial element with the template
  • take the contents of the invented HTML element and use it as the contents of the element of your template.
  • get my content into the template

Angular Framework Services, full list

$anchorScroll, $cacheFactory, $compile, $controller, $document, $exceptionHandler, $filter, $http, $httpBackend, $interpolate, $locale, $location, $log, $parse, $q, $rootElement, $rootScope, $route, $routeParams, $templateCache, $timeout, $window

Provider, Factory, Service:  all similar

$scope, $rootScope, broadcast vs. emit

  • $rootScope.$emit only lets other $rootScope listeners catch it. This is good when you don't want every $scope to get it. Mostly a high level communication. Think of it as adults talking to each other in a room so the kids can't hear them.
  • $rootScope.$broadcast is a method that lets pretty much everything hear it. This would be the equivalent of parents yelling that dinner is ready so everyone in the house hears it.
  • $scope.$emit is when you want that $scope and all its parents and $rootScope to hear the event. This is a child whining to their parents at home (but not at a grocery store where other kids can hear).
  • $scope.$broadcast is for the $scope itself and its children. This is a child whispering to its stuffed animals so their parents can't hear.

Techniques for sharing data between controllers

  1. Put a method in a controller on $rootScope.  We can access this function anywhere in the module. 
  2. Put the data to be share in a service or factory
  3. Using Watch Concept.  Put shared data on the $rootScope, then put a $rootScope.watch() on that item.

Communicating Between Controllers

We obviously don't want to reference one controller by another inside the controller. That is "tight coupling" and your code will be very brittle in the face of changes.

For example:  Ctrl1 has a button click handler, and you want Ctrl2 to respond

this vs. $scope in controllers

If you are using “controller as” syntax, your controller should be using ‘this’, not $scope.

Minification, controllers and DI

If you aren’t minifying, these two are the same, despite argument ordering:

function MyController($scope, $http, $timeout) {
function MyController($scope, $timeout, $http) {

But if you are minifying, do this:

var MyController = ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {

...and some people might prefer

MyController.$inject = ['$scope', '$http', '$timeout'];

function MyController($scope, $http, $timeout) {

Routes and resolve property

Resolve gets assigned an object of functions whose arguments reference services that have been defined elsewhere.  This article explains it nicely.

Factory vs. Provider vs. Service

See this article

Ng-bind

A more explicit way of inserting scoped content into your html.  Assume a controller is in scope with an available ‘foo’ property.  These two are the same:

<span>{{foo}}</span>

<span ng-bind=”foo”></span>

Also, keep in mind that an ng-bind expression can be more complicated.  These two are also the same:

<span>foo is: {{foo}}</span>

<div ng-bind="'foo is: ' + foo"></div>

Code Snippets

  • $scope.$broadcast('$eventName$', $eventArgs$);
  • $scope.$emit('$eventName$', $eventArgs$);
  • $scope.$functionName$ = function($args$) {
       $END$
    };
  • $scope.$on('$eventName$', function(event, $args$) {
            
    });
  • $scope.$variable$ = $value$;
  • $scope.$watch('$watchExpr$',  function(newValue, oldValue) {

    });
  • var $controllerName$ = function($scope, $injectables$) {

    };
  • directive('$directiveName$', function factory($injectables$) {
       return {
           $directiveAttrs$
           compile: function compile(tElement, tAttrs, transclude) {         
               return function (scope, element, attrs) {
           }
       }
    });
  • function compile(tElement, tAttrs, transclude) {  
       return function (scope, element, attrs) {
       }
    }

Tip


Links marked with arrow icons ( or ) will open in a new tab.

You will see this message only once.