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