The First AngularJS Application
In this tutorial, I’ll build your first AngularJS app. The tutorial describes what you need to know before moving further.
1. The ng-app directive initializes and links an AngularJS application to HTML. This directive also tells AngularJS that the <div> element is the “owner” of the AngularJS application.
2. The ng-model directive binds the values of AngularJS application data to HTML input controls.
3. The ng-bind directive binds the AngularJS Application data to HTML tags.
To create a first AngularJS application that asks users their annual income and the percentage they want to spend to buying mobile. There should be annual income and percentage input text fields. As soon as the value of any input text field changes the result is updated.
<!doctype html>
<html lang="en" ng-app>
<head>
<title>My First AngularJS App</title>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-init="income=0;per=0">
Your Annual income?
<input type="text" ng-model="income">
<br/>How much should you invest for buying mobile?
<input type="text" ng-model="per">%
<br/>The amount to be spent to buying mobile:{{income*per*0.01}}
</body>
</html>
AngularJS Hello World Application
In this section we are going to look had a build this simplest Hello Word Application with possibly can use Angular. My Goal here is want end up the page put the H1, this is Hello World in it, and want using angular to display the message. So, First thing we can do to include the Angular Script on the Basic HTML page.
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>
Now we need to create a controller. The Controller is defining by creating a function in the script tag. You can see the name this function CtrlHello. Then give this function primer called scope with the dollar sign. This is the special primer that angular uses in order to pass data in between the controller and the view.
<script type=”text/javascript”>
function CtrlHello($scope) {
$scope.HelloMessage = “Hello World”;
}
</script>
Now we are create H1 tag on the page to display Hello World message. In angular message place holder is start and stop with double curly braces. The expression is shown in bold form below. I tell Angular the h1 is control by the controller so I can declare controller name ng-controller in the h1 tag. ng is short for angular.
//<h1 ng-controller =”Name of Controller” > {{Message to Display}}!</h1>
<h1 ng-controller =”CtrlHello” > {{HelloMessage}}!</h1>
So sum up of all the above code is below , that will show Hello World message in the Browser.
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<title>Hello World </title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<h1 ng-controller ="CtrlHello" > {{HelloMessage}}!</h1>
<script type="text/javascript">
function CtrlHello($scope) {
$scope.HelloMessage = "Hello World";
}
</script>
</body>
</html>
The output of the above code is
Hello World!
How to install AngularJS
Installing AngularJS for your project is pretty simple. It is like adding other library. You can go to AngularJS website http://angularjs.org and you have couple of option as to download library from.
The first one is going to GitHub Option (as shown below), when you click on this and get into GitHub and you take a look and give you the option to download comprehensive version of the library.
You probably use the other option, now you click on the download button and make some addition choices. You can ask for a minified version that version has been compressed. The compressed version mean that shorter there is no tab and no comments, you can also choose the uncompressed version, these version are used by JavaScript developer. You can also choose entire build zip compression format. You can download a small file.
You can also have small link, call the CDN. CDN is Content delivery network. You can directly download the framework to your website from CDN link. Technically this one is little bit faster.
So let me go and download link again and then click on download button.
That can download framework on my download folder.
Now I create a folder on my desktop and call it Angular and then create subfolder lib and then again create lib subfolder AngularJS and then copy this AngularJS.min.js file there.
Now I can move to my text editor and create my first HTML file with the name index.htm in the AngularJS folder.
Example
Now let’s create an example using AngularJS library. Let us create an HTML file index.html as below.
<!DOCTYPE html>
<html lang=”en” ng-app>
<head>
<meta charset=UTF-8”>
<title>Hello World Demo</title>
<script src="lib/angularjs/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name"/>
<h2>Welcome {{name}}!</h2>
</body>
</html>
Following sections describe the above code in detail
Include Library into AngularJS
To make them regular html file into angular application we can add JavaScript file below in the header section.
<script src=”lib/angularjs/angular.min.js”></script>
Manage AngularJS app
Next we need to do is tell angular which part of application to manage. You do that by adding an attribute calling ng-app to your HTML tag. This is calling an angular directive. The Directive is a command that is giving to the library. Using Angular not just on your entire document but just on certain part of the page,
<html lang=”en” ng-app>
Model Directive
Ng-model is a directive call model name. this can bind any sort of field.
<input type=”text” ng-model=”name”/>
Save the code as index.html. You will see an output as below.
Welcome Dinesh!
What is AngularJS?
AngularJS is the open-source JavaScript framework of Google to make SPA (single-page applications or one-page web applications or dynamic web app) and which was recently made available to the public under the MIT license. AngularJS is a JavaScript framework that extends HTML DOM to make it dynamic, and develops its own tags and attributes. AngularJS is the client-side technology, entirely written in JavaScript that only require HTML, CSS, and JavaScript. It is anextensible framework that wants and pushes towards a structured development.
It is based on MVW framework (Model-View-Whatever), where whatever means Whatever Works for You and allows you to build well structured, easily testable, and maintainable front-end applications. The AngularJS can be used both as MVC and MVVM framework.
AngularJS was originally developed in 2009 by Misko Hevery and Adam Abrons at BratTech LLC(California). Its latest version is 1.4.3.
AngularJS is built around the idea that declarative programming should be used for creating user interfaces and cabling software components, while the imperative programming is excellent for expressing business logic. The framework adapts and extends the traditional HTML to better manage dynamic content to through the two-way data-binding (data link in both directions), which allows automatic synchronizationof models and views.
Key features of AngularJS
1. AngularJS is a client-side framework
- It runs in the user’s web browser (not on the server that hosts the site, such as PHP type of traditional web languages).
- It offers an organization for code and the operation of your application; it runs the application launch andnavigation from one part to another of the application.
- AngularJS is written in JavaScript and Its applications are coded in JavaScript.
- It is suitable for creating single-page applications where the browser loads the page once, and then makes asynchronous calls to the server to load new data . Asynchronous in this context means that the application continues to run without stoppingto wait for the server response.
2. AngularJS is Prescriptive.
- There is are commended way to create applications.
- AngularJS has its own vision of the MVC (Model-View-Controller) makes it particularly suitable for JavaScript.
3. Two-Way data binding.
This feature greatly facilitates the creation and managementof the user interface(UI).
Suppose you have a form and you want to fill in the data returned by the server.
Here is how you could go about it in classical JavaScript:
In the HTML code:
<input type=”text” id=”name”>
In JavaScript:
document.getElementById(‘name’)[0].text = ‘Dinesh’;
This technique has several disadvantages:
1. It’s tedious. It must find the right element within the DOM.
2. If HTML changes (and therefore the DOM), your code may no longer work.
3. The operation must be repeated each time the server sends new data With two-way data link (two-way data binding), AngularJS allows you not to worry about all that. Everything happens automatically.
In the HTML code:
<input type=”text” ng-model=”name”>
In JavaScript:
scope.name = ‘Dinesh’;
The data (in our example, the variable name) is stored in one place, and all parts of the application that uses the data using the same version of the information. If the information changes, everyone will be informed.
In our example, the JavaScript code sends a value in the DOM, but the beauty of this feature is that if the DOM changes (for example, if the user changes the form), the change is automatically transmitted back to the JavaScript code. All this without a single line of code.
In classic JavaScript, it should attach a DOM event listener to detect changes made by the user:
document.getElementById(‘name’).onChange(function () {
var new_text = this[0].text;
})
Below example better illustrate the strength of AngularJS:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Hello World </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
Friend List:<input type="text" ng-model="NewFriend"/>
<button ng-click="add()">Add</button>
<hr />
<h2>Friend List</h2>
<h1>Welcome {{NewFriend}}!</h1>
</div>
</body>
</html>
Advantages
1. Excellent templating Engine
2. Handle DOM masterfully
3. Easy Data manipulation
4. MVC Architecture
Core Feature
1. Directive: HTML extension that allows the creation of new attributes and new elements and its helps to make dynamic HTML.
2. Data Binding: Data synchronization between the model and the view.
3. Filter: Formats the value of an expression to display it to the user.
4. Routing: It is switching views concept.
5. Controllers: Controllers are JavaScript functions that are bound to a particular scope.
6. Scope: The context where the model and functions are stored in the controllers, guidelines and expressions to access.
AngularJS MVC Architecture
We Need a Concept, we have data on one side and we have HTML on the other and we want to connect those two things, we want whatever happens on one to effects the other vice versa automatically.
One Idea has actually been around the software development for really long time. One of the popular Concepts to organizing application is called MVC Architecture that stands for Model View and Controller. Let’s go and review these three different primary components of angular and their relationship with each other.
Models: Now you can hear the world model in MVC Architecture. Model is like a Data in traditional web application. We can use data to create a dynamic document. We get the data from static JSON file or from database like SQL.
View: Other part of the application is called view. In order to show the data in model you can create an angular view. This is nothing more than a template. You can create view in your HTML code by double curly braces. Directives are the part of views component. In case of web application it’s HTML.
Controller: In Angular every thing starts with controller. The Controller is the central component in the Angular Application. The controller contains both logic and state. It gives you the ability to add functionality to your data. Now this is JavaScript link your views to your models.
In the Concept of Model, View and some thing else, the some thing else is some thing that ties or term is used bind the model and the view. The model and the view are bound, so what ever happen to the model automatically effects to the view, and whatever happens to the view automatically effects to the model. The thing that binds them is called controller. So go and see in this example.
<!doctype html>
<html ng-app="AddressApp">
<head>
<meta charset="UTF-8">
<title>AngularJS MVC Architecture</title>
<script SRC="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
</head>
<body>
<div ng-controller="MyAddress">
<h2>{{ MailAddress.Name }} </h2>
<p>{{ MailAddress.Address }} </p>
<p>{{ MailAddress.City }} </p>
</div>
<script>
//Now Creating controller
var app = angular.module('AddressApp', []);
app.controller('MyAddress', function($scope) {
//Now we creating model
$scope.MailAddress = {
'Name' : 'Dinesh Thakur',
'Address' : 'ModelTown',
'City' : 'Abohar'
}
});
</script>
</body>
</html>
As we can see even in the diagram.
The user sees the View and through the view is actually using the controller. So whenever the user fix about the controller is responsible for all the business logic around it. The controller then manipulates the model which updates the view at all.
Features of AngularJS
Let’s take a look at some architecture choices that angular has made.
Two way binding, this means user input in form field and this instantly updated in your angular model. That means in the most cases you don’t need to watch a specific advance and respond to them and manually update to your html. Instead angular that handles for you.
Dirty Checking, You do not have to put your data in the special structure and called setter and getter method to read and write your method. You can simply put your model data into plain old JavaScript objects and angular were respond one every your data changes and automatically updated the view.
Dependency Injection, This can be encapsulate pieces of your application better and also improve testability.