Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
292 lines (223 sloc) 9.98 KB

Angular Notes

These are notes to references regarding advanced Angular.js concepts. Working knowledge of Angular is assumed.

Modules

HTML: <html ng-app="myApp">

JS: var myAppModule = angular.module('myApp', []);

Modules:

  • consist of multiple configuration and run blocks
  • can only be loaded once per injector (apps usually only have one)
  • can list other modules as their dependencies (array)
  • will configure and run each dependency first
  • will always run contsant() methods first
  • will run all other configuration blocks in the order they are registered
  • can be unit tested: https://docs.angularjs.org/guide/module#unit-testing

Configuration blocks:

  • are executed during the provider registration and configuration phase
  • only allow injection of providers and constants (as to prevent accidental instantiation of services before they have been fully configured)
  • takes a single function to execute on module load as its only parameter

Run blocks:

  • are the closest thing to a main method
  • are executed after all services have been configured and after the injector has ben created
  • only allow injection instances and constants (as to prevent further system configuration during application run time)
  • should be declared in isolated modules because they are difficult to unit test
  • takes a single function to execute after injector creation as its only parameter

Convenience methods on module can be used to configure providers.

angular.module('myModule', []).
  value('a', 123).
  factory('a', function() { return 123; }).
  directive('directiveName', ...).
  filter('filterName', ...);

// is same as

angular.module('myModule', []).
  config(function($provide, $compileProvider, $filterProvider) {
    $provide.value('a', 123);
    $provide.factory('a', function() { return 123; });
    $compileProvider.directive('directiveName', ...);
    $filterProvider.register('filterName', ...);
  });

Further Reading:

Providers

Providers:

  • are registered with the injector
  • define how objects are instantiated by injector service
  • belong to a module
  • are one of two types: services and special purpose

Services:

  • are objects whose API is defined by its developer
  • are singleton objects (they are instantiated only once per injector)
  • are fundamentally based on $provide
  • include:
    • provider(providerObject) (base)
    • constant(object)
    • value(object)
    • factory(function)
    • service(classObject) (the poorly named "service" service)
  • provide a way to retain data and communicate across controllers
  • are used by Angular itself to provide functionality across framework
  • are prefixed by a $ when they are provided by Angular

Special Purpose:

  • are objects that conform to a specific Angular framework API
  • include:
    • controller
    • directive
    • filter
    • animation

TODO: See "Service v. Factory" notes

Further Reading:

Provider Services

Provider Services:

  • provide(object)
  • receive a provider object, which:
    • can be an object with a defined $get method, which can contain injectables
    • can be a function that returns such an object
    • can be an array of injectable dependecies whose final entry is such a function
  • are responsible for registering the service in the $providerCache
  • can be externally configured when used directly
  • can be injected into config() function
myModule.provider('someProvider', {
	$get: function () {
		return {
			message: 'hello!'
		}
	}
})

Factory Services

Factory Service:

  • are registered using factory(name, function)
  • function is only invoked once
  • is really a provider() where the $get function is passed in
myModule.factory('someFactory', function() {
	return {
		message: 'hello!'
	}
})

Serivce Services

Services:

  • are registered using service(name, constructorFunction)
  • are poorly named!
  • will invoke the function using the new keyword
myModule.service('someService', function() {

	var myMessage = 'hello';

	this.getMessage = function() {
		return {
			message: myMessage
		}
	}
})

Constant Services

Constants:

  • are registered using constant(name, value)
  • are injectable
  • are not intercepatble by decorators
  • can not be objects or functions
  • are good for configuration data

Value Services

Values:

  • are registered using value(name, value)
  • are not injectable
  • can register objects or functions

TODO: Decorators


Scopes

Scopes:

  • are connections between Angular views and controllers
  • are automatically accessble to the view
  • are normal javascript objects
  • are used as the data model in Angular
  • can be nested to provide isolated properties
  • can provide execution environment in which view expressions are evaluated
  • can provide observers to watch for model changes
  • can propogate model changes by using apply()
  • have a root ancestor called $rootScope
  • can be provided to controllers and directives

Notes:

  • if a callback executes inside Angular context then $scope will be aware of model mutation
  • if a callback executes outside Angular context then $apply() must be used to notify $scope of mutation

Lifecycle:

  • on the creation of a controller or directive, Angular creates a new scope with the $injector
  • at runtime the new scope is passed into the controller or directive
  • on linking the scope to the view, all directives that create scopes register their watches with the parent scope
  • on the $rootScope's digest all child scopes will perform dirty checking
  • when a scope is no longer needed the scrope's creator will need to call scope.$destroy to clean up scope
  • on scope destruction the $destroy event is broadcasted

Further Reading:


Directives

Directives:

  • are custom HTML elements and attributes
  • are built into Angular to provide various types of functionality
  • are implemented as a special type of factory service
  • are $compiled when they are parsed at bootstrap
  • are fundamental in providing basic Angular features including:
    • ng-app
    • ng-include
    • ng-model
    • ng-view
    • ng-controller
  • use dash-case in HTML
  • use camelcase in JavaScript

Further Reading:


TODO: routing TODO: testing


Angular Concepts

Digest Loop

Dependency Injection

Angular Conventions

Generators & Boilerplate

Twitter

Who should you follow you ask?

Angular Team:

Angular:

Angular Resources:

Cheetsheets

References and Further Reading

Some Browserify + Angular Links: