技术博客

AngularJS入门笔记《下》

12AngularJS HTML DOM

ng-disabled指令

1
2
3
4
5
<div ng-app ng-init="mySwitch=true">
    <button ng-disabled="mySwitch">点我！</button>
</div>
<input type="checkbox" ng-model="mySwitch">按钮！
<p>{{mySwitch}}</p>

ng-disabled指令绑定应用程序数据“mySwitch”到HTML的disabled属性
ng-model指令绑定“mySwitch”到HTML input checkbox元素的内容（value）
如果checkbox选中，mySwitch的值为true，则disabled的值也为true。

ng-show指令

1
2
3
4
5
6
<div ng-app ng-init="hour=13">
    <p ng-show="true">我是可见的</p>
    <p ng-show="false">我是不可见的</p>
        <!-- ↓↓可以使用表达式来计算布尔值 -->
    <p ng-show="hour > 12">我是可见的</p>
</div>

ng-hide指令

1
2
3
4
<div ng-app>
    <p ng-hide="true">我是不可见的</p>
    <p ng-hide="false">我是可见的</p>
</div>

13AngularJS事件

ng-click事件

1
2
3
4
5
6
7
8
9
10
<div ng-app="myApp" ng-controller="myCtrl">
    <botton ng-click="count = count + 1">点我</button>
    <p>{{count}}</p>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function($scope){
        $scope.count = 0;
    });
</script>

显示、隐藏切换 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div ng-app="myApp" ng-controller="personCtrl">
    <button ng-click="toggle()">隐藏/显示</button>
    <p ng-hide="myVar">
        名：<input type="text" ng-model="firstName"><br>
        姓：<input type="text" ng-model="lastaName"><br>
        Full Name:{{firstName + " " + lastName}}
    </p>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('personCtrl', function($scope){
        $scope.firstName = "John";
        $scope.lastName = "Doe";
        $scope.myVar = false;
        $scope.toggle = function(){
            $scope.myVar = !$scope.myVar;
        };
    });
</script>

14AngularJS模块

模块定义了一个应用程序
模块是应用程序中不同部分的容器
模块是应用控制器的容器
控制器通常属于一个模块
AngularJS模块让所有函数的作用域在该模块下，避免了使用全局函数

创建模块

1
2
3
4
5
<div ng-app="myApp">···</div>
<script>
    // 通过AngularJS的angular.module函数来创建模块
    var app = angular.module("myApp", []);
</script>

添加控制器

1
2
3
4
5
6
7
8
9
10
11
<!-- 使用ng-controller指令来添加应用的控制器 -->
<div ng-app="myApp" ng-controller="myCtrl">
{{firstName + " " + lastName}}
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl',function($scope){
        $scope.firstName = 'John';
        $scope.lastName = 'Doe';
    });
</script>

添加指令

1
2
3
4
5
6
7
<div ng-app="myApp" runoob-directive></div>
<script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective",function(){
        return{ template:"我再指令构造器中创建!"};
    });
</script>

模块和控制器包含在JS文件中

1
2
3
4
5
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>

myApp.js

1
var app = angular.module("myApp", []);

在模块定义中，中括号[]内参数用于定义模块的依赖关系，

myCtrl.js

1
2
3
4
app.controller("myCtrl", function($scope) {
    $scope.firstName    = "John";
    $scope.lastName= "Doe";
});

15AngularJS表单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div ng-app="myApp" ng-controller="formCtrl">
    <form novalidate>
        First Name:<br>
        <input type="text" ng-model="user.firstName"/><br>
        Last Name:<br>
        <input type="text" ng-model="user.lastName"/><br>
        <button ng-click="reset()">Reset</button>
    </form>
    <p>form = {{user}}</p>
    <p>master = {{master}}</p>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('formCtrl', function($scope){
        $scope.master = {firstName: "John", lastName: "Doe"};
        $scope.reset = function(){
            $scope.user = angular.copy($scope.master);
        };
        $scope.reset();
    });
</script>

ng-app指令定义了AngularJS应用
ng-controller指令定义了应用控制器
ng-model指令绑定了两个input元素到模型的user对象
formCtrl函数设置了master对象的初始值，并定义了reset()方法。
reset()方法设置了user对象等于master对象
ng-click指令调用了reset()方法，且在点击按钮是调用。

16AngularJS验证

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<form ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate>
  <p>用户名：<br />
    <input type="text" name="user" ng-model="user" required>
    <!-- 用户修改过user表单&&内容是非法的 ==>> 显示错误信息-->
    <span style="color:red;" ng-show="myForm.user.$dirty && myForm.user.$invalid">
      <span ng-show="myForm.user.$error.required">用户名是必须的。</span>
    </span>
  </p>
  <p>邮箱：<br />
    <input type="email" name="email" ng-model="email" required>
    <span style="color:red;" ng-show="myForm.email.$dirty && myForm.email.$invalid">
      <span ng-show="myForm.email.$error.required">用户名是必须的。</span>
      <span ng-show="myForm.email.$error.email">非法的邮箱。</span>
    </span>
  </p>
  <p>
    <!-- 用户修改过user表单&&字段非法 || 用户修改过email表单&&字段非法 ==>> 此时按钮都是disabled状态 -->
    <input type="submit"  ng-disabled="myForm.user.$dirty && myForm.user.$invalid || myForm.email.$dirty && myForm.email.$invalid">
  </p>
