Angularjs very gud and interesting article copied from
http://whyjava.wordpress.com/2013/10/30/day-2-angularjs-getting-my-head-around-angularjs/
http://whyjava.wordpress.com/2013/10/30/day-2-angularjs-getting-my-head-around-angularjs/
AngularJS : Getting My Head Around AngularJS
Yesterday I kicked off a challenge where in I will learn a new technology every day for a month. Yesterday I talked about Bower — package manager for client side assets. You can read the blog here. You can read the reddit discussion here.
Today I am going to learn basics of AngularJS and hopefully will be creating a very simple application using it. This blog is live feed of my AngularJS learning experience. I will be using bower as well in this blog. I know I can’t cover AngularJS in one day so I will be spending multiple days on it but will cover different topics within AngularJS.
What is AngularJS?
- Extending HTML to add dynamic nature so that we can build modern web applications with ease
- Use the way you want.
- Brings you back to HTML
- Declarative Approach
- Simplicity
- Eliminates DOM manipulation by two way data binding. When ever a model changes view gets updated and vice-versa
- You can use it to build Single Page Web applications. There are lot of challenges when you build SPA applications like Routing , Ajax calls , data binding , caching , history , dom manipulation. AngularJS provides all these functionalities are built into AngularJS.
Main components of AngularJS are
- Controller : Code behind the view.
- Scope : Contains model data. Glues controller and view.
- Module : To define new services or use existing services , directives , filters , and so on. Modules can depend on another modules.
- Directive : All you to extend HTML by defining your own project specific HTML directives. They teach HTML new tricks.
AngularJS from 30000 feet above
Why should I care?
For me there are two main reasons why I care about learning AngularJS.
- Backed by Google and big community of developers
- Full Stack framework : This means I don’t have to rely on million other scripts and hope they will work with each other happily.
Prerequisite
We will use Bower to install AngularJS for our sample application. So, if you don’t already have bower installed then follow my previous blog to learn about bower.
Installing AngularJS
Create a new directory called bookshop at any convenient location on your file system. Run the following command to install AngularJS and twitter bootstrap. We will use Twitter bootstrap to stylify our HTML.
1
2
| $ bower install angular$ bower install bootstrap |
This will create a folder called bower_components in bookshop directory where you will have all the installed components.
Let’s Use AngularJS
Now that we have installed AngularJS lets create a html file called index.html which will be our AngularJS based online bookshop application.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <!doctype html><html><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container"> <h2>Your Online Bookshop</h2> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script></body></html> |
If you open this in browser you will see “Your Online Bookshop” being rendered. This is not interesting so lets add some AngularJS magic.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!doctype html><html ng-app><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container" ng-init="books=['Effective Java','Year without Pants','Confessions of public speaker','JavaScript Good Parts']"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books"> {{book}} </li> </ul> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script></body></html> |
In the code shown there are few notable things :
- In our html tag we have defined ng-app. This initialize AngularJS app and tells AngularJS to be active in this portion. So , in our application it is active for the full html document.
- The second angular directive that we have used is ng-init. This initializes an array of books array which we can use in our application.
- The last interesting part is the ng-repeat directive which is used to iterate over all the elements in a collection. Angular would add li elements for each elements. So, if we open this in web browser we will see four books in a list.
The above was using data in the form of String array but you can store objects as well shown below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!doctype html><html ng-app><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books"> <span>{{book.name}} written by {{book.author}}</span> </li> </ul> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script></body></html> |
So in the code shown above we create an array of books object. Each book object has name and author. And finally we listed both author name and book name in the list.
Using Filters
Angular provides filters which helps format the data. You can use filter for formatting dates , currency , lowercase , uppercase , orderBy , and search based filtering. Below is an example how you can make use filters to uppercase Author name and orderby book name.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!doctype html><html ng-app><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"> <h2>Your Online Bookshop</h2> <ul class="unstyled"> <li ng-repeat="book in books | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script></body></html> |
As you can see above we used orderBy filter in ng-repeat directive and we used uppercase filter while displaying author name.
To add search filter add a text box for search input and then use filter filter to limit your results as shown below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!doctype html><html ng-app><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container" ng-init="books=[{'name': 'Effective Java', 'author':'Joshua Bloch'},{'name': 'Year without Pants', 'author':'Scott Berkun'},{ 'name':'Confessions of public speaker','author':'Scott Berkun'},{'name':'JavaScript Good Parts','author':'Douglas Crockford'}]"> <h2>Your Online Bookshop</h2> <input type="search" ng-model="criteria"> <ul class="unstyled"> <li ng-repeat="book in books | filter:criteria | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script></body></html> |
Using Controllers
Controllers are one of the main components of AngularJS. They are the code behind views. In our example so far we can move the array test data initialization code to a controller. We will create a new JavaScript file called app.js which will house all our application specific JavaScript code.Our app.js will look like as shown below.
1
2
3
4
5
6
7
8
| function BookCtrl($scope){ $scope.books = [ {'name': 'Effective Java', 'author':'Joshua Bloch'}, {'name': 'Year without Pants', 'author':'Scott Berkun'}, { 'name':'Confessions of public speaker','author':'Scott Berkun'}, {'name':'JavaScript Good Parts','author':'Douglas Crockford'} ]} |
The $scope is the glue between controller and view. It gets injected into BookCtrl. Now we add our books array to $scope object which will be visible to our view.
And we will change our index.html to use BookCtrl as shown below.
And we will change our index.html to use BookCtrl as shown below.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html><html ng-app><head> <title>Bookshop - Your Online Bookshop</title> <link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"></head><body> <div class="container" ng-controller="BookCtrl"> <h2>Your Online Bookshop</h2> <input type="search" ng-model="criteria"> <ul class="unstyled"> <li ng-repeat="book in books | filter:criteria | orderBy :'name'"> <span>{{book.name}} written by {{book.author | uppercase}}</span> </li> </ul> </div><script type="text/javascript" src="bower_components/angular/angular.min.js"></script><script type="text/javascript" src="app.js"></script></body></html> |
Thats it for today’s blog. I have only touched tip of iceberg. I will spending many days learning features of AngularJS. It is an amazing and powerful library.
No comments:
Post a Comment