AngularJS学习01 - 概述和指令_angularjs入门-CSDN博客

AngularJS学习01 - 概述和指令

一：AngularJS概述

AngularJS诞生于2009年，由Misko Hevery等人创建，后被Google所收购。

AngularJS是一款优秀的前端JavaScript框架，已经被用于Google的多款产品当中。

AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定和依赖注入等等。

AngularJS框架是为了克服HTML语言在构建App上天生的不足而设计的。

AngularJS框架的内容非常庞大，涉及到WEB应用架构的各个方面。

这里学习的1.x版本，目的主要是为了改变我们的思想，由传统的页面开发转变为模块化App应用开发。

官方下载：点击访问

源码地址：点击访问

1：AngularJS 和 Angular 2

常说的Angular 1是指AngularJS，从Angular 2开始已经改名了，不再带有JS，只是单纯的Angular。

Angular JS是一个典型的MVC架构（Model View Controller），而Angular 2是一个典型的基于组件架构（Component）

从这一点上来说，Angular 2 与 React.JS 结构相似。

目前官方已将Angular 2和之前的版本AngularJS分开维护，所以说AngularJS和Angular 2是两个完全不一样的框架

基本上来说Angular 2以后的版本大多相似，目前Angular的最新版本为Angular 10

AngularJS的最新版本为1.8.2

2：hello AngularJS

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<body>

<h1>{{msg}}</h1>

<!-- 下载Angular对应的1.8.2版本，然后放在项目的js目录下 -->
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.title = 'AngularJS';
        $scope.msg = 'Hello,World';
    }]);
</script>
</body>
</html>

二：AngularJS 方法

1：字符串大小写转换

angular.lowercase() & angular.uppercase()

var lowercase = angular.lowercase('Hello,World');
var uppercase = angular.uppercase('Hello,World');
console.log(lowercase); // hello,world
console.log(uppercase); // HELLO,WORLD

2：对象和数组的深拷贝

angular.copy(obj / arr)

// 创建一个对象
var obj = {
    name: 'zhangsan',
    age: 18,
    speak: function () {
        console.log(this.name);
    }
};

// 复制一个对象
var newObj = angular.copy(obj); // 深拷贝对象
console.log(obj); 
console.log(newObj);

// 判断是否相等
var flag = angular.equals(obj, newObj);
console.log(flag); // true

// 修改一个属性
obj.name = 'lisi';

// 再次判断相等
flag = angular.equals(obj, newObj); // false
console.log(flag);
console.log(obj);
console.log(newObj);

// 创建一个数组
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

// 复制一个数组
var newArr = angular.copy(arr); // 深拷贝数组
console.log(arr);
console.log(newArr);

// 判断是否相等
var flag = angular.equals(arr, newArr);
console.log(flag);  // true

// 修改一个数值
arr[0] = 100;

// 再次判断相等
flag = angular.equals(arr, newArr);
console.log(flag); // false
console.log(arr);
console.log(newArr);

3：对象和数组的迭代遍历

angular.forEach(obj / arr, function(data, index, obj / arr) {})

// 创建一个对象
var obj = {
    name: 'zhangsan',
    age: 18,
    speak: function () { console.log(this.name); }
};

// 对象迭代遍历
// function(数据，索引(从0开始), 整个对象)
angular.forEach(obj, function (data, index, object) {
    console.log(data, index, object);
});

// 创建一个数组
var arr = [10, 20, 30, 40, 50, 60, 70, 80, 90];

// 数组迭代遍历
// function(当前数据，索引(从0开始), 整个数组)
angular.forEach(arr, function (data, index, array) {
    console.log(data, index, array);
});

4：常见的数据类型判断

angular.isXXX()

var str = 'hello';
var num = 100;
var arr = [1, 2, 3];
var fun = function () {};
var date = new Date();
var obj = {};

console.log(angular.isString(str));//如果引用的是字符串返回 true
console.log(angular.isNumber(num));//如果引用的是数字返回 true
console.log(angular.isArray(arr));//如果引用的是数组返回 true
console.log(angular.isFunction(fun));//如果引用的是函数返回 true
console.log(angular.isDate(date));//如果引用的是日期返回 true
console.log(angular.isObject(obj));//如果引用的是对象返回 true
console.log(angular.isUndefined(obj));//如果引用的是未定义返回 true
console.log(angular.isDefined(obj));//如果引用的是已定义返回 true
console.log(angular.isElement(obj));//如果引用的是DOM元素返回 true

5：序列化和序列化

angular.fromJson() & angular.toJson()

