gvn/learning-angular-notes.md

## learning-angular-notes.md

      
    Raw
  

              learning-angular-notes.md
            
          
    Angular Notes

General


Batarang extension for Chrome
AngularJS in 60-ish minutes (Pretty good overview video)

Angular Best Practices Video

components:


etc
ventually will become Web Components


Benefit: 2 way data binding


builtwith.angularjs.org


Scaffolding: angular-seed and yeoman generator


ng-cloak for hiding flashing content {{}} on page load. Use ng-bind for index.html


have to disable variable renaming for js minification due to reflection from markup->JS
$inject annotation


Think of html as DSL (domain specific lang)


Prefix your components: <my-component> <my:component>


IE8 requires creating elements a-la-html5 shim document.createElement('my-component')


Controllers

Should not reference DOM
Should have view behavior


Services

should not reference DOM (mostly)
are singletons
have logic independent of view
used for multiple locations


Scope

Treat as read only in view
Treat as write only in controller (really?!)


use non minified libraries in development


concatenating to single script tag may not actually be that beneficial (?)


AngularJS Fundamentals (Pluralsight)

This series doesn't seem too great...

Karma = Testing tool
Angular will eventually use Object.observe under the hood

Angular for the jQuery Developer

Imperative programming: telling the “machine” how to do something, and as a result what you want to happen will happen.
Declarative programming: telling the “machine” what you would like to happen, and letting the computer figure out how to do it.


"We can test both from the perspective of the developer (and unit test each component) and from the perspective of our users (by end-to-end testing, wherein we load our app in a browser and tell the test framework to click on buttons and test that the view is showing what we expect)."


Use angular.module to avoid globals:


angular.module('ngChatApp', [])
.controller('ChatCtrl', function($scope) {
  // Write our controller here
});

AngularJS - from beginner to expert in 7 steps series


All AngularJS apps have a $rootScope. The $rootScope is the top-most scope that is created on the DOM element that contains the ng-app directive.
You can think of the run function being the main method of the angular app.
With one exception, all scopes are created with prototypal inheritance, meaning that they have access to their parent scopes. By default, for any property that AngularJS cannot find on a local scope, AngularJS will crawl up to the containing (parent) scope and look for the property or method there. If AngularJS can’t find the property there, it will walk to that scope’s parent and so on and so forth until it reaches the $rootScope.
The one exception: Some directives can optionally create an isolate scope and do not inherit from their parents.
All of the core AngularJS services are prefixed with $
AngularJS will take care of handling a JSONP request if you append the EXACT string: callback=JSON_CALLBACK as just above. AngularJS will replace JSON_CALLBACK with the proper callback it constructs for you

Services


It’s conventional to inject any Angular services before our own custom services.
Services are the canonical way to share data across several controllers.
In Angular, it’s considered a bad idea to try to manipulate the DOM from within a controller. Doing so results in dirty controller code and potential unexpected behavior
Services are singletons

Recipes with Angular


Directive-to-Directive Communication