Angular js learning resources and notes

Tutorials and resources

• angular.org site
• best book and the one to buy: "mastering Web Application Development with AngularJS"
• how to "think in angular" 
• Angular js flipboard magazine
• Dan Wahlin blog
• Fundamentals video in 60ish minutes
• Directives: 
• miskos pres
• from co-author of angular js in action
• AngularJS Directives - Vanston
• Scope and Directives, I need to read it, looks helpful
• angular js in action (manning)
• read re injectors

I followed and coded the popular "Fundamentals in 60 mins" tutorial by Dan Wahlin, here's my notes:

• transcript here
• code at:  http://tinyurl.com/AngularJSDemos
• his log: http://weblogs.asp.net/dwahlin
• you can prefix ng directive with data- as in data-ng-repeat, good for validators
• $scope is what is shared between the controller and the view i.e. the ViewModel
• the $scope implicitly is available within the div
• Module
• angular is very modular, modules are containers
• simple to create, syntax like require.js
• has a Config function which can be used to defined Routes 
• you define a view template and controller in the route and they share the $scope (aka ViewModel)
• on Views you have directive and filters (which can be custom built)
• on Controller you use Factories/Services/Providers/Values
• Data access
• Factory - create object and return it
• angular will inject a factory for you into a controller by the name
• factory can get data including from server but also post data
• Service - standard fn which this is set to fns
• Provider - there's a $get fn to get data
• Value - get config value e.g. name value pair

