AnjularJS学习笔记

发表于 | 分类于

以前也接触过Angularjs，也用过一些，如今又回来重新看看，想理解的更深刻一些，写的可能不是很详细，但却是都是我学习的历程。

1. 安装

安装方式可以自己选择，可以去网上下载，下载地址：
http://angularjs.org；

也可以直接引用：

1
<script src="http://code.angularjs.org/angular-1.0.1.min.js"></script>

我是用的bower：

bower install angularjs -save

1
<script src='bower_components/angular/angular.js'></script>

2. HelloWold

1
2
3
<body ng-app>
    hello {{'world!'}}
</body>

这样浏览器中就会打印出hello world！啦！

3. ng-app

ng-app指令标记了AngularJS脚本的作用域，在<html>中添加ng-app属性即说明整个<html>都是AngularJS脚本作用域。也可以在局部使用ng-app指令，像上面的例子<body ng-app>，则AngularJS脚本仅在该<body>中运行。
注：全局仅可以有一个ng-app

4. ng-controller

什么是controller，这就涉及到模型-视图-控制器（MVC）模式了
ng-controller命令就是绑定controller的命令,而他的作用域也只是在绑定的标签之下
看下面一段代码：

1
2
3
4
5
6
7
8
9
<body ng-app='myApp'>
  hello {{'world!'}}
  <div ng-controller='myCtrl'>
    <div> {{myinfo.name}} </div>
  </div>
  <div ng-controller='youCtrl'>
    <div> {{youinfo.name}} </div>
  </div>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope',
  function($scope) {
      var people = new Object();
      people.name='lxc';
      people.age=22;
      $scope.myinfo=people;
  }
]);
app.controller('youCtrl', ['$scope',
  function($scope) {
    var people = new Object();
    people.name = 'you';
    people.age = 2;
    $scope.youinfo = people;
  }
]);

我在js中首先定义了一个myApp，在myApp下又定义了两个controller，myCtrl和youCtrl，在控制器中分别初始化两个people;
在html中我分别将两个控制器绑定div,在其中打印出name
这时看看正确结果：

hello world!
lxc
you

下面我们来试验一下一个controller中的值可不可以在绑定的表情外部访问或者在其他controller中访问：
js不动，更改html代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
<body ng-app='myApp'>
  hello {{'world!'}}
  <div ng-controller='myCtrl'>
    <div> {{myinfo.name}} </div>
    <div>test: {{youinfo.name}} </div>
  </div>
  <div ng-controller='youCtrl'>
    <div> {{youinfo.name}} </div>
    <div>test: {{myinfo.name}} </div>
  </div>
  <div>test: {{youinfo.name}} </div>
  <div>test: {{youinfo.name}} </div>
</body>

结果如下：

hello world!
lxc
test:
you
test:
test:
test:

我们发现一个controller中的元素只能在自己的作用域中访问，那我们要想访问另一个controller中的元素怎么办呢？
答案是：

  • 利用作用域继承的原理，子控制器访问父级控制器中的内容。
  • 使用angularJS中的事件，也就是使用$on,$emit,$broadcast进行消息传递
  • 使用angularJS中的服务

5. 一些指令

（1）ng-repeat

这是一个循环指令
下面看个例子：

1
2
3
4
5
var list=['lxc1','lxc2','lxc3'];
$scope.list=list;
$scope.changelist=function(){
  list.push('lxc4');
}

1
2
3
4
5
  
<li ng-repeat='i in list'>
  {{i}}
</li>
<button  ng-click='changelist()'>changelist()</button>

界面显示如下

lxc1
lxc2
lxc3

这时我们点击changelist（）看看发生了什么：

lxc1
lxc2
lxc3
lxc4

我们发现数组的更改直接反应在了html上，这就是angular的优点，以前的话还要用jQuery再在html中加一个标签，现在这些事情angular都为我们做了，是不是很方便^-^

（2） ng-click

这个已经在上面的例子总用到了，可以为标签的点击事件绑定对应作用域中的一个方法，也是很方便

（3） ng-model

ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

1
2
3
4
<input ng-model='name' />   
<input value="{{name}}" />
<input ng-model='name' />
<div ng-bind="name"> </div>

运行之后我们发现在第一个input中输入值可以下面三个标签上显示，改变第三个其他三个也会跟着改变，但是改变第二个就只会他自己改变，这也很好解释，因为第二个input只是用来显示name的值，并没有进行双向绑定

下面我们看看在html中通过ng-model定义的name在js中可不可以访问

1
2
3
4
5
<input ng-model='name' />
<input value="{{name}}" />
<input ng-model='name' />
<div ng-bind="name"> </div>
<button ng-click='showevent()'>alert()</button>

1
2
3
$scope.showevent=function(){
  alert($scope.name);
}

在input中输入一个值，点击按钮，发现浏览器正确的输出了name的值

（4） ng-options

1
2
3
<select ng-model='select' ng-change='selectchange()' ng-options='i.url as i.site for i in sites'>
      <option value="">请选择</option>
</select>
1
2
3
4
5
6
7
8
$scope.sites = [
      {site : "Google", url : "http://www.google.com"},
      {site : "Baidu", url : "http://www.baidu.com"},
      {site : "Taobao", url : "http://www.taobao.com"}
  ];
$scope.selectchange=function(){
    alert($scope.select);
  }

刷新界面发现select已经正确的显示出来了，我们去改变他，发现浏览器也能正确的输出改变后的值

在上面使用了ng-change，其实和正常的onchange事件类似，都是在值发生改变时触发

（5）ng-disabled

1
<button ng-disabled='1' ng-click='changeselect()' >changeselect</button>

这个很简单，当他的值为不等于0和false时，angular就会给button加上disabled="disabled"属性

当然其他指令还有很多，下次在介绍吧^-^