1.MVC起源 代码分离。
angular跟jquery一样就是一个工具，一个库而已，谷歌开发的。
直接上官网，学库上官网无非就两件事：
1.下载 官网https://angularjs.org/
关于版本：
1.2.x 之前 老了，不用了
1.3.x 相对好用
推荐1.3.10
2.x.x
根本就特么是两个东西
2.看APIhttps://code.angularjs.org/1.3.10/docs/api
原理一讲放倒一片，所以直接讲使用会用了以后再说原理
思想：一切以数据为核心。
文档的用法我不想说写几个小例子吧。
第一部分小例子
angular特色：
1.双向绑定 一个框里面数据变，另外一个也变过程 view ->model->view
<!DOCTYPE html><html ng-app><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script></script></head><body> <input type="text" ng-model = "a"> <input type="text" ng-model = "a"></body></html>
2.依赖注入
函数传参，参数名字定死，与顺序无关
<!DOCTYPE html><html ng-app="mk"><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script> var mk = angular.module('mk',[]); mk.controller('show',function($scope){//可以有多个参数，顺序也不用管但是必须叫$scope $scope.a = 12; });</script></head><body> <div ng-controller = "show"> {{a}} </div></body></html>
3.再来一个例子配合事件用（双向绑定），包含控制器定义
<!DOCTYPE html><html ng-app="mk"><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script> var mk = angular.module('mk',[]); mk.controller('show',function($scope){ $scope.a = 12; });</script></head><body> <div ng-controller = "show"> <input type="button" value="aaa" ng-click="a=666"> {{a}} </div></body></html>
angular脏数据检查，注意下面的代码视图数据并不会跟控制器一起更新
<!DOCTYPE html><html ng-app="mk"><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script> var mk = angular.module('mk',[]); mk.controller('show',function($scope){ $scope.a = 10; setTimeout(function(){ $scope.a = 999999; },1000); });</script></head><body> <div ng-controller = "show"> {{a}} </div></body></html>
解决：核心部分一替换完事儿
var mk = angular.module('mk',[]); mk.controller('show',function($scope,$timeout){ $scope.a = 10; $timeout(function(){ $scope.a = 999999; },1000); });
总结上面几个例子穿插了控制器和服务的定义。
不多说
简要说下服务：
$scope
$timeout都是服务
留言板
<!DOCTYPE html><html ng-app="mk"><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script> var mk = angular.module('mk',[]); mk.controller('addMsg',function($scope,$timeout){ $scope.data = []; $scope.add = function(){ $scope.data.push({ name:$scope.usr }); $scope.usr = ''; }; $scope.remove = function(index){ $scope.data.splice(index,1); }; });</script></head><body> <div ng-controller = "addMsg"> <input type="text" ng-model = "usr"> <input type="button" value="添加新任务" ng-click="add()">
<span ng-show="data.length==0">还没有添加任务</span> <ul> <li ng-repeat="item in data">{{item.name}} <a ng-click="remove($index)" href="javascript:;">删除</a></li> </ul> </div></body></html>
angular主要解决ajax等频繁数据交互和操作DOM的情况，这种情况在购物车下尤为常见，直接上例子：
<!DOCTYPE html><html ng-app="mk"><head><meta charset="utf-8"><style></style><script src="angular.js"></script><script> var app = angular.module('mk',[]); app.controller('shoppingcar',function($scope){ $scope.data = [ {"name":"茄子","count":3,"price":6.87}, {"name":"黄瓜","count":9,"price":2.41}, {"name":"香蕉","count":5,"price":6.63}, {"name":"金针菇","count":7,"price":6.39}, ]; $scope.sum = function(){ //alert(1); var result = 0; angular.forEach($scope.data,function(item,name){ result+=item.countitem.price; }); return result; }; });</script></head><body ng-controller = "shoppingcar"> <dl ng-repeat ="item in data"> <dd>名称：{{item.name}}</dd> <dd>数量：<input type="number" ng-model="item.count"></dd> <dd>价格:{{item.price}}</dd> <dd>小计:{{item.countitem.price}}</dd> </dl> <div>总计:{{sum()|currency:'￥'}}</div></body></html>
上面说了循环和过滤器，下一篇看文章说下自定义指令和ajax，最后写两个例子
一个是angularajax请求数据，一个是angular路由的移动端单页程序。angular就入门了，angular本来就是很简单的东西，
当成玩具会用就好了。
网友评论