Framework can be divided into 3 major parts:
- Ng-app : This directive defines and links an Angular application to HTML
- Ng-model : This directive binds the values of AngularJS application data to HTML output controls
- Ng-bind : binds the application data to HTML tags
When the page is loaded in the browser:
- Next AngularJS scans through the HTML to look for AngularJS applications and views. Once view is located , it connects the view to the corresponding controller function.
- Next, AngularJS executes the controller functions, it then renders views with data from the model populated by the controller.
- Data binding : It is the automatic synchronization of data between model and view components
- Scope : These are objects that refer to the model. They act as a glue between controller and view. All properties found on the scope object are automatically bound to the view by Angular. i.e, Angular quietly watches for changes to these properties and updates the view automatically
- Services : Controllers in Angular are simple functions that have one job only, which is to manipulate the scope. Eg. You can use controller to prefill data into the scope from the server or implement business logic validations. ‘Services’ help controller to do this. Most of the time it synchronizes upto a server to an offline data store and exposes methods to pull and push data to and from a server. Angular has several built in services. Eg. $https; to make a XMLHttpRequest.
- Directives : They bring additional functionality to HTML. We never have to manipulate the DOM to simulate them. All that our applicaton needs to do is to assign attributes to elements to get any functionality. How the view behaves is up to the directives
- Templates : These are the rendered view with information from the controller and model.
- Routing : It is the concept of switching views i.e ngRoute module routes your application to different pages without reloading the entire application
- Model View Whatever : Angular is now closer to MVVM - the $scope object could be considered the ViewModel that is being decorated by a function that we call a controller. Whatever stands for ‘Whatever works for you’
- Deep Linking : This allows to encode the state of application in the URL so it can be bookmarked. The application can then be restored from the URL to the same state
- Dependency Injection : This specifies a design pattern in which components are given dependencies instead of hard coding them within the component
- Data binding provides users a rich and responsive experience
- Developer can write less code and get more functionality. Less code cause less bugs
- The main advantage is that it is maintained by Google
- Not secure: Application written in AngularJS is not safe. Server side authentication and authorization is must to keep an application secure
- Lagging UI : If there are more than 2000 watchers, it can get the UI to severely lag. This means that the possible complexity of Angular forms is limited
- Name Clashes : You don’t have the ability to compose many ng-apps on the same page. This can cause name clashes
Examples of popular applications that use AngularJS
- Video streaming applications : YouTube’s application for Sony PS3, Netflix.com
- User-Review Applications : Mobile site of GoodFilms that offers movie reviews to users
- Weather Applications : weather broadcasting application weather.com
- User generated content portals: Freelancer.com which is a platform for employees to post their projects and interested candidates to presen their profiles for that
- eCommerce : Several eCommerce sites uses AngularJS