Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The Angular injector subsystem is in charge of creating components, resolving their dependencies, and providing them to other components as requested. Using Dependency Injection DI is pervasive throughout Angular. You can use it when defining components or when providing run and config blocks for a module. Components such as services, directives, filters, and animations are def

Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. Data Binding in Classical Template Systems Most templating systems bind data in only one direction: they merge template and model components toget

Guide: Controllers

In Angular, a Controller is defined by a JavaScript constructor function that is used to augment the Angular Scope. When a Controller is attached to the DOM via the ng-controller directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope. If the controller has been attached using the controller as syntax then

Guide: Conceptual Overview

This section briefly touches on all of the important parts of AngularJS using a simple example. For a more in-depth explanation, see the tutorial. Concept Description Template HTML with additional markup Directives extend HTML with custom attributes and elements Model the data shown to the user in the view and with which the user interacts Scope context where the model is stored so that controllers, directives and expressions can access it Expressions access variables and functions from the sco

Guide: Bootstrap

This page explains the Angular initialization process and how you can manually initialize Angular if necessary. Angular Tag This example shows the recommended path for integrating Angular with what we call automatic initialization. <!doctype html> <html xmlns:ng="http://angularjs.org" ng-app> <body> ... <script src="angular.js"></script> </body> </html> Place the script tag at the bottom of the page. Placing script tags at the end of the p

Guide: Accessibility

The goal of ngAria is to improve Angular's default accessibility by enabling common ARIA attributes that convey state or semantic information for assistive technologies used by persons with disabilities. ##Including ngAria Using ngAria is as simple as requiring the ngAria module in your application. ngAria hooks into standard AngularJS directives and quietly injects accessibility support into your application at runtime. angular.module('myApp', ['ngAria'])... ###Using ngAria Most of what ngAri

Guide: Animations

AngularJS provides animation hooks for common directives such as ngRepeat, ngSwitch, and ngView, as well as custom directives via the $animate service. These animation hooks are set in place to trigger animations during the life cycle of various directives and when triggered, will attempt to perform a CSS Transition, CSS Keyframe Animation or a JavaScript callback Animation (depending on if an animation is placed on the given directive). Animations can be placed using vanilla CSS by following t

form.FormController.$valid

$valid boolean True if all of the containing forms and controls are valid.

form.FormController.$setValidity()

$setValidity(); Sets the validity of a form control. This method will also propagate to parent forms.

form.FormController.$submitted

$submitted boolean True if user has submitted the form even if its invalid.