Editor’s note: We found an interesting series of articlesLearn 30 New Technologies in 30 Days, ready for translation, one update a day, year-end gift package. The following is a translation of the second day technique.

Last night, I finished my tech-a-day mission (which worked well) and talked a little bit about Bower, which you can check out here and check out the discussion on Reddit.

Today I’m going to learn the basics of AngularJS and hopefully make a simple little application out of it. I will also use Bower in this article, and it is impossible for me to learn AngularJS in one day, so I plan to do it over several days, covering different points each day.

What is AngularJS?

  1. Extending HTML adds dynamic features so we can easily build modern Web applications

  2. Use it the way you want

  3. Takes you back to HTML

  4. The declarative approach

  5. simple

  6. Eliminate DOM manipulation with two-way data binding so that the view is updated whenever the model changes and vice versa

  7. You can use it to build single-page Web applications. There are many challenges when building SPA applications such as routing, Ajax calls, data binding, caching, history, and DOM manipulation.

The main components of AngularJS are:

  1. Controller: The code behind the view

  2. Scope: Contains model data, cementing controllers and views

  3. Modules: To define new services, or to use existing services, directives, filters, and so on, a module can depend on another module

  4. Directives: Allows you to extend HTML and learn new tricks by defining your own project-specific HTML directives

Why do I care about AngularJS?

For me, there are two main reasons:

  1. It is supported by Google and has a large community of developers

  2. Full stack framework: This means that I don’t have to rely on millions of other scripts, they all fit together nicely

The premise to prepare

We will use Bower to install AngularJS for our sample application. If you haven’t already installed Bower, check out my previous blog post.

Install AngularJS

To install AngularJS and Twitter bootstrap, create a directory called bookshop in any convenient location on your system.

$ bower install angular
$ bower install bootstrap

The above command creates a folder called bower_components in the bookshop directory with all the installed components.

Start using AngularJS

Now create an HTML file called index.html. It will be an AngularJS-based online bookstore application.

<! 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 file in your browser, you’ll see “Your Online Bookstore” being displayed, but that’s not what makes AngularJS great, so let’s take a look at what’s really interesting about it:

<! 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>

There are a few things to note about this code:

  1. Inside the HTML tag, we’ve defined ng-app. This initializes the AngularJS application and tells AngularJS to be active in this section. Therefore, it is active for the entire HTML file in the application.

  2. The second Angular directive we use is ng-init. This will initialize one of the books array that we can apply to our application.

  3. The last interesting part is the ng-repeat directive for traversing through all the elements in the collection. Angular adds a li element to each element. So, if we open it in a Web browser, we’ll see four books in a list.

We use the data above as an array of strings, but we can also store objects as follows:

<! 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>

In the above code, we create an array of books objects, where each book object has a name and an author. Finally, we list both the author’s name and the book’s title in the list.

Use a filter

Angular provides filters that help format data. You can use filters to format dates, currencies, upper and lower case characters, order, and search-based filtering. Here is an example of how to use filters to capitalize author names and sort by title:

<! 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, we use sequenced filters in the ng-repeat directive and an uppercase filter when displaying the author name.

To add a search filter, add the text box for the search input, and then use a filter to search to limit the results, as follows:

<! 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>

Use the controller

Controllers are one of the main components of AngularJS. They are the code that powers and data the view. In our example, we can move the test data initialization code to a controller and create a JavaScript file called app.js that will hold all the specific JavaScript code for our application.

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'}
        ]
}

$scope is the glue between the controller and the view, and will be injected into BookCtrl. Now we add the objects of the books array to the $scope object, which is visible to the view.

Now change index.html using BookCtrl as follows:

<! 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>

That’s all for today, and that’s just the tip of the iceberg. I will spend many days learning the features of AngularJS, which is really an amazing and powerful library.


Day 2: AngularJS–Getting My Head Around AngularJS SegmentFault Translation