var person = '{"name":"zhangsan","age":"18"}';
var fromJson = angular.fromJson(person);//将json字符串转化为js对象
console.log(fromJson);
var toJson = angular.toJson(fromJson);//将js对象转化为json字符串
console.log(toJson);

三：AngularJS 指令

1：应用类指令

ng-app -> 为框架指明一个边界，告知框架在哪个范围内生效

使用ng-app指令定义应用程序的根元素，习惯上写在html标签上，表示在当前页面中AngularJS都能正常使用。

ng-app指令可以接收一个值，如果这个值为""，那么就不需要在script脚本中对应用初始化

一般来说，我们会指定这个值，这个值代表了当前正在开发应用的名称

一旦指定了这个值，就需要使用代码对当前应用进行初始化，具体的做法，请参考：

<!DOCTYPE html>
<html ng-app="myapp"> <!-- 注意这里，指定了当前开发应用的名称，需要使用代码对应的初始化 -->
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    // angular.module的解释
    // 第一个参数 -> ‘myapp’，对应ng-app中的值，代表了当前正在开发应用的名称
    // 			    一般来说，这个应用名称在全局来看应该保持一致。
    // 第二个参数：[‘ngRoute’, ‘ngCookies’, ‘ngAnimate’]
    // 				由于AngularJS将功能进行了拆分，这一点从框架文件的引入就可以看出来
    // 				这就使得开发者可以按需加载自己所需要的模块
    // 				这三个模块从左到右依次为：路由、存储、动画
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

ng-init -> 主要是在应用启动的时候，为AngularJS中的变量进行初始化

ng-init还可以调用方法，以此来完成启动时，一些初始化功能的加载

ng-init指令并没有规定具体的摆放位置，但我们习惯上放在body标签上。

ng-init指令中的变量不必写var，直接书写变量的名称和所对应的值即可，多个变量之间应该用;分割开来

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title>{{title}}</title>
</head>
<!-- 初始化，title & msg -->
<!-- 不必写var，直接书写变量的名称和所对应的值即可 -->
<body ng-init="title='AngularJS';msg='Hello,World'">
<h1>{{msg}}</h1>
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

ng-bind -> 就是能够将AngularJS中的变量绑定到想要显示的标签之上

因为前面ng-init会有慢加载问题，就是用户在前端先会看到{{title}}，然后是变成AngularJS，体验较差

因此可以使用ng-bind将变量直接绑定到想要显示的标签之上。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title ng-bind="title"></title> <!-- 注意这里，直接通过ng-bind绑定title变量，这样就不会出现慢加载问题 -->
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">
<!-- 注意这里，直接通过ng-bind绑定msg变量，这样就不会出现慢加载问题 -->
<h1 ng-bind="msg"></h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

ng-cloak -> 防止使用{{ }}的时候出现代码闪烁的问题

适用于必须使用{{}}但是不想出现代码闪烁问题的情况

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <!-- 使用ng-cloak可以方式使用{{}}时候出现代码闪烁 -->
    <title ng-cloak>{{title}}</title>
</head>
<body ng-init="title='AngularJS';msg='Hello,World'">

<!-- 使用ng-cloak可以方式使用{{}}时候出现代码闪烁 -->
<h1 ng-cloak>{{msg}}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

ng-non-bindable -> 规定元素或子元素不能绑定数据，如<p ng-non-bindable></p>不使用 AngularJS

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 这里声明不会绑定数据，不会使用AngularJS，前端将会原封不动的展示{{ 5 + 5 }} -->
<h1 ng-non-bindable>{{ 5 + 5 }}</h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

2：数据绑定指令

ng-model -> 用来对input或textarea这类用于收集用户信息的标签进行数据绑定

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title ng-cloak>{{title}}</title>
</head>
<body ng-init="title='AngularJS'">

<input type="text" ng-model="message">
<p ng-bind="message"></p> <!-- 绑定了上面的ng-model中的变量，上面输入什么，这里显示什么 -->

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);

</script>
</body>
</html>

3：控制器指令

ng-controller -> 用来在页面中声明哪一个元素为控制器

使用了ng-controller指令就必须要在script标签中对控制器进行初始化，控制器主要是用来操作数据和视图

我们可以在控制器内部直接定义或修改变量，还可以定义方法等等

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title ng-bind="title"></title>
</head>
<body>

