Learn AngularJs [Introduction]
What is AngularJS
AngularJS is no different from plain HTML, but an extensions to HTML with new attributes i.e using
Before writing any code first we need to download and import AngularJS library on our web page, then we extend HTML with angularjs directives.
We can also include AngularJS library from CDN.
AngularJS extends HTML with Directives.
In AngularJs with the directives, we can do DOM Manipulation, Data Binding and Events handling. Directives teach HTML new tricks. Most important directive is
ng-app which tells AngularJS that this part of web page is AngularJS application. In other words ng-app marked it as an angularjs application.
The AngularJS framework can be divided into following three significant parts
ng-app: This directive used to define the starting point of application and it will act as the root element of an application.
ng-model: This directive binds the value of HTML controls ( input , select , textarea ) to application data.
ng-bind: This directive binds the content of HTML element to application data.
Example of AngularJs Directives
Note : This is just some examples of directive, there are many more directives available in AngularJS, which will learn in our further articles.
Our First AngularJS Sample Example
Here we are going to write a simple angularjs example which displays addition of two numbers using angularjs number expression. Our code looks like as shown in below image.
Key Player in AngularJs
Modules are really just as containers for :
- Controllers : acts as “brain” for view
- It retrieve data from factory/Service.
- It handles events trigger by view (click, mouseover event etc).
- Dependent on $scope object to interact with view.
- Routes : Each route is a unique path having reference to controller and view.
- Factories/ Services :
- It is used to call REST API.
- It is used to transfer (share) data between controller.
- It is used to handle custom logic.
- They are Singletons.
Pros & Cons of AngularJS
- No page refresh: This means to load data, we don’t need to refresh the whole web page, just load particular part of our web page which loads dynamic data.
- Code Re-useable: AngularJS include a lot of reusable code while developing application .i.e utility code like user navigation and browser history, which we can reuse in our project.
- Testing: Applications build in angularjs are more testable as compare to other frameworks. We can easily write an automated test, and so we test various part of our application.
- Better user experience: SPA feels like a native application (like a desktop app) speedy and responsive.
- Two Way Data Binding: Data binding in AngularJS is the synchronization between the
view. This is one of the best features of Angularjs. When data in the model changes, the view reflects the change, and when data in the view changes, the model is updated as well.
- Ability to work offline: Even if the user loses internet connection, SPA can still work because all the pages are already loaded.
- Designed and Developed by Google: AngularJS is developed and built by a bunch of dedicated Google engineers and now it officially maintained by Google.
- Confused by many ways to handle: One advantage with AngularJS is that it can be handled it in different ways, ironically this is the same feature which becomes a hurdle. As many beginners find this bit confusing while developing an application.