Core Concepts of Angualar.js
Angular.js uses a two-way data binding between model and view.
Controllers should only contain business logic, reusable part of a controller can be factored into a service.
A Service is a reusable singleton. The second one is often used in test code to mock service dependencies.
module.config('$provider', ... $provider.factory)
Scopes are execution contexts, just like in a programming language. They can observe expressions and propagate events. During the template linking phase the directives set up $watch expressions on the scope. Both controllers and directives have reference to the scope, but not to each other. Use
angular.element(aDomElement).scope() to retrieve the scope on a DOM element.
- By Reference
- By Collection
- By Value
Templates are the bridge between model and controller.
:: are one-time expressions, they will not change after the first non-null value.
Filters format values of expressions for display to the user. Filters not only can be used in templates, but also in services, controllers and directives to reduce the cost of repeated filter invocation. Filters should be pure, can be registered with
filterProvider. Stateful filters are strongly discouraged, but you can do it with a
$stateful = true property on the filter.
Directives are the bridge between DOM elements and Angular’s HTML compiler. Angular normalizes element’s tag and attribute name.
- Strip `x-` and `data-` - convert `:`, `-` or `_` delimited name to `camelCase`
Types of directives:
- Template-expending directives, reusable template, use
restrict to control what to match with:
- Directives for manipulating the DOM, registering events, use the
- Directives wrap other elements, use
When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.
scope to create an isolate scope to separate the scope inside a directive from the scope outside.
&attr in the
scope option when you want your directive to expose an API for binding to behaviors.
controller when you want to expose an API to other directives. Otherwise use
Animations are implemented with CSS transitions or keyframe animation.
Beware that using
angular.module('myModule', ) will create the module
myModule and overwrite any existing module named
angular.module('myModule') to retrieve an existing module.
We can manually bootstrap angular using
angular.bootstrap. Useful when using 3rd-party loaders.
Any operation which can be shared among the instance of directives should be moved to the
compile function for performance reasons.