What is AngularJS?
AngularJS is a powerful and structural JavaScript framework which is easier to implement in single web applications and allows organizing large, client heavy applications into something manageable. It is an open source web application framework, free and used by thousands of developers around the world.
AngularJS is based on the MVC (Model View Control) pattern that is intended to build rich internet web applications and simplify both development and testing of applications by using MVC architecture and separates your rich internet applications into models, views and controllers. AngularJS creates single page applications, which means the browser is going to load a single page regardless of the size of your application.
AngularJS was developed by Miskohevery and Adam Abron,maintained by Google; used internally by them and MIT. It is licensed under the Apache License version 2.0. It was initially released in 2009 and the current stable release is 1.3.5 (Decemeber 1, 2014).
AngularJS: In this section, let us summarize the basics of AngularJS.
- Is a library written in JavaScript
- Is not a platform or language
- Is not a plug-in or extension
- It extends HTML, CSS and JavaScript
- Is not a DOM manipulation library like jQuery
- Does not require jQuery or inheritance
- Does not require one-way data binding and boilerplate code
Why AngularJS?
- It is based on MVC design pattern which provides numerous ways to build web application at client side.
- It helps to build client side applications with less code and more flexibility.
- It extends HTML by using functionality of directives, attributes, expressions and templates to HTML.
- AngularJS is a MVC architecture which simplifies the development and testing of applications easily for client side.
- It is good for developing single page applications and front ends for web based applications.
- It has flexible framework and versatile features. So it is used for both large app projects and small little applications.
Features:
AngularJS (JavaScript based framework) creates applications in a faster way by using several features such as:
- It is a client side technology which provides powerful things to create dynamic web applications.
- It is a MVC based framework, allows users to build proper architecture and maintainable web applications.
- It is an open source web application framework used by thousands of developers around the world.
- It allows use of reusable components and code reuse.
- It makes creation of user interface (UI) easy through data binding process.
- Declarative HTML approach.
- It helps to divide your application into smaller parts.
Architectural Diagram and Components: Let us have a look at the architecture diagram of the AngularJS framework and its components.
Figure: AngularJS Architecture
AngularJS contains modules which act as a container for different types of applications such as controllers, views, directives, factory etc. Module specifies how an application should be bootstrapped. Using modules, processes will be easier to understand; you can reuse the code, end to end tests uses modules to override the configuration etc. It is the place for creating, registering and retrieving angular modules.
Config component only accepts providers from modules, means every service, factory etc are instances of provider. It provides all these instances to routes.
The Routes are used for linking URL’s to controllers and views.
The Views are used to add sophisticated handling of user events. It uses ng-viewdirective that complements route service by template of the current route to the main layout (index.html) file.
The controller controls the data of AngularJS applications which are regular JavaScript objects. AngularJS defines ng-controllerdirective which creates new controller objects by using controller function. And new child is available to the controller function as $scopeas shown in the diagram.
The views sends element or attribute to the directives which tells AngularJS’s HTML compiler to attach specific behavior to the DOM element and its children.
The factory is used to define the AngularJS service and it is called when a service needs to be instantiated.
Getting Started with AngularJS:
AngularJS is easy to start with. It provides features like two way data binding which makes custom tags, attributes which encapsulate built-in directives that make extending functionality of HTML easier.
- It is distributed JavaScript file and can be used in a webpage by including AngularJS library as shown below:
[code]
<script src=”http:// ajax.googleapis.com/ajax/libs/ angularjs /1.2.26/ angular.min.js”>
</script>
[/code]
You can also check the latest version of AngularJS on their official website.
- You can create AngularJS application as shown below:
[code]
<htmlng-app></html>
Or
<html ng-app=”MyApp”></html>
Or
<divng-app></div>
Or
<div ng-app=”MyApp”></div>
[/code]
The ng-app attribute is the root element of the AngularJS app.
- Controller can be defined as shown below:
[code]
<div ng-app=” “ ng-controller=”MyController”>
<input type=”text” ng-model=”message”>
</div>
[/code]
The ng-controllerdirective defines the application controller. The ng-modeldirective binds the value of HTML controls such as input fields, select etc to the application data.
- Implement the controller by using $scope object as written below:
[code]
functionMyController($scope){
$scope.message=”Enter your name”;
}
[/code]
The $scope object refers to the application model which invokes the controller that creates message property in the scope.
Core Concepts:In this section we will have a detailed discussion about the core components and the concepts behind them.
- Modules
- Directives
- Scope
- Controllers
- Expressions
- Templates
- Routing
- Filters
Modules:
Modules provide excellent mechanism for dividing the application into small reusable components and specify how an application should be bootstrapped. Modules specify how you define the components in the application and makes application more readable. Each module is identified by a unique name.
Directives:
Directives are core building blocks of AngularJS which are used to create custom HTML tags and can be placed in element names, attributes and comments. Directives can be used as HTML directives which build complex widgets with layered functionality.
Scope:
Scope is an object that binds a view to the controller. In MVC structure, it refers to the application model. Scopes can watch expressions and propagate events as they are arranged in hierarchical structure.
Controllers:
Controllers are JavaScript objects that defines the actual behavior of your app. It is responsible for setting model properties and functions by using $scope object. The controller does not store state and does not interact with remote services.
Expressions:
Expressions are written inside curly braces “{{ }}” denote bindings which referrers to our application model. Expressions do not support control flow statements. AngularJS will output the data where they are used.
Templates:
Template is just old-plain-HTML that does not include any angular specific file templates. It comes with a set of live templates to create controllers etc by using template engine. Templates are used to show information from the model and controller.
Routing:
It is used for linking URL’s to controller and views. Routing is taken care by service providers called $routeProvider to handle routing which is the provider of the $route service. In other words, it’s loading of sub templates depending upon the URL of the page.
Filters:
Filters are used with expressions to transform or modify the data from the models. We can add expressions or directives using pipe character. AngularJS has some of the commonly used filters such as:
- currency: converts number to currency format.
- uppercase: converts strings to uppercase.
- lowercase: converts strings to lowercase.
- filter: selects subset of items from array.
- orderBy: orders array by the expression such as ordered alphabetically for strings and numerically for numbers.
Example:
Let’s create one simple example using AngularJS library and create a HTML file as FirstExample.html as shown below:
Listing1: Simple AngularJS application
[code]
<!DOCTYPE html>
<html>
<head>
<script src= “http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js”></script>
</head>
<body>
<div ng-app=”” ng-controller=”MyController”>
Enter Name: <input type=”text” ng-model=”userName”><br>
<br>
Full Name: {{userName}}
</div>
<script>
functionMyController($scope) {
$scope.userName = “David”;
}
</script>
</body>
</html>
[/code]
As discussed, we have included AngularJS JavaScript file in the HTML page which is defined within the <head> tag. The next part contains AngularJS app which is defined using the ng-app attribute runs inside the <div> tag.
The ng-controller directive defines the application controller. The AngularJS will invoke the “MyController” with $scope object which creates property called “username” in the scope.
Define the model name using ng-modeldirective defined in the <input> tag. It binds the input field to the controller property “username”.
Open the FirstExample.html in the browser and see the result as shown in the screen shot below:
Figure: AngularJS Example
Conclusion: We have already discussed all the aspects of AnguarJS. Before we conclude, let us summarize the points. AngularJS (also known as Angular)is an open source web application framework. It provides client side MVC architecture along with commonly used components required for rich internet applications. AngularJS follows declarative programming model for building user interfaces. The main goal of this framework is to make development and testing easier.
Hope you have got a clear understanding of the AngularJS framework. Enjoy reading in www.techalpine.com