<h1 ng-bind="msg"></h1>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    // 第一个参数对应ng-controller，说明当前需要控制的是页面中的哪个控制器
    // 第二个参数中的服务列表支持我们注入一些常用的服务($scope、$rootScope，$location，$http，$timeout，$interval...)
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.title = 'AngularJS';
        $scope.msg = 'Hello,World';
    }]);
</script>
</body>
</html>

🎉 一个页面中，可以存在多个控制器，也就是说，我们可以把一个页面拆分为不同的模块，每一个模块都由一个专门的控制器来操作每个模块内的数据和视图，而且模块之间可以存在同名的变量，防止了变量名称冲突，这样的模块化开发是非常有利于我们团队合作开发的

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div ng-controller="div1Controller">
    <h1 ng-bind="msg"></h1>
</div>

<div ng-controller="div2Controller">
    <h1 ng-bind="msg"></h1>
</div>

<div ng-controller="div3Controller">
    <h1 ng-bind="msg"></h1>
</div>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('div1Controller', ['$scope', function ($scope) {
        $scope.msg = 'div1Controller ...';
    }]);
    myapp.controller('div2Controller', ['$scope', function ($scope) {
        $scope.msg = 'div2Controller ...';
    }]);
    myapp.controller('div3Controller', ['$scope', function ($scope) {
        $scope.msg = 'div3Controller ...';
    }]);
</script>
</body>
</html>

4：鼠标指令

ng-click -> 当用户触发元素上的鼠标单击事件的时候响应

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 声明鼠标单击之后绑定的函数 -->
<button ng-click="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        // 函数内容
        $scope.showAlert = function () {
            alert('按钮被单击了');
        };
    }]);
</script>
</body>
</html>

ng-dbclick -> 同理，就是鼠标双击

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-dblclick="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('按钮被双击了');
        };
    }]);
</script>
</body>
</html>

ng-mousedown -> 当用户触发元素上的鼠标左键按下事件的时候响应。

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<button ng-mousedown="showAlert()">按钮</button>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('鼠标左键按下');
        };
    }]);
</script>
</body>
</html>

下面的命令都大同小异，直接给出指令及其说明

指令	说明
`ng-mouseup`	当用户触发元素上的鼠标左键弹起事件的时候响应。
`ng-mouseenter`	当鼠标进入指定元素的时候触发。
`ng-mouseleave`	当鼠标离开指定元素的时候触发。
`ng-mouseover`	当鼠标在指定元素上方的时候触发，包括在其子元素上方的时候也会触发
`ng-mousemove`	当鼠标在指定元素内移动的时候触发

5：键盘指令

ng-keypress -> 当指定元素上的键盘按键时响应。

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keypress="showConsole()" ng-model="msg">
<p ng-bind="msg"></p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

在这里插入图片描述

ng-keydown -> 当指定元素上的键盘按键按下时响应。

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keydown="showConsole()" ng-model="msg">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

ng-keyup -> 当指定元素上的键盘按键松开时响应。

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<input type="text" ng-keyup="showConsole()" ng-model="msg">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showConsole = function () {
            console.log($scope.msg);
        };
    }]);
</script>
</body>
</html>

6：表单指令

ng-force -> 当指定元素获取到焦点的时候触发

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 当焦点在这个输入框的时候触发事件函数 -->
<input type="text" ng-focus="showConsole()">

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        // 事件函数声明
        $scope.showConsole = function () {
            console.log('文本框获取到焦点');
        };
    }]);
</script>
</body>
</html>

其他大同小异，直接给出指令和说明

指令	说明
`ng-blur`	当指定元素失去了焦点的时候触发
`ng-change`	当指定元素的内容发生改变的时候触发
`ng-copy`	当指定元素被复制的时候触发
`ng-cut`	当指定元素被剪切的时候触发
`ng-paste`	当指定元素被粘贴的时候触发
`ng-submit`	当表单被提交的时候触发

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<form action="#" ng-submit="showAlert()">
    <input type="text" name="username"><br>
    <input type="text" name="password"><br>
    <input type="submit">
</form>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.showAlert = function () {
            alert('表单被提交了');
        };
    }]);
</script>
</body>
</html>

7：属性指令

ng-checked -> 用于设置复选框(checkbox)或单选按钮(radio)的checked属性。

<input type="checkbox" ng-checked="true">

ng-selected -> 用于设置下拉列表框的selected属性

<select>
    <option>河北</option>
    <option ng-selected="true">天津</option>
    <option>上海</option>
</select>

ng-readonly -> 用于设置文本框是否只读

<input type="text" ng-readonly="true" value="123456">

ng-disabled -> 用于设置表单控件是否禁用

