angular 初学总结
AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了。所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事。
通常,我们是通过以下技术来解决静态网页技术在构建动态应用上的不足:
类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等
框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。框架有:knockout、sproutcore等。
Angular js 下载地址angular AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷。AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识别新的语法。例如:
使用MVC模式开发;用ng-controller来指定每个控制器负责监视视图中的哪一部分。
使用双大括号"{{}}"语法进行数据绑定;
依赖注入;
首先 当然是引入Angularjs
<script src="xx/angular.js"></script>
然后,在你要被Angular 控制的部分上加上NG-APP 值,可以为空,最好命名一下。
<div ng-app="app">
需要在脚本里面“激活”
<script type="text/javasricpt">
angular.module('app',[])
.controller('hello',function($scope){
$scope.text='hello'
})
</script >
module(),第一参数是想要被控制的模块,这里是app这个名字的模块,第二参数是后续想要和angular一起加载的类库,可以[“”,“”,“”]这种形式添加进入
然后是
<div ng-controller="hello">
<input ng-model="text" class="form-control" />
<h1 ng-bind="text+',world'">,world</h1>
<h1 ng-cloak class="ng-cloak">{{text}}</h1>
<div class="{{text}}">{{text}}</div>
</div>
在DIV里面加入ng-controller 控制他,在脚本里调用.controller 设置方法控制。用$scope绑定数据和视图层的数据绑定
在对input里面绑定想要改变的数据,运用ng-model=“”你设置的变量,这里是“text”
用{{}}进行关联,里面放text.
可能有人觉得{{}}放在DOM结构里很丑,我们还可以用ng-bind 或者ng-cloak 来设置,效果是一样的。
在复杂一点
<body ng-app='app'>
<div ng-controller="hello">
<input ng-model="text" class="form-control" />
<h1 ng-bind="text+',world'">,world</h1>
<h1 ng-cloak class="ng-cloak">{{text}}</h1>
<div class="{{text}}">{{text}}</div>
</div>
<div ng-controller="shopping">
<div ng-repeat="item in item">
<span>{{item.title}}</span>
<input type="" name="" id="" value=""ng-model="item.quantity" />
<span>{{item.price|currency}}</span>
<span>{{item.price*item.quantity|currency}}</span>
<button ng-click="remove($index)">Remove</button>
</div>
js代码
angular.module('app',[])
.controller('hello',function($scope){
$scope.text='hello'
})
.controller('shopping',function($scope){
$scope.item=[
{title:'A',quantity:8,price:3.95},
{title:'B',quantity:12,price:55},
{title:'C',quantity:28,price:95}
]
$scope.remove = function(index){
$scope.item.splice(index,1)
}
})
这里实现了按照input里面填的数量,计算后面的总价格,点击旁边的REMOVE 移除当前这一行
利用了.js里面设定的数组,在HTML里面 ng-repeat 遍历数组里面的对象值
ng-repeat的意思是对于item数组中的每个元素,都把
中的DOM结构复制一份(包括DIV本身),对与DIV的每一分拷贝,都会把一个ITEM的属性给它,这样就可以在模板中使用这份拷贝的元素了