You can download Angular from
https://angularjs.org/
and for more information
http://en.wikipedia.org/wiki/AngularJS
http://www.w3schools.com/angular/
Here i am going to discuss few key words associated with Angular. Those include
- Directives, Filters, and Data Binding , Expressions
- Views, Controllers and Scope
- Modules, Routers and Factories
Why Angular ??? It's framework... Good SPA framework
SPA ???? Single Page Application
As a framework it gives
Data Binding, MVC, Routing , Testing, jqLite, Templates, History, Factories etc.
jqLite - for DOM manipulation.
So it has
ViewModel , Controllers , Views , Directives , Services , Dependency Injection , Validation much more..
First we create simple html page and add the angular to it.
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
</body>
</html>
----------------------------------------------------------------------------------------------------
I have added the reference to the web, you can download the angular from site https://angularjs.org/ and give the reference straight.
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body>
</body>
</html>
----------------------------------------------------------------------------------------------------
Now we are ready to go with the Angular, So once we add the Angular to page.. Next we will look at key concepts... Directive , Data Binding ...
Directive
Angular extend HTML with ng-directive. So directive start with ng-
angular has various directives and some are
ng-app = directive defines AngularJs application
ng-model = directive binds the value of the HTML control (input, slect, textarea..) to application data
ng-bind = directive binds application data to the HTML view
Now let's write a simple angular application with directives
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
You can see above, highlighted, i have used few directives.
ng-app - declares this as an angular application
then we have we have input text box and we have bind the value of the text box to application using ng-model directive , we have use "name" as the reference.
Now we need to show the application data back into HTML view.
ng-bind directive binds that application data to the HTML view.
That's how angular application is defined and it's data been bind into application and show application bound data back into HTML view.
Behind the scene : What ng-model does behind the scene is, it's going to add a property up in the memory called 'name' into what's called the "scope". you will understand this concept, as you will read through.
Now we have learnt three basic angular directives.
Note : without using ng-bind , we can use {{}} to bind application data to HTML view.
----------------------------------------------------------------------------------------------------
<div ng-app="">
<p>Name: <input type="text" ng-model="name"></p>
{{name}}
</div>
----------------------------------------------------------------------------------------------------
This will have the same results
{{name}} , this is known as data binding expression.
So we now know expressions also, this is much similar to JavaScript expressions..
Now we have learnt four key words, Next ..
let's do the iteration.. key feature in any language..
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div >
<p>Name: <input type="text" data-ng-model="name"></p>
{{name}}
</div>
<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
As you can see we have defines a new angular application.
Previously we have defined ng-app directive inside the div tag
so if we need to define a new application then we need to define ng-app in the next div tag also.
to avoid that we have added the ng-app directive to the html root element.
by doing, we have defined the whole app as a angular application.
second div tag contains the repeated elements.
here we have defined an array of elements. to do that we have used another angular directive,
data-ng-init , this directive initializes the names array in to the application.
Now we have initialized the elements of array.
let's repeat the elements and show that inside the HTML view.
to that we have used data-ng-repeat directive, this helps us to define and loop or iterate over the elements. we are now iterating over the elements in the names array.
we have defined the repeat element with "personName in names"
Here "personName" is the temp[orary holder while "names" is the array of elements we are using to repeat. This is much similar to foreach loop we are using in javascipt or Java.
Then we bind the application data inside the iteration, or the repeat element with data binding expression {{personName}}
Note : we have used the temporary value holder to bind data to the HTML view from the angular application.
This will have output as below, above the "Looping with the ng-repeat Directive" will have the text box of previous application. you can see the output by saving the code into notepad and save as html file and running ina browser.
output
===========================================================
Looping with the ng-repeat Directive
- Shaun
- Dilan
- Mike
- Paul
So we have learnt few directives.
go to https://docs.angularjs.org/api
you will have all the directive list with their documentation.
Now let's look at filters
To discuss filters we define new set of data elements as Customers and do the filtering for properties of customer.
we can use the ng-init to initialize the customers data.
First we initialize data and print that.
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>
<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="customer in customers">{{customer.name}}- {{customer.city}}</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
This will print the name and city pairs of customers.
Now let's add the filter.
We have the name text filed , which we had added in the first application. this is third application.
let's use name as a filter.
----------------------------------------------------------------------------------------------------
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
{{customer.name}}- {{customer.city}}
Looping with the ng-repeat Directive
----------------------------------------------------------------------------------------------------
it's very simple.
Just add the pipe character and filter word as shown in highlighted text above.
After the filter, give the property you are using to filter. Here we have used "name", that is data reference used to bind html text box data to application.
you can see the dynamically list will change in the HTML view.
very smooth and simple.
we can give order by filter also.
let's put order by to city
----------------------------------------------------------------------------------------------------
<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="customer in customers | filter:name | orderBy : 'city'">{{customer.name}}- {{customer.city}}</li>
</ul>
</div>
----------------------------------------------------------------------------------------------------
Note : we have given order by field property value inside single quotes.
This will arrange data order by city name.
we can use more filters.
let's add uppercase to names and lowercase to city values.
the whole code will be as follows
----------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html data-ng-app="">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div>
<p>
Name: <input type="text" data-ng-model="name">
</p>
{{name}}
</div>
<div data-ng-init="names=['Shaun','Dilan', 'Mike', 'Paul']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="personName in names">{{personName}}</li>
</ul>
</div>
<div
data-ng-init="customers=[{name:'Shaun',city:'Phoenix'},{name:'Dilan',city:'Chicago'},{name:'Mike',city:'NewYork'}]">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li
data-ng-repeat="customer in customers | filter:name | orderBy:'city'">{{customer.name
| uppercase}}- {{customer.city | lowercase}}</li>
</ul>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
you can define your own custom filters. to look at all the filters provided by the angular go to
https://docs.angularjs.org/api and goto filters section.
https://docs.angularjs.org/api/ng/filter
you will see the list of filters provided by the angular.
No comments:
Post a Comment