<input type="text" ng-disabled="true" value="123456">

ng-value -> 用于设置文本框的值

<input type="text" ng-value="123456">

ng-href -> 用于设置a标签的href属性

<a ng-href="https://www.baidu.com">打开百度，你就知道！</a>

ng-src -> 用于设置img标签的src属性

<img ng-src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">

ng-class -> 用于设置标签的class属性

div {
    width: 200px;
    margin-top: 20px;
}

.hot {
    color: red;
}

.active {
    border: 2px solid coral;
}

.title {
    background: blue;
}

<!--初始化变量-->
<body ng-init="isActive=true;isShow=false">

<!--写法一-->
<div ng-class="{'hot active': isActive, 'title': !isActive}">商品标题</div>

<!--写法二-->
<div ng-class="{'hot active': true, 'title': isActive}">商品标题</div>

<!--写法三-->
<div ng-class="{true: 'hot active', false: 'title'}[true]">商品标题</div>

<!--写法四-->
<div ng-class="isShow?'hot active':'title'">商品标题</div>

ng-style -> 用于设置标签的style属性

<p ng-style='{"color": "white", "background": "coral", "font-size": "20px"}'>我是段落</p>

8：循环指令

ng-repeat -> 定义集合中每项数据的模板

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <!-- 注意这里, 从user中拿到每一个user, 然后通过track by $index获取索引 -->
    <tr ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

🎉 各行换色扩展

方式一：$even & $odd

$even：只在下标为偶数的时候为 true
$odd：只在下标为奇数的时候为 true

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text-info {background: cornflowerblue;}
        .text-danger {background: red;}
    </style>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr ng-class="{'text-info': $even, 'text-danger': $odd }" ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

方式二：ng-class-even & ng-class-odd

ng-class-even：类似 ng-class，但只在偶数行起作用，常用table/tr/td、ul/li等元素配合使用
ng-class-odd：类似 ng-class，但只在奇数行起作用，常用table/tr/td、ul/li等元素配合使用

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .text-info {background: cornflowerblue;}
        .text-danger {background: red;}
    </style>
</head>
<body>

<table cellspacing="0px" border="1px">
    <tr>
        <th>数组下标</th>
        <th>用户姓名</th>
        <th>用户年龄</th>
    </tr>
    <tr ng-class-even="'text-info'" ng-class-odd="'text-danger'" ng-repeat="user in users track by $index">
        <td>{{$index}}</td>
        <td>{{user.name}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.users = [
            {name: 'zhangsan', age: '21'},
            {name: 'lisi', age: '22'},
            {name: 'wangwu', age: '23'},
            {name: 'xiaoliu', age: '24'}
        ];
    }]);
</script>
</body>
</html>

ng-options -> 用于循环生成select下拉选择框中的option

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select ng-model="selectedValue" ng-options="item for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = ["Emil", "Tobias", "Linus"];
    }]);
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<!-- 如果循环的是一个数组，一般是这样的 -->
<select ng-model="selectedValue" ng-options="item.index as item.name for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = [
            {index: 0, name: 'Emil'},
            {index: 1, name: 'Tobias'},
            {index: 2, name: 'Linus'}
        ];
    }]);
</script>
</body>
</html>

在这里插入图片描述

<!-- 还可以设置分组 -->
<!DOCTYPE html>
<html ng-app="myapp" ng-controller="mainController">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<select ng-model="selectedValue" ng-options="item.index as item.name group by item.group for item in names"></select>
<p>{{selectedValue}}</p>

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    myapp.controller('mainController', ['$scope', function ($scope) {
        $scope.names = [
            {index: 0, name: 'Emil', group: 'english'},
            {index: 1, name: 'Tobias', group: 'english'},
            {index: 2, name: 'Linus', group: 'english'},
            {index: 3, name: 'zhangsan', group: 'chinese'},
            {index: 4, name: 'lisi', group: 'chinese'},
            {index: 5, name: 'wangwu', group: 'chinese'}
        ];
    }]);
</script>
</body>
</html>

在这里插入图片描述

ng-options有以下格式的语法，仅供参考：

数据来自于数组：

label for value in array
select as label for value in array
label group by group for value in array
select as label group by group for value in array track by trackexpr

数据来自于对象：

label for (key , value) in object
select as label for (key , value) in object
label group by group for (key, value) in object
select as label group by group for (key, value) in ob

9：显示指令

