Going back to Angularjs 1

Definitely not an expert when it comes  to Angular. This is part of my 1 week learning experience and i hope i pick up as much angular, typescript as a i can.

In general, Angularjs1 works in 2 phases :-

a) Configuring

b) Binding / Runtime

During the configuration phases, Angular has concepts like module, controller, services, providers and components (ui components)

Typically we worked with App -> Controller -> Services / Factory etc

Why use Factory and Value recipes? 

Long, long time ago, we have factory and we have values recipes. These becomes the cornerstone for laying down other components in angularjs (again we are repeating ourselves - module, controller, services, providers and components (ui components)

Because Angular injects various dependencies.

Factory recipes allows :-

- Lazy initialization
- Leverage on other services from a module or modules
- Service initialization

Value recipes is something like a key value pair that gives key / value definition for data-binding in angularjs.

Example of value recipes are as follows :-

var myApp = angular.module('myApp', []);
myApp.value('valueType', 'TestApi);

Provider = $get

Service instance are singleton in Angularjs

Angular Directives 

What the heck is angular directives. Good exmples would be html element types that you laid down on your html mark up like ngmodel, ngbind.

Also note that  the following means the same thing, ng-model

1. ng-bind
2. ng:bind
3. ng_bind
4. data-ng-bind
5. x-ng-bind

Directive 'restrict' options that is available :-

• 'A' - only matches attribute name
• 'E' - only matches element name
• 'C' - only matches class name
• 'M' - only matches comment

Angular Decorators

Bootstrap

Angular bootstrapping processes -> module loading, walking through the DOM and then

Only One Ng-App 

You cannot have more than on ng-App in your application.

What happens when Angularjs bootstrap?

• load the module associated with the directive.
• create the application injector 
• compile the DOM treating the ngApp directive as the root of the compilation. This allows you to tell it to treat only a portion of the DOM as an Angular application.

A simple example of Angularjs directive can be found here.

$compile 

$compile is used when you trying to rebind (adding behaviour, events) or other dynamic content or template into an existing controller. In other words, say you created a static directive and then loads it  in to DOM. If you wanna make any changes to its behaviour, you can't. This is where $compile comes in.

Take a look at the example here.

$observe 

$observe - is for observing attribute. It only available from attribute level, $watch is available in the scope level. Only if there are changes in the attribute level, events associated with a watch gets fired away.

For a quick example, click here.

$watch 

Watch  is a method on Scope object.

$parse

$injector

$injector is used to load modules, instantiate types and invoke method.

Simple example can be shown using code here.