Browse files

Created angular (markdown)

  • Loading branch information...
hparra committed Aug 14, 2016
1 parent af54c09 commit ae944649621e37d8c3d986f541f93e746cf9bd65
Showing with 292 additions and 0 deletions.
  1. +292 −0
@@ -0,0 +1,292 @@
# 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', []);`
- 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:
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:
- [Requiring vs Browserifying Angular](
## 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
- 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:
- [Providers - AngularJS Developer Guide](
- [$provide - AngularJS API]($provide)
- [Angular.js: service vs provider vs factory?](
### 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
- 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
- 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
- are registered using `value(name, value)`
- are _not_ injectable
- can register objects or functions
TODO: Decorators
## 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
- 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
- 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:
- [Make Your Own AngularJS, Part 1: Scopes And Digest]( Tero Parviainen.
- ["Controller as" or "$scope"?]( Alex Ford. July 10, 2014.
- [6 Common Pitfalls Using Scopes]( Jan Philipp. April 24, 2013.
## 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 `$compile`d 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:
- [Creating Custom Directives - AngularJS Developer Guide](
- [$compile - AngularJS API]($compile)
- [Deep Dive into Custom Directives - NG-Conf 2014 - Video]( Dave Smith. January 16, 2014.
- [Writing Direcives]( Misko Hevery. November 28, 2012.
TODO: routing
TODO: testing
## Angular Concepts
### Digest Loop
- [Make Your Own AngularJS, Part 1: Scopes And Digest]( Tero Parviainen. November 11, 2013.
### Dependency Injection
- [Dependency Injection](
- [Vojta Jina - Dependency Injection - NG-Conf]( Vojta Jina. January 16, 2014.
## Angular Conventions
- [An AngularJS Style Guide for Closure Users at Google](
- [Opinionated AngularJS styleguide for teams](
- [AngularJS Git Commit Message Conventions](
## Generators & Boilerplate
- [generator-angular](
- [ngBoilerplate](
## Twitter
Who should you follow you ask?
Angular Team:
- [Jeff Cross](
- [Brian Ford](
- [Brad Green]( (Product Manager)
- [Misko Hevery]( ("Father of Angular")
- [Vojta Jína](
- [Igor Minar](
- [Matias Niemelä]( aka "Year of Moo"
- [Julie Ralph]( (Protractor)
- [AngularJS](
- [Protractor](
Angular Resources:
- [AngularJS](
## Cheetsheets
- [AngularJS Expressions]( Tero Parviainen. March 23, 2014.
## References and Further Reading
- [Tim Kindberg on Angular UI-Router]( Tim Kindberg. November 14, 2013.
. [UI-Router - Apps with Depth]( Tim Kindberg. November 14, 2013.
- [Writing a Massive Angular Apps at Google - NG-Conf 2014 - Video]( Ido Sela, Jeremy Elbourn, Rachel Dale. January 16, 2014.
- [Massive AngularJS Apps - NG-Conf 2014 - Presentation]( Ido Sela, Jeremy Elbourn, Rachel Dale. January 16, 2014.
Some Browserify + Angular Links:

0 comments on commit ae94464

Please sign in to comment.