T N's List: Angular

• In angular, a model is any data that is reachable as a property of an angular Scope object. The name of the property is the model identifier and the value is any JavaScript object (including arrays and primitives).
• The only requirement for a JavaScript object to be a model in angular is that the object must be referenced by an angular scope as a property of that scope object. This property reference can be created explicitly or implicitly.
• 

1 more annotation...

• It should contain only the business logic needed for a single view.
• The most common way to keep controllers slim is by encapsulating work that doesn't belong to controllers into services and then using these services in controllers via dependency injection.
• Putting any presentation logic into controllers significantly affects testability of the business logic. Angular offers dev_guide.templates.databinding for automatic DOM manipulation. If you have to perform your own manual DOM manipulation, encapsulate the presentation logic in directives.
• Input formatting — Use angular form controls instead.
• Output filtering — Use angular filters instead.
• Run stateless or stateful code shared across controllers — Use angular services instead.

4 more annotations...

• In angular, the view is the DOM loaded and rendered in the browser, after angular has transformed the DOM based on information in the template, controller and model.
• 

• An angular template is the declarative specification that, along with information from the model and controller, becomes the rendered view that a user sees in the browser. It is the static DOM, containing HTML, CSS, and angular-specific elements and angular-specific element attributes. The angular elements and attributes direct angular to add behavior and transform the template DOM into the dynamic view DOM.

• These are the types of angular elements and element attributes you can use in a template:

    
   
  • Directive — An attribute or element that augments an existing DOM element or represents a reusable DOM component - a widget.
   
  • Markup — The double curly brace notation {{ }} to bind expressions to elements is built-in angular markup.
   
  • Filter — Formats your data for display to the user.
   
  • Form controls — Lets you validate user input.
• In a simple single-page app, the template consists of HTML, CSS, and angular directives contained in just one HTML file (usually index.html). In a more complex app, you can display multiple views within one main page using "partials", which are segments of template located in separate HTML files. You "include" the partials in the main page using the $route service in conjunction with the ngView directive. An example of this technique is shown in the angular tutorial, in steps seven and eight.

1 more annotation...

• Data-binding in angular web apps is the automatic syncing of data between the model and view components.
• They are different because first the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser, and second, the compilation step produces a live view. We say live because any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. This makes the model always the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.
• Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency.

1 more annotation...

• Writing your own filter is very easy: just register a new filter (injectable) factory function with your module. This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function.

• Services are a feature that angular brings to client-side web apps from the server side, where services have been commonly used for a long time. Services in angular apps are substitutable objects that are wired together using dependency injection (DI). Services are most often used with dependency injection, also a key feature of angular apps.
• Most applications have a main method which instantiates, wires, and bootstraps the application. Angular apps don't have a main method, instead modules serve the purpose of declaratively specifying how an application should be bootstrapped.

• we recommend that you break your application to multiple modules like this:

    
   
  • A service module, for service declaration
   
  • A directive module, for directive declaration
   
  • A filter module, for filter declaration
   
  • And an application level module which depends on the above modules, and which has initialization code.
• A module is a collection of configuration and run blocks which get applied to the application during the bootstrap process.
• Configuration blocks - get executed during the provider registrations and configuration phase. Only providers and constants can be injected into configuration blocks. This is to prevent accidental instantiation of services before they have been fully configured.
• Run blocks - get executed after the injector is created and are used to kickstart the application. Only instances and constants can be injected into run blocks. This is to prevent further system configuration during application run time.
• There are some convenience methods on the module which are equivalent to the config block.
• The configuration blocks get applied in the order in which they are registered.
• Run blocks are the closest thing in Angular to the main method. A run block is the code which needs to run to kickstart the application. It is executed after all of the service have been configured and the injector has been created. Run blocks typically contain code which is hard to unit-test, and for this reason should be declared in isolated modules, so that they can be ignored in the unit-tests.
• Modules can list other modules as their dependencies. Depending on a module implies that required module needs to be loaded before the requiring module is loaded. In other words the configuration blocks of the required modules execute before the configuration blocks or the requiring module. The same is true for the run blocks. Each module can only be loaded once, even if multiple other modules require it.
• Because modules do nothing at load time they can be loaded into the VM in any order and thus script loaders can take advantage of this property and parallelize the loading process.
• In its simplest form a unit-test is a way of instantiating a subset of the application in test and then applying a stimulus to it. It is important to realize that each module can only be loaded once per injector. Typically an app has only one injector. But in tests, each test has its own injector, which means that the modules are loaded multiple times per VM. Properly structured modules can help with unit testing