• ways to create controllers
1. just as a fn included
2. use <moduleName>.controller('SimpleController', function ($scope) {
3. define a controllers object with a property for each controller; then pass that to your module   e.g. <moduleName>.controller(controllers);

•  code organizatiion for his app

• /app
• /controllers
• /directives
• /partials
• /services
• /factories

3 Ds of Angular

• data binding
• dependency injection
• directives

builtwith.angularjs.org
pluralsight.com
angular-ui.github.io
mgcrea.github.io/angular-strap


Some thoughts and questions on Angular

• very declarative
• do not do DOM manipulation in Controllers - this si very different to backbone where you do lots of dom manipulation in controllers
• there is no explicit model class in angular js (unlike backbones Model) but you should still create models in angular js as java objects and put those into $scope ($scope references the models)
• scope and its understanding is a big thing in angular - again backbone has no such built in scope
• dependency injection reminds me of Spring framework. I like the dependency injection (loose coupling, testability etc.); but am looking forward to learning how one injects in non standard objects other than $scope etc.
• something about adding extra markup in html with special meaning seems weird to me (i.e. all the ng-* attributes), it isn't very unobtrusive frankly?...and hasn't unobtrusive js been the goal when writing js for years now?
• then again may be more transparent than a whole lot of hidden bindings in the js code 

• Update Answer: see AngularJS OReilly book, chapter 2 Templates and binding. They address this question and importantly point out that AngularJS event handlers ensure the code works the same across all browser including IEs AND the functions are local to the scope of the elements angularjs controller, not in global namespace.
• So ng-click="fnName" etc. work
• Ok, still feels weird but my pulse rate is back down now

• how multiple controllers collaborate? I'm thinking event triggering in particular
• Answer: one way is to share data via a Service
• wondering about assigning models and/data to $scope. Is $scope unique per controller or shared for all active controllers? I mean if I have multiple models active and they all hang data off $scope isn't there some risk of stepping on each others toes? I suppose you could have a convention to namespace under $scope. Let's see how this pans out. 
• see #10 in my notes re best practices....$scope references the models (can also have functions)
• I think each Controller has its own scope (ned to check)
• scopes inherit prototypically from parent, means read will read parent property if non exist but sets will create a new local scope property
• what about dynamically constructing views, controllers and models on the fly at runtime? In backbone I construct the view and call render on it and give it the "el" to render into. Is that possible in angularjs?

AngularJS O'Reilly book key quotes:

• the right way to define a controller is as part of something called a module, which provides a namespace for related parts of your application
• controllers are classes or types you write to tell Angular which objects or primitives make up your model by assigning them to the $scope object passed into your controller
• you create your views by writing a template as an HTML page and merging it with data from your model
• modules. They provide a way to group dependencies for a functional area within your application, and a mechanism to automatically resolve dependencies (also known as dependency injection). Generically, we call these dependencies services, as they provide specific services to our application
• Services are singleton (single-instance) objects that carry out the tasks necessary to support your application’s functionality.
• You can, and should, create your own services to do all of the tasks unique to your application. Services can be shared across any controllers that need them. As such, they’re a good mechanism to use when you need to communicate across controllers and share state.   
• Angular looks at the function signature for our ShoppingController class, and notices that it is asking for an Items object. Since we’ve defined Items as a service....and passes it automatically
•  Templates in Angular applications are just HTML documents that we load from the server or define in a <script> tag like any other static resource. You define your UI in the template, using standard HTML plus Angular directives where you need UI components.
• Once in the web browser, Angular expands these templates into your full application by merging your template with data.
•  
•  

• To keep your controllers small and manageable, our recommendation is that you create one controller per functional area in your view. That is, if you have a menu, create a MenuController. If you have a navigational breadcrumb, write a BreadcrumbController, and so on.
• You’re probably starting to get the picture, but to be explicit, controllers are tied to a specific piece of the DOM that they’re in charge of managing. The two main ways of associating a controller with a DOM node are specifying it in the template by declaring it in an ng-controller attribute, and associating it with a dynamically loadable DOM template fragment, called a view, through aroute.
• If you have complex sections of your UI, you can keep your code simple and maintainable, by creating nested controllers that can share model and functions through an inheritance tree. Nesting controllers is simple; you do it by simply assigning a controller to a DOM element that is inside another one
• The $scope passed to a nested controller prototypically inherits from its parent controller’s $scope. In this case, this means that the $scope passed to ChildController will have access to all the properties of the $scope passed to ParentController. 

Once a page is fully loaded with angularjs in it then angularjs looks for ng-app to know its boundaries. Then angularjs traverses the template looking for directives and bindings;
this results in registration of listeners and DOM manipulation, as well as fetching initial data from the server. The end result of this work is that the app is bootstrapped and the template is converted into view as a DOM.

Scope

• A scope houses the application model, not just model data but functions as well. The scope is not the model, it shoudl have a reference to the model. You shoudl define your own model objects and put them in the scope e.g. model.propertyX. Views should update a property in a model, not in a scope. Your model shoudl be your own set of objects you create.
• Every controller has its own scope (some directives too); e.g. ng-repeat, ng-switch, ng-view and ng-include all create new child scopes. The fact that new scope is created can cause confusion and problems where primitives are being updated. Because a new scope is created then once you write a primitive property within a scope; prototypical inheritance . See this link from Misko. "wherever you use ng-model there's got to be a dor in there somewhere"
• You can basically map scope to chunks of markup; batarang will show that
• root scope ($rootScope) is inherited prototypically all scopes

Expression

• javascripty piece of code which angularjs understands and processes
• expressions are evaluated against scope; if you say in an expression: myVar = 22"  ...then myVar in scope is assigned the value of 22

Built in angular services (start with $) include

• $location, for interacting with the browser’s location
• $route, for switching views based on location (URL) changes, and  
• $http, for communicating with servers. 
• $log, console.log

Built in angular directives (see angularjs.org for full list)

• ng-repeat with $index (starts at 0), $first, $middle, $last
• ng-show, ng-hide     - hide and show element
• ng-class, ng-style     - manipulate css
• ng-src                       - set img src
• ng-href                     - set href link

a way to inherit from a controller
call parent controller, but not using at this time yet:
http://jsfiddle.net/mhevery/u6s88/12/
http://blog.omkarpatil.com/2013/02/controller-inheritance-in-angularjs.html
https://groups.google.com/forum/#!msg/angular/qqncwxdcVgw/Kqoswky69-oJ  

$injector.invoke('erfp.controller.modal.ModalController', this, {$scope: $scope});