</form>
<script>
  var app = angular.module('myApp', []);
  app.controller('validateCtrl', function($scope){
    $scope.user = 'John Doe';
    $scope.email = 'join.doe@gmail.com';
  })
</script>

AngularJS ng-model指令用于绑定输入元素到模型中
模型对象有两个属性：user和email

属性 描述
$dirty 表单有填写记录
$valid 字段内容合法的
$invalid 字段内容是非法的
$pristine 表单没有填写记录

17 AngularJS API

API：Application Programming Interface（应用程序接口）
AngularJS全局API用于执行常见任务的JS函数集合

API 描述
angular.lowercase() 转换字符串为小写
angular.isString() 判断给定的对象是否为字符串，返回布尔值

18 AngularJS Bootstrap

略

19 AngularJS 包含

服务器端包含

大多服务器端脚本都支持包含文件功能（SSI：Server Side Includes）
使用SSI，可在HTML中包含HTML文件，并发送到客户端浏览器

1
<?php require("navigation.php"); ?>

客户端包含

通过JS有很多种方式可以在HTML中包含HTML文件
通常我们使用http请求（Ajax）从服务器端获取数据，返回的数据我们可以通过使用innerHTML写入到HTML元素中。

AngularJS包含

1
2
3
4
<div class="container>
    <div ng-include="myUsers_List.html"></div>
    <div ng-include="myUsers_Form.html"></div>
</div>

20 AngularJS动画

AngularJS提供了动画效果，可以配合CSS使用
AngularJS使用动画需要引入angular-animate.min.js库
还需要在应用中使用模型ngAnimate

1
<body ng-app="ng-Animate">

如果应用已经设置了应用名，可以把ngAnimate直接添加在模型中

1
2
3
4
5
6
7
<body ng-app="myApp">
    <h1>隐藏DIV：<input type="checkbox" ng-model="myCheck"/></h1>
    <div ng-hide="myCheck"></div>
    <script>
        var app = angular.module('myApp',['ngAnimate']); 
    </script>
</body>

ngAnimate做了什么

ngAnimate模型可以添加或移除class
ngAnimate模型不能使HTML元素产生动画，但是ngAnimate会检测事件，类似隐藏显示HTML元素，如果事件发生，ngAnimate就会使用预定义的class来设置HTML元素的动画。

  • AngularJS添加/移除class的指令
    • ng-show
    • ng-hide
    • ng-class
    • ng-view
    • ng-include
    • ng-repeat
    • ng-if
    • ng-switch

ng-show和ng-hide指令用于添加或移除ng-hide class的值
其他指令会在进入DOM时会添加ng-enter类，移除DOM会添加nb-leave属性
当HTML元素位置改变时，ng-repeat指令同样可以添加ng-move类
此外，在动画完成后，HTML元素的类集合将被移除。

  • ng-hide指令会添加以下类
    • ng-animate
    • ng-hide-animate
    • ng-hide-add
    • ng-hide-remove
    • ng-hide-add-active
    • ng-hide-remove-active

20 AngularJS 应用

实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html  ng-app="myNoteApp">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-controller="myNoteCtrl">
        <h2>我的笔记</h2>
        <p>
            <textarea ng-model="message" cols="40" rows="10"></textarea>
        </p>
        <p>
            <button ng-click="save()">保存</button>
            <button ng-click="clear()">清除</button>
        </p>
        <p>
            Number of characters left: <span ng-bind="left()"></span>
        </p>
    </div>

    <script src="myNoteApp.js"></script>
    <script src="myNoteCtrl.js"></script>
    <script>
    var app = angular.module('myNoteApp', []);
    app.controller('myNoteCtrl',function($scope){
        $scope.message = "";
        $scope.left = function(){return 100 - $scope.message.length;};
        $scope.clear = function(){$scope.message = "";};
        $scope.save = function(){alert("Note Saved"); };
    });
    </script>
</body>
</html>
  • <html>元素是AngularJS应用:ng-app=”myNoteApp”的容器
  • <div>是HTML页面中控制器：ng-controller=”myNoteCtrl”的作用域
  • ng-model指令绑定了<textarea>到控制器变量message
  • 两个ng-click事件调用了控制器函数clear()和save()
  • ng-bind指令绑定控制器函数left()到<span>，用于显示剩余字符

AngularJS应用架构

以上实例是一个完整的AngularJS单页Web应用
<html>元素包含了AngularJS应用
<div>元素定义了AngularJS控制器的作用域
在一个应用中可以有很多控制器
应用文件(myNoteApp.js)定义了应用模型代码
一个或多个控制器文件(myNoteCtrl.js)定义了控制器代码