AngularJS is a web application framework designed to simplify rich client-side application development. This documentation is for Angular 1.x, the predecessor of the more modern Angular 2 or see the Stack Overflow documentation for Angular 2.
Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. Components were introduced in Angular 1.5, the examples in this section will not work with older AngularJS versions.
A complete developer guide about Components is avalable on https://docs.angularjs.org/guide/component
Providers cannot be injected into run blocks.
Services or Values cannot be injected into config blocks.
Make sure to annotate your injections so your code will not break on minification.
A very common question when working with Angular is how to share data between controllers. Using a service is the most frequent response and this is a simple example demonstrating a factory pattern to share any type of data object between two or more controllers. Because it is a shared object reference, an update in one controller will be immediately available in all other controllers using the service. Note that both service and factory and both providers.
So while this Data Binding concept on a whole is easy on the developer, it is quite heavy on the Browser since Angular listens to every event change and runs the Digest Cycle. Because of this, whenever we attach some model to the view, make sure that Scope is as optimized as possible
The ngRoute is a build-in module provides routing and deeplinking services and directives for angular apps.
Full documentation about ngRoute is avalable on https://docs.angularjs.org/api/ngRoute
What is ui-router?
Angular UI-Router is a client-side Single Page Application routing framework for AngularJS.
Routing frameworks for SPAs update the browser's URL as the user navigates through the app. Conversely, this allows changes to the browser's URL to drive navigation through the app, thus allowing the user to create a bookmark to a location deep within the SPA.
UI-Router applications are modeled as a hierarchical tree of states. UI-Router provides a state machine to manage the transitions between those application states in a transaction-like manner.
Useful links
You can find the official API Documentation here. For questions about ui-router VS ng-router, you can find a reasonably detailed answer here. Keep in mind ng-router has already released a new ng-router update called ngNewRouter (compatible with Angular 1.5+/2.0) which supports states just like ui-router. You can read more about ngNewRouter here.
Angular uses a tree of scopes to bind the logic (from controllers, directives, etc) to the view and are the primary mechanism behind change detection in AngularJS. A more detailed reference for scopes can be found at docs.angularjs.org
The root of the tree is accessible as via inject-able service $rootScope. All child $scopes inherit the methods and properties of their parent $scope, allowing children access to methods without the use of Angular Services.
UPPERCASE your constant: Writing constant in capital is a common best practice used in many languages. It's also useful to clearly identify the nature of injected elements:
When you see .controller('MyController', function($scope, Profile, EVENT)), you instantly know that:
$scope is an angular elementProfile is a custom Service or FactoryEVENT is an angular constantProviders are singleton objects that can be injected, for example, into other services, controllers and directives. All providers are registered using different "recipes", where Provider is the most flexible one. All possible recipes are:
Services, Factories and Providers are all lazy initialized, component is initialized only if application depends on it.
Decorators are closely related to Providers. Decorators are used to intercept service or factory creation in order to change it's behavior or override (parts of) it.
Decorator is function that allow a service, factory, directive or filter to be modified prior to its usage. Decorator is used to override or modify the behavior of the service. The return value of the decorator function may be the original service, or a new service that replaces, or wraps and delegates to, the original service.
Any decorating must be done in angular application's config phase by injecting $provide and using it's $provide.decorator function.
The decorator function has a
$delegateobject injected to provide access to the service that matches the selector in the decorator. This$delegatewill be the service you are decorating. The return value of the function provided to the decorator will take place of the service, directive, or filter being decorated.
One should consider using decorator only if any other approach is not appropriate or proves to be too tedious. If large application is using same service, and one part is changing service behavior, it's easy to create confusion and/or bugs in the process.
Typical use case would be when you have a 3rd party dependency which you can't upgrade but need it to work little differently or extend it.
Use this plunker to play with examples.
angular.module('lazy', [
'alreadyLoadedDependency1',
'alreadyLoadedDependency2',
...
{
files: [
'path/to/lazily/loaded/dependency1.js',
'path/to/lazily/loaded/dependency2.js', //<--- requires lazily loaded dependency1
'path/to/lazily/loaded/dependency.css'
],
serie: true //Sequential load instead of parallel
}
]);
Create an ng-hide class in css file. ng-show/hide will not work without the class.
AngularJS provides these parameters as special variables that are available in the ng-repeat expression and anywhere inside of the HTML tag on which the ng-repeat lives.