What is Angular JS ?
AngularJS is a very powerful JavaScript Framework. It is used in Single Page Application (SPA) projects. It extends HTML DOM with additional attributes and makes it more responsive to user actions. AngularJS is open source, completely free, and used by thousands of developers around the world. It is licensed under the Apache license version 2.0.
AngularJS was originally developed in 2009 by Miško Hevery at Brat Tech LLC as the software behind an online JSON storage service, that would have been priced by the megabyte, for easy-to-make applications for the enterprise. You can find the AngularJS project here:
AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA application into models, views and controllers. The views are specified using HTML + AngularJS’s own template language. The models and controllers are specified via JavaScript objects and JavaScript functions. Thus, the views are specified declaratively, as HTML normally is, and the models and controllers are specified imperatively, as JavaScript normally is.
If you don’t know the difference between declarative and imperative programming, don’t worry. It is not important to know before learning AngularJS. Besides, it is pretty simple to find the definition on the web.
Features Of Angular JS
- MVC – The framework is built on the famous concept of MVC (Model-View-Controller). This is a design pattern used in all modern day web applications. This pattern is based on splitting the business logic layer, the data layer, and presentation layer into separate sections. The division into different sections is done so that each one could be managed more easily.
- Data Model Binding – You don’t need to write special code to bind data to the HTML controls. This can be done by Angular by just adding a few snippets of code.
- Writing less code – When carrying out DOM manipulation a lot of JavaScript was required to be written to design any application. But with Angular, you will be amazed with the lesser amount of code you need to write for DOM manipulation.
- Unit testing ready – The designers at Google not only developed Angular but also developed a testing framework called “Karma” which helps in designing unit tests for AngularJS applications.
Architecture of Angular JS
Angular.js follows the MVC architecture, the diagram of the MVC framework as shown below.
- The Controller represents the layer that has the business logic. User events trigger the functions which are stored inside your controller. The user events are part of the controller.
- Views are used to represent the presentation layer which is provided to the end users
- Models are used to represent your data. The data in your model can be as simple as just having primitive declarations. For example, if you are maintaining a student application, your data model could just have a student id and a name. Or it can also be complex by having a structured data model. If you are maintaining a car ownership application, you can have structures to define the vehicle itself in terms of its engine capacity, seating capacity, etc.
AngularJS Advantages
- Since it’s an open source framework, you can expect the number of errors or issues to be minimal.
- Two-way binding – Angular.js keeps the data and presentation layer in sync. Now you don’t need to write additional JavaScript code to keep the data in your HTML code and your data later in sync. Angular.js will automatically do this for you. You just need to specify which control is bound to which part of your model.
- Routing – Angular can take care of routing which means moving from one view to another. This is the key fundamental of single page applications; wherein you can move to different functionalities in your web application based on user interaction but still stay on the same page.
- Angular supports testing, both unit testing, and integration testing.
- It extends HTML by providing its own elements called directives. At a high level, directives are markers on a DOM element (such as an attribute, element name, and comment or CSS class) that tell AngularJS’s HTML compiler to attach a specified behavior to that DOM element. These directives help in extending the functionality of existing HTML elements to give more power to your web application.
First Example:
AngularJS First Example
Following is a simple “Hello Word” example made with AngularJS. It specifies the Model, View, Controller part of an AngularJS app.
<!DOCTYPE html>
<html lang=“en”>
<head>
<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js”></script>
</head>
<body ng-app=“myapp”>
<div ng-controller=“HelloController” >
<h2>Hello {{helloTo.title}} !</h2>
</div>
<script>
angular.module(“myapp”, [])
.controller(“HelloController”, function($scope) {
$scope.helloTo = {};
$scope.helloTo.title = “World, AngularJS”;
} );
</script>
</body>
</html>
PHP-TUTORIAL 