Angular Nuts and Bolts

Angular views and controllersngviewngView is a directive that complements the $route service by including the rendered template of the current route into the main layout (index.html) file. Every time the current route changes, the included view changes with it according to the configuration of the $routeservice.In other words: You can only have one ngview per page: this will contain the rendered template associated with the given route.ng-controller You can have other 'views' set up on the page: they are managed by a given ng-controller. Their behaviour could be integrated with that of the main page via a service or global 'rootscope'

angular $apply and $digest: http://jimhoskins.com/2012/12/17/angularjs-and-apply.html

Nested scopes see: http://jimhoskins.com/2012/12/14/nested-scopes-in-angularjs.htmlChild scopes inherit from parent scopes using prototypal inheritance. 

Angular uses the concept of named parameters. That is: it is the name of the parameters that matters, not their order. This is how you can inject dependencies by name.

Angular function parameters: the Angular injector will look to see whether the a module is a function OR an array of dependencies followed by a function.

Event Handling Some MVC frameworks (e.g. Backbone.js) use a selector to attach the event handler to a given set of elements. The disadvantage of this approach is that if the element changes or the selector becomes invalid then the event will no longer be fired. Angular does this differently by attaching the event handler (e.g. ng-click='foo()') directly on the element.

What is dirty checking?The basic idea with dirty-checking is that anytime data could have changed, the library has to go and check if it did change via a digest or change cycle. In Angular’s case, a digest cycle identifies all expressions registered to be watched to see if there’s a change. It knows about a model’s previous values and if they have changed, a change event is fired.

MVC is a software architecture pattern that separates representation from user interaction. Generally, the model consists of application data and functions that interact with it, while the view presents this data to the user; the controller mediates between the two.

Dirty checking is a relatively efficient approach to checking for changes on a model. Every time there could be a potential change, Angular will do a dirty check inside its event loop

The model object that we are referring to is the $scope object. The $scope object is simply a JavaScript object whose properties are all available to the view and with which the controller can interact.

The scopes of the application refer to the application model. Scopes are the execution context for expressions. The $scope object is where we define the business functionality of the application, the methods in our controllers, and properties in the views.Scopes serve as the glue between the controller and the view

Scopes are the source of truth for the application state. Because of this live binding, we can rely on the $scope to update immediately when the view modifies it, and we can rely on the view to update when the $scope changes.

All properties found on the $scope object are automatically accessible to the view.Scopes have the following basic functions: • They provide observers to watch for model changes • They provide the ability to propagate model changes through the application as well as outside the system to other components • They can be nested such that they can isolate functionality and model properties • They provide an execution environment in which expressions are evaluated

What is the digest loop? 

LinkingWhen angular start running, all of the $scope objects are attached or linked to the view. All functions that create $scope objects attach themselves to the view as well. These scopes will register functions that run when things change in the context of the angular app. These functions are called $watch functions, which is how Angular knows when to start the event loop.

When the event loop is running, which usually executes on the top-most $scope object (called the $rootScope), every child scope performs it’s own dirty checking. Every watch function is checked for changes. If any changes are detected, then the $scope object will fire the callback.

The controller is not the appropriate place to do any DOM manipulation or formatting, data manipulation, or state maintenance beyond holding the model data. It is simply the glue between the view and the $scope model.

As we can see, the $scope object is how we pass along information from the model to the view. It is also how we set up watch events, interact with other parts of the application, and create application-specific logic.

With the exception of isolate scopes, all scopes are created with prototypal inheritance, meaning that they have access to their parent scopes. If we are familiar with object-oriented programming, this behavior should look familiar.

It is a best practice to keep our controllers as slim as possible. It’s bad practice to allow any DOM interaction or data manipulation inside the controller.Dirty DOM manipulation should be managed within directives

See: https://github.com/angular/angular.js/wiki

New Page