10 more annotations...

• Angular services are singletons that carry out specific tasks common to web apps
• To use an angular service, you identify it as a dependency for the dependent (a controller, or another service) that depends on the service. Angular's dependency injection subsystem takes care of the rest. The angular injector subsystem is in charge of service instantiation, resolution of dependencies, and provision of dependencies to factory functions as requested.
• Angular injects dependencies using "constructor" injection (the service is passed in via a factory function). Because JavaScript is a dynamically typed language, Angular's dependency injection subsystem cannot use static types to identify service dependencies. For this reason a dependent must explicitly define its dependencies by using the $inject property.
• The angular web framework provides a set of services for common operations. Like other core angular variables and identifiers, the built-in services always start with $ (such as $http mentioned above). You can also create your own custom services.

2 more annotations...

• It is important that the order of the string identifiers in the array is the same as the order of argument names in the signature of the factory function. Unless the dependencies are inferred from the function signature, it is this array with IDs and their order that the injector uses to determine which services and in which order to inject.

• Since JavaScript is a dynamic language, DI can't figure out which services to inject by static types (like in static typed languages). Therefore, you can specify the service name by using the $inject property, which is an array containing strings with names of services to be injected. The name must match the corresponding service ID registered with angular. The order of the service IDs matters: the order of the services in the array will be used when calling the factory function with injected parameters. The names of parameters in factory function don't matter, but by convention they match the service IDs, which has added benefits discussed below.

• Form and controls provide validation services, so that the user can be notified of invalid input.

• To allow styling of form as well as controls, ngModel add these CSS classes:

    
   
  • ng-valid
   
  • ng-invalid
   
  • ng-pristine
   
  • ng-dirty
• A form is in instance of FormController. The form instance can optionally be published into the scope using the name attribute. Similarly control is an instance of NgModelController. The control instance can similarly be published into the form instance using the name attribute. This implies that the internal state of both the form and the control is available for binding in the view using the standard binding primitives.
• Angular provides basic implementation for most common html5 input types: (text, number, url, email, radio, checkbox), as well as some directives for validation (required, pattern, minlength, maxlength, min, max).

2 more annotations...

• The only problem I ran into while building the application is the “one route / one view” coupling I alluded to above. As suggested in this thread, you can use <ng:include> to bind partials in the page. The same thread also indicates that multiple <ng:views> per route definition will be supported in the future. I was able to handle the simple UI requirements of this app using one <ng:view> and one <ng:include>. For more complex applications, I’d love the routing infrastructure to allow me to easily and arbitrarily add, remove, change, or animate different elements of the DOM when the route changes in order to support deeper UI transformations. I’m sure there are ways to do this. If Angular.js folks are reading this post, I’d love to hear what they think and what’s coming.

• In AngularJS, routing is provided by $routeProvider which provides the $route service. We use this service to wire the requested url with the controller and view.
• In AngularJS, there are module definitions that contain service providers. These providers are responsible for instantiating the services. When an application starts, all the AngularJS modules are loaded and all service providers contained in these modules are registered. When we ask for a service(eg. $route) by mentioning it as an argument in the controller function, AngularJS delegates our request to its dependency injector. The injector then inject the requested service into the controller function after it is instantiated by the corresponding service provider.

• Is there any progress on supporting multiple views bound to the routing path? The workaround using ng-controller, manually parsing the routing path and binding the template via ng-include seems very cumbersome, if it works at all...

• you don't have to use templates with routes. Instead, you can use routing to resolve client-side render events.