指令	说明
`ng-hide`	隐藏或显示 HTML 元素，可设值为true或者false
`ng-show`	显示或隐藏 HTML 元素，可设值为true或者false
`ng-open`	指定元素的 open 属性，可设值为true或者false,常与details等具展开效果的元素配合使用
`ng-if`	显示或移除 HTML 元素，可设值为true或者false
`ng-switch`	ng-switch规定显示或隐藏子元素的条件，常与ng-switch-when配合使用，类似于switch和case。

<h1 ng-hide="true">我是标题</h1>

<h1 ng-show="true">我是标题</h1>

<details ng-open="true">
    <summary>我是summary</summary>
    <p>我是p</p>
</details>

<div ng-if="true">我是div</div>

<select ng-model="mySelect">
    <option value="baidu">百度</option>
    <option value="google">谷歌</option>
    <option value="taobao">淘宝</option>
</select>
<div ng-switch="mySelect">
    <div ng-switch-when="baidu">
        <h1>百度</h1>
        <p>欢迎访问百度</p>
    </div>
    <div ng-switch-when="google">
        <h1>谷歌</h1>
        <p>欢迎访问谷歌</p>
    </div>
    <div ng-switch-when="taobao">
        <h1>淘宝</h1>
        <p>欢迎访问淘宝</p>
    </div>
    <div ng-switch-default>
        <h1>切换</h1>
        <p>选择不同选项显示对应的值。</p>
    </div>
</div>

10：包含指令

ng-include -> 在应用中包含 HTML 文件，但不能执行引入文件中的JavaScript代码。

<div ng-include="'myFile.html'"></div>

11：自定义指令

myapp.directive('指令名称', function () {
    return {
        restrict: '指令类型',
        template: '指令结构',
        replace: '指令复写',
        scope: '新作用域',
        link: function (scope, element, attrs) {
            // 当前自定义指令的行为代码请写在这里...
        }
    }
});

指令名称：

指令名称必须采用小写，任何大写都会导致无效。如果是M类型，则replace字段就是必须写的，并且必须设置为true才能生效。

指令类型：

“A”，指的是attribute，意味着指令需要通过属性的方式使用，例如：<div my-directive="exp"></div>
“E”，指的是element，意味着指令需要通过元素的方式使用，例如：<my-directive></my-directive>
“C”，指的是class，意味着指令需要通过类名的方式使用，例如：<div class="my-directive:exp;"></div>
“M”，指的是comment，意味着指令需要通过注释的方式使用，例如：

指令结构：

指令结构template指的是指令在页面中能够显示的html结构，如果需要从外部文件中加载指令的结构，则需要写成templateUrl。

指令复写：

指令复写指的是指令当在页面中存在时，是否会被当做是一个子元素添加到当前所在的元素内，如果设置为true，那么模版将会替换当前元素，而不是作为子元素添加到当前元素中。（注意：为true时，模版必须有一个根节点）

新作用域：

如果设置为true，将为这个directive创建一个新的scope。如果在同一个元素中有多个directive需要新的scope的话，它还是只会创建一个scope。新的作用域规则不适用于根模版，因此根模版往往会获得一个新的scope。

如果设置为{}，将创建一个新的、独立的scope。它与一般的scope的区别在于它不是通过原型继承于父scope的。这对于创建可复用的组件是很有帮助的，可以有效防止读取或者修改父级scope的数据。

link：专门为自定义指令提供了一个用来编写对应脚本的区域。
scope：如果将整个指令看作是一个controller，那么scope的作用等价于 $sco p e ，在指令内部，需要对 sco p e 进行初始化，如果不进行初始化操作，那么 sco p e 默认为当前 C o n t ro ll er 中的$ scope。
element：一个包含了指令中所有页面元素的数组，每一个元素都是一个DOM对象，数组整体支持jQuery操作，而数组元素本身支持JavaScript原生操作。
attrs：当前指令的属性集合，用来获取元素的属性。

<!DOCTYPE html>
<html ng-app="myapp">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div mydirective></div>
<mydirective></mydirective>
<div class="mydirective"></div>
<!-- directive:mydirective -->

<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-cookies.js"></script>
<script src="js/angular-animate.js"></script>
<script>
    // 请将AngularJS代码书写在这里 ...
    var myapp = angular.module('myapp', ['ngRoute', 'ngCookies', 'ngAnimate']);
    // 自定义指令
    myapp.directive('mydirective', function () {
        return {
            restrict: 'AECM',
            template: '<h1>{{msg}}</h1>',
            replace: true,
            scope: {},
            link: function (scope, element, attrs) {
                scope.msg = 'Hello,Directive';
            }
        }
    });
</script>
</body>
</html>