So let us start with basics What is AngularJs? AngularJS is a Javascript framework which helps in building web applications.
AngularJS is distributed as a JavaScript file, and can be added to a web page with a script tag in HTML file.
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
Who Developed AngularJs?
AngularJS framework is developed by google and it is an open source project which can be freely used in any application commercially and can be shared with anyone.
Why AngularJS?
- MVC: – The major benefit of using AngularJS is it works on the Model View Controller design pattern. Using angular its easy to develop an application with neat and clean MVC approach. Angular implements MVC by asking you to split your application into MVC components(Model View and Controller), then just let Angular takes care the rest of the things for you. Angular manages your components for you and also serves as the pipeline that connects them.
- Dependency Injection: -Dependency Injection (DI) is a software design pattern that deals with how components get hold of their dependencies. The angular subsystem is in charge of creating the components, resolving its dependencies and providing them to other components when requested. If you are new to Dependency Injection Checkout DI with AngularJS for more details
- Unit Testing: – Angular is built considering the unit testing, this is one of the major benefits of angular. It now easy to perform unit testing on AngularJS applications and components as it supports DI.
- Two-Way Data Binding: – Angular works little differently and supports two-way binding. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view.
Getting Started with AngularJS Simple Application
The first step is to download the latest AngularJS Framework from https://angularjs.org/ and add the reference of the script in the application or you could just add the online or CDN version of script tag into your HTML page as shown in the beginning of the article.
AngularJS Extends HTML with ng-directives. The basic ng directives which we use commonly are
- ng-app – ng-app is called the directive in angular and it is the starting point of the angular application. Angular will always check the ng-app directive first when the HTML page is loaded before processing anything.
- ng-model – The ng-model directive is used to binding view into the model, which other directives such as,
inputtextareaorselectrequire. It is also responsible for the validation like required, email, numbers etc. - ng-bind – The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression, and to update the text content when the value of that expression changes.
AngularJS Example: – In the below example we have used all the 3 common directives.
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app=""> <p>Input something in the input box:</p> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p> </div> </body> </html>
Srinivas Ramakrishna