AngularJS Introduction
AngularJS is a JavaScript framework. It can be added to HTML pages via the <script> tag.
AngularJS extends HTML through directives and binds data to HTML through expressions.
What is AngularJS?
AngularJS makes it easier to develop modern single page applications (SPAs: Single Page Applications).
AngularJS binds application data to HTML elements.
AngularJS can clone and repeat HTML elements.
AngularJS can hide and display HTML elements.
AngularJS can add code "behind" the HTML element.
AngularJS supports input verification.
Typically, JSON is used as a model for storing data in AngularJS. We might write a model in the controller like this:
('BookController',['$scope',function($scope){
$ = {
id:1,
name:'',
author:'',
stores:[
{id:1, name:'', quantity:2},
{id:2, name:'', quantity:2},
...
]
};
}])
This model may be used in the view:
<div ng-controller="BookController"> <span ng-bind=""></span> <input type="text" ng-model=""/> <input type="text" ng-model=""/> </div>
When we need to get data from the server, we may write this:
('BookController',['$scope', '$http', function($scope, $http){
var bookId = 1;
$('api/books'+bookId).success(function(bookData){
$ = bookData;
})
$ = function(){
$('api/books/' + bookId);
}
$ = function(){
$('api/books/'+bookId, $);
}
$ = function(width, height){
return 'our/iamge/service' +bookId + '/width/height';
}
$ = function(){
if(!$ || $ === 0){
return false;
}
reutrn $(function(store){
return > 0;
})
}
}])
It is possible to use this in the view:
<div ng-controller="BookController">
<div ng-style="{backgroundImage: 'url('+getBookImageUrl(100,100)+')'}"></div>
<span ng-bind=""></span?
<input type="text" ng-model=""/>
<input type="text" ng-model=""/>
is available: <span ng-bind="isAvailable() ? 'Yes' : 'No'"></span>
<button ng-click="deleteBook()">Delete</button>
<button ng-click="updateBook">Update</button>
</div>
Above, JSON format models can only be used in BookController. How can they be used in other controllers?
--Through factory
('Book', ['$http', function($http){
function Book(bookData){
if(bookData){
(bookData);
}
}
= {
setData: function(bookData){
(this, bookData);
},
load: function(id){
var scope = this;
$('api/books/' + bookId).success(function(bookData){
(bookData);
})
},
delete: function(bookId){
$('api/books/' + bookId);
},
update: function(bookId){
$('api/books/' + bookId, this);
},
getImageUrl: function(width, height){
return 'our/image/service/' + + '/' + width + '/' + height;
},
isAvailable: funciton(){
if(! || === 0) {
return false;
}
return (function(store){
return > 0;
})
}
}
return Book;
}])
Above, a Data Model similar to Book was created through factory, which can now be injected into the controller.
('BookController', ['$scope', 'Book', function($scope, Book){
$ = new Book();
$(1);
}])
There will also be corresponding changes in the view.
<div ng-controller="BookController">
<div ng-style="{backgroundImage: 'url(' + (100, 100) + ')'}"></div>
<span ng-bind=""></span>
<input type="text" ng-model=""/>
<input type="text" ng-model=""/>
is abailble: <span ng-bind="() ? 'Yes' : 'No'"></span>
<button ng-click="()">Delete</button>
<button ng-click="()">Update</button>
</div>
Above, multiple controllers can use the same Data Model for the book. What if multiple controllers handle the same Data Model for the book?
('booksManager', ['$http', '$q', 'Book', function($http. $q, Book){
var booksManager = {
_pool: {},
_retrieveInstance: function(bookId, bookData){
var instance = this._pool[bookId];
if(instance){
(bookData);
} else {
instance = new Book(bookData);
this._pool[bookId] = instance;
}
return instance;
},
_seach: function(bookId){
reutrn this_.pool[bookId];
},
_load: function(bookId, deferred){
var scope = this;
$('api/books/' + bookId)
.success(funciton(bookData){
var book = scope._retrieveInstance(, bookData);
(book);
})
.error(function(){
();
})
},
getBook: function(bookId){
var deferred = $();
var book = this._search(bookId);
if(book){
(book);
} else {
this._load(bookId, deferred);
}
return ;
},
loadAllBooks: function(){
var deferred = $();
var scope = this;
$('api/books')
.success(function(booksArray){
var books = [];
(function(bookData){
var book = scope.l_retrieveInstance(, bookData);
(book);
});
(books);
})
.error(function(){
();
});
return ;
}，
setBook: function(bookData){
var scope = this;
var book = this._search();
if(book){
(bookData);
} else {
book = scope._retrieveInstance(bookData);
}
return book;
}
};
return booksManager;
}])
The Book service removes the load method.
('Book', ['$http', function($http) {
function Book(bookData) {
if (bookData) {
(bookData):
}
// Some other initializations related to book
};
= {
setData: function(bookData) {
(this, bookData);
},
delete: function() {
$('ourserver/books/' + bookId);
},
update: function() {
$('ourserver/books/' + bookId, this);
},
getImageUrl: function(width, height) {
return 'our/image/service/' + + '/width/height';
},
isAvailable: function() {
if (! || === 0) {
return false;
}
return (function(store) {
return > 0;
});
}
};
return Book;
}]);
Now multiple controllers can use the same booksManager service.
('EditableBookController',['$scope', 'booksManager', function($scope, booksManager){
(1).then(function(book){
$ = book;
})
}])
.controller('BooksListController',['$scope', 'booksManager', function($scope, booksManager){
().then(function(books){
$ = books;
})
}])