angularjs 简介
angularjs 是一个 javascript 框架。它可通过 <script> 标签添加到 html 页面。
angularjs 通过 指令 扩展了 html，且通过 表达式 绑定数据到 html。
什么是 angularjs？
angularjs 使得开发现代的单一页面应用程序（spas：single page applications）变得更加容易。
angularjs 把应用程序数据绑定到 html 元素。
angularjs 可以克隆和重复 html 元素。
angularjs 可以隐藏和显示 html 元素。
angularjs 可以在 html 元素"背后"添加代码。
angularjs 支持输入验证。
通常，在angularjs中使用json作为存储数据的模型。我们可能这样在controller中写model：
我要评论
app.controller('bookcontroller',['$scope',function($scope){
$scope.book = {
id:1,
name:'',
author:'',
stores:[
{id:1, name:'', quantity:2},
{id:2, name:'', quantity:2},
...
]
};
}])
在视图中也许这样用到这个model:
<div ng-controller="bookcontroller"> <span ng-bind="book.id"></span> <input type="text" ng-model="book.name"/> <input type="text" ng-model="book.author"/> </div>
当我们需要从服务端获取数据的时候，可能这样写：
app.controller('bookcontroller',['$scope', '$http', function($scope, $http){
var bookid = 1;
$http.get('api/books'+bookid).success(function(bookdata){
$scope.book = bookdata;
})
$scope.deletebook = function(){
$http.delete('api/books/' + bookid);
}
$scope.updatebook = function(){
$http.put('api/books/'+bookid, $scope.book);
}
$scope.getbookimageurl = function(width, height){
return 'our/iamge/service' +bookid + '/width/height';
}
$scope.isavailable = function(){
if(!$scope.book.stores || $scope.book.stores.length === 0){
return false;
}
reutrn $scope.book.stores.some(function(store){
return store.quantity > 0;
})
}
}])
在视图中可能这样使用：
<div ng-controller="bookcontroller">
<div ng-style="{backgroundimage: 'url('+getbookimageurl(100,100)+')'}"></div>
<span ng-bind="book.id"></span?
<input type="text" ng-model="book.name"/>
<input type="text" ng-model="book.author"/>
is available: <span ng-bind="isavailable() ? 'yes' : 'no'"></span>
<button ng-click="deletebook()">delete</button>
<button ng-click="updatebook">update</button>
</div>
以上，json格式的model只能在bookcontroller中使用，如何在其他controller中也可以使用呢？
--通过factory方式
app.factory('book', ['$http', function($http){
function book(bookdata){
if(bookdata){
this.setdata(bookdata);
}
}
book.prototype = {
setdata: function(bookdata){
angular.extend(this, bookdata);
},
load: function(id){
var scope = this;
$http.get('api/books/' + bookid).success(function(bookdata){
scope.setdata(bookdata);
})
},
delete: function(bookid){
$http.delete('api/books/' + bookid);
},
update: function(bookid){
$http.put('api/books/' + bookid, this);
},
getimageurl: function(width, height){
return 'our/image/service/' + this.book.id + '/' + width + '/' + height;
},
isavailable: funciton(){
if(!this.book.stores || this.book.stores.length === 0) {
return false;
}
return this.book.stores.some(function(store){
return store.quantity > 0;
})
}
}
return book;
}])
以上，通过factory的方式创建了类似book的一个data model，现在可以注入到controller中去了。
app.controller('bookcontroller', ['$scope', 'book', function($scope, book){
$scope.book = new book();
$scope.book.load(1);
}])
在视图中也会有相应的变化。
<div ng-controller="bookcontroller">
<div ng-style="{backgroundimage: 'url(' + book.getimageurl(100, 100) + ')'}"></div>
<span ng-bind="book.id"></span>
<input type="text" ng-model="book.name"/>
<input type="text" ng-model="book.author"/>
is abailble: <span ng-bind="book.isavailabe() ? 'yes' : 'no'"></span>
<button ng-click="book.delete()">delete</button>
<button ng-click="book.update()">update</button>
</div>
以上，多个controller可以使用同一个有关book的data model了，如果多个controller处理同一个有关book的data model呢？
app.factory('booksmanager', ['$http', '$q', 'book', function($http. $q, book){
var booksmanager = {
_pool: {},
_retrieveinstance: function(bookid, bookdata){
var instance = this._pool[bookid];
if(instance){
instance.setdata(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;
$http.get('api/books/' + bookid)
.success(funciton(bookdata){
var book = scope._retrieveinstance(bookdata.id, bookdata);
deferred.resolve(book);
})
.error(function(){
deferred.reject();
})
},
getbook: function(bookid){
var deferred = $q.defer();
var book = this._search(bookid);
if(book){
deferred.resove(book);
} else {
this._load(bookid, deferred);
}
return deferred.promise;
},
loadallbooks: function(){
var deferred = $q.defer();
var scope = this;
$http.get('api/books')
.success(function(booksarray){
var books = [];
booksarray.foreach(function(bookdata){
var book = scope.l_retrieveinstance(bookdata.id, bookdata);
books.push(book);
});
deferred.resolve(books);
})
.error(function(){
deferred.reject();
});
return deferred.promise;
}，
setbook: function(bookdata){
var scope = this;
var book = this._search(bookdata.id);
if(book){
book.setdata(bookdata);
} else {
book = scope._retrieveinstance(bookdata);
}
return book;
}
};
return booksmanager;
}])
book服务去掉load方法。
app.factory('book', ['$http', function($http) {
function book(bookdata) {
if (bookdata) {
this.setdata(bookdata):
}
// some other initializations related to book
};
book.prototype = {
setdata: function(bookdata) {
angular.extend(this, bookdata);
},
delete: function() {
$http.delete('ourserver/books/' + bookid);
},
update: function() {
$http.put('ourserver/books/' + bookid, this);
},
getimageurl: function(width, height) {
return 'our/image/service/' + this.book.id + '/width/height';
},
isavailable: function() {
if (!this.book.stores || this.book.stores.length === 0) {
return false;
}
return this.book.stores.some(function(store) {
return store.quantity > 0;
});
}
};
return book;
}]);
现在，多个controller可以使用同一个booksmanager服务。
app.controller('editablebookcontroller',['$scope', 'booksmanager', function($scope, booksmanager){
booksmanager.getbook(1).then(function(book){
$scope.book = book;
})
}])
.controller('bookslistcontroller',['$scope', 'booksmanager', function($scope, booksmanager){
booksmanager.loadallbooks().then(function(books){
$scope.books = books;
})
}])
如对本文有疑问， 点击进行留言回复！！
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论