angular 初学总结

Author Avatar
Max Zhang 1月 05, 2017

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的属性给它，这样就可以在模板中使用这份拷贝的元素了

Powered by Hexo
Theme - Material