We’ll start with a very brief, high-level explanation of the listed concept.
AngularJS' two-way data-binding model is one of the things that elevate the framework to whole another level. In the olden days, when a particular data point in the model changes, you would have to grab the DOM element and then push the change. Conversely, if there were a change in the view, again we would have to set up a listener to grab the DOM element and pull the change. AngularJS does away with this archaic methodology by creating a two-way binding system that automatically synchronizes the model and the view. Not only does this allow for less code, but also allows easier management of the variable throughout the scope of the application.
Here is a simple example of data binding.
Notice the use of ng-model to bind the view to the variable in the model and ng-click to bind the view to the function in the model.
An AngularJS Directive is another feature that distinguishes Angular from the rest. Directives are an awesome way to add custom behavior to DOM elements that gets attached at compile-time so that it breathes and lives with the DOM itself.
Below is a simple example of multiple kinds of directive. The first directive shows how a directive can house snippets of html code you may want use in many places. The other two directives show how you can link to a controller function.
Simply put, filters are nothing but way to quickly format angular expressions pushed to the view. Look at the following example:
See how easy they are?
5. Services/Factories/Providers and Dependency Injection
AngularJS services/factories/providers are singleton objects that serve as the foundation for sharing code across the app. Services are what make AngularJS excel in structure and code reusability. Services are wired through dependency injection.
Below is a simple example of a factory object that allows sharing within two different controllers.
For a more detailed explanation on how services differ from factories and providers: http://stackoverflow.com/questions/15666048/angular-js-service-vs-provider-vs-factory
- add IDs to all the elements to facilitate testing
- use xpaths