AngularJS 1.4入门教程

三叶屋猪子2024-03-01 17:41

AngularJS 1.4入门教程

温馨提示：在阅读之前，建议你先补习以下知识点

  1. 了解 HTML 和 CSS 布局的方法
  2. 熟悉 JavaScript 的基本语法

简介

本部分介绍了在学习 AngularJS之前需要了解的知识，具体内容包括：

什么是 AngularJS

AngularJS 是一个开发动态 Web 应用的框架。它让你可以使用 HTML 作为模板语言并且可以通过扩展的 HTML 语法来使应用组件更加清晰和简洁。它的创新之处在于，通过数据绑定和依赖注入减少了大量代码，而这些都在浏览器端通过 JavaScript 实现，能够和任何服务器端技术完美结合。

Angular 是为了扩展 HTML 在构建应用时本应具备的能力而设计的。对于静态文档，HTML 是一门很好的声明式的语言，但对于构建动态 WEB 应用，它无能为力。所以，构建动态 WEB 应用往往需要一些技巧才能让浏览器配合我们的工作。

通常，我们通过以下手段来解决动态应用和静态文档之间不匹配的问题：

  • 类库 - 一些在开发 WEB 应用时非常有用的函数的集合。你的代码起主导作用，并且决定何时调用类库的方法。例如：jQuery等。
  • 框架 - 一种 WEB 应用的特殊实现，你的代码只需要填充一些具体信息。框架起主导作用，并且决定何时调用你的代码。例如：knockout, ember等。

Angular 另辟蹊径，它尝试去扩展 HTML 的结构来弥合以文档为中心的 HTML 与实际 Web 应用所需要的 HTML 之间的鸿沟。Angular 通过指令（directive）扩展 HTML 的语法。例如：

  • 通过{{}}进行数据绑定。
  • 使用 DOM 控制结构来进行迭代或隐藏 DOM 片段。
  • 支持表单和表单验证。
  • 将逻辑代码关联到 DOM 元素上。
  • 将一组 HTML 做成可重用的组件。

Angular 与 AngularJS

Angular 和 AngularJS 是两个不同但紧密相关的技术。

AngularJS，也被称为 Angular 1.x，是 Angular 的第一个版本，最初由 Google 在 2010 年开发并推出。它是一个基于 JavaScript 的开源前端框架，主要用于构建单页应用（SPA）。AngularJS 通过提供一系列的功能和工具，如模板、数据绑定、路由、依赖注入等，帮助开发者更高效地构建和维护 Web 应用程序。

然而，随着时间的推移，AngularJS 逐渐显示出一些局限性，特别是在处理大型复杂应用时。因此，Angular 的开发团队决定从头开始构建一个全新的框架，这就是我们现在所知的 Angular（也被称为 Angular 2+ 或 Angular 2 及其后续版本）。

Angular 是 AngularJS 的继任者，它采用了全新的架构和设计理念，旨在解决 AngularJS 中的一些问题和局限性。Angular 使用 TypeScript 作为其主要的开发语言，而不是 JavaScript，这使得代码更加健壮、可维护，并提供了更好的类型安全性和工具支持。此外，Angular 还引入了许多新的功能和优化，如组件化架构、更好的性能、更强大的路由系统等。

Angular 和 AngularJS 在许多方面都有所不同，但它们之间仍然存在一定的联系和兼容性。例如，Angular 提供了升级工具，可以帮助开发者将现有的 AngularJS 应用程序逐步迁移到 Angular。此外，许多在 AngularJS 中开发的概念和模式在 Angular 中仍然适用，尽管具体的实现方式可能有所不同。**因此我们在开发中仍然使用 AngularJS 1.4 **作为主要的 JavaScript 框架。本文也将以 AngularJS 1.4 做展开描述，并且后文中的 Angular 、AngularJS 除明确说明外，全都指代 AngularJS 1.4 版本。

为什么使用 AngularJS

Angular 官方的解释：

HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.

HTML 非常适合声明静态文档，但当我们试图在 web 应用程序中使用它来声明动态视图时，它会出现问题。AngularJS 允许您为应用程序扩展 HTML 词汇表。由此产生的环境非常具有表现力、可读性和快速开发性。

AngularJS 是由 Google 的员工 Miško Hevery 从 2009 年开始着手开发。

这是一个非常好的构想，该项目目前已由 Google 正式支持，有一个全职的开发团队继续开发和维护这个库。

Angular 特性

MVC 模式

AngularJS 第一大特性采用 MVC 模式设计：使数据分离更加便于维护与修改。

M(model): 模型-用来处理数据；

V(view): 视图-用来显示数据；

C(controller): 控制器-用来分配数据给视图显示(调度作用)；

代码示例：

html 复制代码 
<!DOCTYPE html>
<html ng-app>
<head>
    <script src="JS/angular.min.js"></script>
</head>
<body>
	<div ng-controller="ng1">
        {{name}} {{age}}
    </div>
	<div ng-controller="ng2">
        {{age}}
    </div>
    <script>
        function ng1($scope, $rootScope){
            // 局部范围变量
            $scope.name = "angular";
            // 全局范围变量
            $rootScope.age = 20;
        }
        function ng2() {}
    </script>
</body>
</html>

注意点：

  • ng-app 指令：在哪里注入就说明从哪里开始用 angular 解析。
  • ng-controller 指令：指定该区域使用哪个控制器来解析。
  • $scope 局部范围变量：定义的变量只能在该函数内部使用。
  • $rootScope 全局范围变量：定义的变量可以在全部范围中使用。
  • {{变量名}} 在视图层中用 {{}} 符号来解析变量内的数据。

MVVM 双向数据绑定模式

AngularJS 第二大特性采用 MVVM 模式设计：使模型与视图层相互关联，更加方便使用。

模型变化视图也跟着变化，视图变化模型也跟着变化。

代码示例：

html 复制代码 
<!DOCTYPE html>
<html ng-app>
<head>
	<script src="JS/angular.min.js"></script>
</head>
<body>
	<div ng-controller="ng1">
        {{name}}
	</div>   
    <script>
		// 文字两秒后变换
		function ng1($scope,$timeout){
			$scope.name="文字";
			$timeout(function(){
				$scope.name="已变换";
			},2000);
      	}
	</script>
</body>
</html>

模块化处理

AngularJS 第三大特性分模块化处理：减少全局变量的污染（减少变量的冲突）; 减少模块与模块之间的依赖，即模块1出错了，不影响模块2。

实现：

  1. 先定义模块 angular.module ('模块的名称',['依赖的其他模块'])
  2. 调用模块 ng-app 调用
  3. 代码压缩问题处理方法

代码示例：

html 复制代码 
<html ng-app="app">
<body>
	<div ng-controller="a"><p>{{name}}</p></div>
	<div ng-controller="b"><p>{{name}}</p></div>
	<div ng-controller="c"><p>{{name}}</p></div>
</body>
<script>
    var ng = angular.module('app', []); // 定义模块
	// 绑定控制器
	ng.controller('a', ['$scope', function($scope) {
		$scope.name = 'angular1';
	}]);
	ng.controller('b', ['$scope', function($scope) {
		$scope.name = 'angular2';
	}]);
	ng.controller('c', ['$scope', function($scope) {
		$scope.name = 'angular3';
	}]);
</script>
</html>

快速开始

作为一个功能完整的框架，Angular 提供了一套开发理念和方法，我们只需要掌握这套理念和方法即可明确如何实现我们需要的功能。话不多说，让我们马上开始吧！

基本表达式{{}}

在前面讲 Angular 特性的时候，我们在每一个示例代码中都使用到了{{xxx}}，事实上，这双括号中的内容就是 Angular 的表达式，并将表达式进行计算的结果展示在此处。

我们可以尝试下将表达式中的内容替换为如下内容，并观察运行的结果：

javascript 复制代码 
{{1+1}} //网页会显示2
{{'a'+'bc'}} //网页会显示abc

并且，如果此处输出的是 JavaScript 中的变量，此处的显示会自动的随 JavaScript 变量的变化而变化，即上文中的 Angular 第二个特性。

初始化ng-app

本节我们将学习基本的ng-app初始化。

ng-app定义了 Angular 应用程序的根元素，在网页加载完毕时会自动引导（自动初始化）应用程序，这样你才能在网页中使用各种 Angular 提供的功能（比如前一节介绍的基本表达式功能）。

在现在阶段，我们并不会用到ng-app的扩展功能，只需要在独立的 JavaScript 文件中将ng-app声明好，再引用入 HTML 页面即可。

  1. 在./js目录中新建一个app.js文件，并填入如下代码：

    javascript 复制代码 
    var App = angular.module("App", []);

  2. 在./index.html中引入app.js文件，并将ng-app配置进去即可。

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>Angular 初始化</title>
</head>
<body>
    <h1>{{"Hello World!"}}</h1>
    <script type="text/javascript" src="./js/angular.1.4.8.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
    <!-- 这里我们将app.js引入了进来 -->
</body>
</html>

作用域scope

scope（作用域）是应用在 HTML（视图）和 JavaScript（控制器）之间的纽带。本质是一个对象，有可用的方法和属性。可以被应用在视图和控制器上。

当你在 Angular 创建控制器时，你可以将$scope对象当作一个参数传递，例如：

html 复制代码 
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
	var app = angular.module('myApp', []);
	app.controller('myCtrl', function($scope) {
    	$scope.carname = "Volvo";
	});
</script>

  • 当在控制器中添加$scope对象时，视图（HTML）就可以获取这些属性。在视图中，你不需要添加$scope前缀, 只需要添加属性名即可，例如上面案例中的{{carname}}，而不是{{$scope.carname}}。

    在上文的案例中，只有一个作用域 scope ，所以处理起来比较简单，但在大型项目中，HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

  • 此外，所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有 HTML 元素中，是各个 controller 中 scope 的桥梁。用 rootscope 定义的值，可以在任何的 controller 中使用。

    创建控制器时，将$rootScope作为参数传递，可在应用中使用，例如：

html 复制代码 
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{lastname}} 家族成员:</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
    $scope.names = ["Emil", "Tobias", "Linus"];
    $rootScope.lastname = "Refsnes";
});
</script>

$scope还有一些注意事项，我们放在下面的控制器中一起说明。

控制器ng-controller

控制器ng-controller是使用 Angular 的核心功能之一，应用ng-controller和应用ng-app类似，下面我们来尝试创建一个控制器吧！

  1. 在app.js中，我们创建一个控制器，代码如下：

    javascript 复制代码 
    // app.js
/**
 * App.controller 声明ng-controller的方法
 * "FirstCtrl" 这个ng-controller的名称
 * function($scope){} 这个ng-controller的实体，并注入$scope
 */
var App = angular.module("App", []);
App.controller("FirstCtrl", function($scope){
    $scope.data = {
      message : "Hello"
    };
});

  2. 同时，我们在index.html中进行一些代码修改，最终代码如下：

    html 复制代码 
    <!DOCTYPE html>
<html lang="zh" ng-app="App">
<head>
    <meta charset="UTF-8">
    <!-- 网页的标题，我们在这里使用了AngularJS的基本表达式 -->
    <title>{{"学习AngularJS 1.4"}}</title>
</head>
<body>
    <!-- 将FirstCtrl绑定到这个div标签上，这个标签中的内容将可以使用FirstCtrl中的数据-->
    <div ng-controller="FirstCtrl">
        <h1>{{data.message + " AngularJS 1.4!"}}</h1>
    </div>
    <!-- 以下表达式不会输出任何内容，因为它在FirstCtrl之外-->
    <p>下面的内容不会显示</p>
    <p>{{data.message}}</p>
    <script type="text/javascript" src="./js/angular.1.4.8.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
</body>
</html>

刷新页面，我们可以看到运行的效果：

下面，我们再来分析下ng-controller的具体形式：

funtion(){}封装的函数会被绑定到FirstCtrl上。这个概念相对容易理解，我们需要注意的是我们在function中传入的参数$scope。这个方法中的参数与一般的函数声明时的参数不同，此处的参数是不可随意命名的，Angular 会解析参数的名称，并转化为对应的对象传入。

在先前的作用域中我们了解到，这里使用的$scope，用于将ng-controller中的数据和 HTML 代码绑定起来，传入$scope的数据，可以直接在 HTML 代码中调用。在上面的例子中，我们对$scope传入了{data:{message:"Hello"}}对象，并在 HTML 代码中直接使用了data.message来调用。data命名并不是固定用法，我们也可以使用$scope.abc = {efg:"hello"}。值得注意的是，$scope之下除了可以传入数据外，还可以传入其他函数，比如我们声明一个onClick函数传入$scope之后，可在 HTML 页面中调用这个功能，实现例如按钮点击触发功能的效果。

数据绑定ng-model

上一节我们介绍了如何将ng-controller的数据显示在 HTML 当中，但是我们如何在页面中修改这些数据呢？这一步操作也很简单，我们先直接看看代码吧：

html 复制代码 
<!DOCTYPE html>
<html lang="zh" ng-app="App">
<head>
    <meta charset="UTF-8">
    <!-- 网页的标题，我们在这里使用了AngularJS的基本表达式 -->
    <title>{{"学习AngularJS 1.4"}}</title>
</head>
<body>
    <!-- 将FirstCtrl绑定到这个div标签上，这个标签中的内容将可以使用FirstCtrl中的数据-->
    <div ng-controller="FirstCtrl">
        <h1>{{data.message + " AngularJS 1.4!"}}</h1>
        <!-- 这里增加了一个input输入框，并使用ng-model绑定了data.message-->
        <input type="text" ng-model="data.message">
    </div>
    <script type="text/javascript" src="./js/angular.1.4.8.js"></script>
    <script type="text/javascript" src="./js/app.js"></script>
</body>
</html>

运行结果：

如果您实际运行代码，会发现，您每输入/删除一个文字，改动会马上在上方显示出来。这就是数据绑定的魅力，也是本文开篇所讲的 Angular 特性中的第二个特性。

点击事件绑定ng-click

界面操作里面还有一个非常常用的功能，就是界面上按钮的与控制器中的函数进行点击事件绑定。这个也很容易实现：

javascript 复制代码 
App.controller("FirstCtrl", function($scope){
    $scope.data = {
      message : "Hello"
    };
    //在$scope上绑定一个函数
    $scope.onClick = function(){
        alert($scope.data.message);
    }
});
html 复制代码 
<div ng-controller="FirstCtrl">
    <h1>{{data.message + " World!"}}</h1>
    <input type="text" ng-model="data.message">
    <!-- 这里我们放置一个按钮，并使用ng-click绑定了$scope.onClick事件-->
    <input type="button" value="按钮" ng-click="onClick()">
</div>

点击按钮，我们即可看到数据通过弹出框显示了出来（onClick函数中的逻辑）。

除了点击事件外，Angular 还提供了其它的事件绑定：

事件 名称
ng-click / ng-dblclick 单机 / 双击
ng-mousedown / up 鼠标按下 / 抬起
ng-mousemove /over / out 鼠标移动 / 移入 / 移出
ng-keydown / up / press 键盘按下 / 抬起 / 按住
ng-focus / blur 获得光标 / 失去光标
ng-submit 提交
ng-selected 下拉菜单默认被选择
ng-change 内容改变事件经常结合 ng-model 指令使用
ng-copy / cut / paste 内容复制 / 剪切 / 粘贴

条件判断 ng-if / ng-show / ng-hide

本节我们将学习的是如何通过变量来控制 HTML 是否显示。

这三个语句具体的用法如下：

在$scope.data中添加flag变量，设置默认值为true

javascript 复制代码 
//app.js
$scope.data = {
    message: "Hello",
    flag: true
};

将以下代码放置在 FirstCtrl 中

html 复制代码 
<input type="checkbox" ng-model="data.flag">通过复选框来控制文字是否显示
<!-- 如果data.flag == true,则显示此段文字-->
<div ng-if="data.flag">
    <p>ng-if中的文字</p>
</div>
<!-- 如果data.flag == true,则显示此段文字-->
<div ng-show="data.flag">
    <p>ng-show中的文字</p>
</div>
<!-- 如果data.flag == false,则显示此段文字-->
<div ng-hide="data.flag">
    <p>ng-hide中的文字</p>
</div>

运行结果：

从上面的例子可以看出，如果复选框打勾，则界面只显示了前两行文字；而取消复选框的打勾，则显示了最后的一行文字。这个特性可以用于展示界面上的某些信息或者按钮。

这三者虽然效果看起来类似，但ng-if的工作模式与ng-show/ng-hide不一样。

  • 如果使用ng-if来控制元素是否显示，则在不显示的情况下，ng-if中包含的内容，会被全部从 HTML 中移除掉。

  • 如果使用ng-show/ng-hide，Angular 只是使用 CSS 控制将内容隐藏起来。

这两者可以应用于不同的场景，如果内容较多，且之后不会使用到，那么可以使用ng-if；如果之后还可能会显示出来，那么可以使用ng-show/ng-hide。

此外，虽然上面的例子中使用了data.flag直接作为判断依据，但是以上三个标签都支持传入表达式。简单举例：

html 复制代码 
<div ng-if="data.abc > 6">
    <p>ng-if中的文字</p>
</div>

但是请注意，在这些标签中传入参数时，是不需要双括号{{与}}将参数包裹起来的。

重复语句 ng-repeat

本节将讲述如何使用ng-repeat对一个列表的数据进行遍历并显示出来。

首先，我们准备如下的数据。这是一个包括三个object的array。

javascript 复制代码 
$scope.list = [
    {
        name: "Harry"
    },
    {
        name: "Tom"
    },
    {
        name: "Jerry"
    }
];

下面，我们将这些数据显示在 HTML 的一个表格中：

html 复制代码 
<table>
    <tr ng-repeat="x in list">
        <td>{{x.name}}</td>
    </tr>
</table>

运行结果：

为了更好的查看具体的运行效果，我们可以查看下最终生成的 HTML 代码。

从源代码可以看出来，ng-repeat直接将其所在的<tr>元素根据list的长度复制了 3 次。并将相应的数据填充了进去。

索引字段$index

在上文中我们知道使用ng-repeat可以对list进行遍历制成表格。在实际的使用场景中，如果我们使用一个表格来管理信息，那么可能表格的每一行都会有一些对应的操作功能（如编辑、删除）等。那么，我们如何在ng-repeat中知道是哪一行被点击了呢？Angular 提供了$index这个字段让我们实现这个功能。

下面，我们来看看使用$index的例子：

在app.js中，对onClick函数进行一些改造，让他能够获取传入的数据：

javascript 复制代码 
$scope.onClick = function (index) {
    alert("点击了第"+index+"行的按钮");
};

将上一个案例中的表格也进行一些改造：

html 复制代码 
<table>
    <tr ng-repeat="x in list">
        <td>{{x.name}}</td>
        <td><input type="button" value="我是第{{$index}}行的按钮"
              ng-click="onClick($index)"></td>
    </tr>
</table>

刷新页面后，让我们点击第一个按钮，效果如下：

这样，我们就可以明确的知道用户点击了哪一行了！值得注意的是，$index是从0开始计算的，所以我们有时候会改写为$index+1。

过滤器 |

过滤器是 Angular 的另一项强大的功能，如果能使用好它，能够帮助我们极大的节省工作量。

以下是几个应用filter的例子：

javascript 复制代码 
{{ 1234 | number:2 }}
// 显示两位小数，结果 1,234.00

{{ 1234.56 | currency:"人民币￥":0}}
// 转化为货币后输出(保留0位小数，四舍五入)，结果为 人民币￥1,234.00

{{ list | json }}
//将对象转化为json文本输出，结果为 [ { "name": "Harry" }, { "name": "Tom" }, { "name": "Jerry" } ]

<tr ng-repeat="x in list | orderBy:'name'">
//对显示的数据列表按照name进行字符串排序，结果为显示顺序Harry,Jerry,Tom

以上都是 Angular 的常用用法，具体的系统自带的filter的列表，我们可以从官方网站上获取。这里对官网提供的功能进行一个简要列表：

Filter名称 示例用法 说明
filter - 传入自定义的函数作为过滤器
currency currency / currency:"人民币￥":0 转化为货币后输出。可选货币单位和保留小数位数。
number number / number:2 将数字转化为文本，自动加逗号。可选设置小数位数。
date data : format : timezone 将时间转化到对应的格式和时区
json json 将对象转化为Json格式内容输出
lowercase lowercase 将文本转化为小写
uppercase uppercase 将文本转化为大写
limitTo limitTo : limit : begin 截取array从begin位置开始的limit个元素
orderBy orderBy : expression : reverse 根据expression的条件对list进行排序，reverse可选，设置为true则反过来排

样式选择器 ng-class/ng-style

  • ng-class

通过ng-class，我们可以对界面元素的 css 样式进行控制。下面，让我们通过示例来看看功能如何实现：

首先，我们先创建一个./css/style.css文件。

css 复制代码 
/* 删除线 */
.strike {
    text-decoration: line-through;
}
/* 粗体 */
.bold {
    font-weight: bold;
}
/* 红色 */
.red {
    color: red;
}
/* 错误 */
.has-error {
    color: red;
    background-color: yellow;
}
/* 橙色 */
.orange {
    color: orange;
}

修改FirstCtrl为如下代码：

javascript 复制代码 
//app.js
App.controller("FirstCtrl", function ($scope) {
    $scope.data = {
        deleted:false,
        important:false,
        error:false
    };
});

并在index.html的<head>部分将 css 文件引入，并加入对应的代码。全部代码如下：

html 复制代码 
<!DOCTYPE html>
<html lang="zh" ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>{{"学习AngularJS 1.4"}}</title>
    <!-- 此处引入style.css样式文件-->
    <link type="text/css" rel="stylesheet" href="./css/style.css">
</head>
<body>
<div ng-controller="FirstCtrl">
    <!-- 此处放置了ng-class，并设定了每个样式激活时的条件（对应下方3个复选框）-->
    <p ng-class="{strike: data.deleted, bold: data.important, 'has-error': data.error}">示例文字</p>
    <input type="checkbox" ng-model="data.deleted">
        选中后上方文字将加上删除线（style中加上strike类） <br>
    <input type="checkbox" ng-model="data.important">
        选中后上方文字将变化为粗体（style中加上bold类） <br>
    <input type="checkbox" ng-model="data.error">
        选中后上方文字将变红，背景变黄（style中加上has-error类）
</div>
<script type="text/javascript" src="./js/angular.1.4.8.js"></script>
<script type="text/javascript" src="./js/app.js"></script>
</body>
</html>

运行效果：

未选中时效果

选中第一个的效果

选中第二个的效果

选中第三个的效果

全部选中的效果

  • ng-style

ng-style提供的功能比ng-class要少一些，只支持样式的传入。我们可以使用以下两种模式：

html 复制代码 
<span ng-style="{'background-color':data.colorInput}">示例文本</span>
//colorInput为$scope中的对象，传入文本即可

<span ng-style="data.styleText">示例文本</span>
//styleText为样式为 '{'color':red}'类型的文本

通过样式传入，我们可以直接向元素传入对应的样式，实现样式动态化的效果。

一个比较主要的用途是向元素传入动态的背景图片，例子如下：

javascript 复制代码 
data-ng-style="{'background-image':'url(img/products/{{product.img}})'}"

也可以传入一个函数(主要用于解决 IE11 中背景图片不显示的问题)：

html 复制代码 
<div ng-style="getBackgroundStyle(imagepath)"></div>
<script type="text/javascript">
    //代码放置在ng-controller中
    $scope.getBackgroundStyle = function (imagepath) {
        return {
            'background-image': 'url(' + imagepath + ')'
        }
    }
</script>

此外，我们还可以传入文本：

html 复制代码 
<input type="button" value="设置字体颜色为红色" ng-click="data.myStyle={color:'red'}">
<input type="button" value="设置背景颜色" ng-click="data.myStyle={'background-color':'blue'}">
<input type="button" value="清除样式" ng-click="data.myStyle={}">
<br>
<span ng-style="data.myStyle">示例文本</span>
<pre>当前样式为{{data.myStyle}}</pre>

运行效果：

下拉列表选项 ng-options

在学习了ng-repeat过后，我们其实已经可以用循环的方式实现下拉列表的选项。但是，Angular 提供了ng-options的方法，让我们能够更轻松的完成这项工作。

首先，让我们学习下如何使用ng-options。这里，我们期望实现的是，使用下拉列表，让页面上的一个方块的颜色对应变化：

  • 基本使用

我们首先配置一个颜色的列表，并且在$scope中存储一个用于保存选中状态的变量，将它的默认值设置为颜色列表的第一个：

javascript 复制代码 
App.controller("FirstCtrl", function ($scope) {
    $scope.colors = [
        {name: '黑色', color:'black' },
        {name: '白色', color:'white' },
        {name: '红色', color:'red' },
        {name: '蓝色', color:'blue' },
        {name: '黄色', color:'yellow'}
    ];
    //保存选中的状态，默认颜色设置为黑色
    $scope.colorChosen = $scope.colors[0];
});
html 复制代码 
<div ng-controller="FirstCtrl">
    <label>选择一个颜色（无空选项）:
        <select ng-model="colorChosen" ng-options="color.name for color in colors">
        </select>
    </label>
    <br>
    当前选中的颜色: {{ colorChosen.name }}
    <div style="border:solid 1px black; height:20px"
         ng-style="{'background-color':colorChosen.color}">
    </div>
</div>

运行页面，我们可以看到下拉列表中有列表中的五种颜色，并且选中不同颜色后，下方方框内的颜色，会根据选择变化。

  • 增加未选中的选项

在很多时候，我们期望能有一个没选中的选项。我们可以通过手动的方式添加这个选项：

html 复制代码 
<select ng-model="colorChosen" ng-options="color.name for color in colors">
    <option value="">-- 选择一个颜色 --</option>
</select>
  • 按组排列

ng-options也支持按组排列数据，使用group by语法，下面我们看看例子：

首先，我们在列表中增加类型字段：

javascript 复制代码 
$scope.colors = [
    {name: '黑色', color: 'black', type: "暗色"},
    {name: '白色', color: 'white', type: "亮色"},
    {name: '红色', color: 'red', type: "暗色"},
    {name: '蓝色', color: 'blue', type: "暗色"},
    {name: '黄色', color: 'yellow', type: "亮色"}
];

然后修改ng-options的语法：

html 复制代码 
<select ng-model="colorChosen" ng-options="color.name group by color.type for color in colors">

运行效果：

  • 禁用某些选项

ng-options还可以通过disable when语法来设置选项是否可选，同样的，我们需要在列表中先新增字段：

注意，以下第一列数据并未加上disabled属性，这是为了表明如果没有这项数据，默认的ng-options的操作（可以选择）。

javascript 复制代码 
$scope.colors = [
    {name: '黑色', color: 'black', type: "暗色"},
    {name: '白色', color: 'white', type: "亮色", disabled: false},
    {name: '红色', color: 'red', type: "暗色", disabled: true},
    {name: '蓝色', color: 'blue', type: "暗色", disabled: false},
    {name: '黄色', color: 'yellow', type: "亮色", disabled: true}
];

然后修改ng-options的语法：

html 复制代码 
<select ng-model="colorChosen"
        ng-options="color.name group by color.type
        disable when color.disabled for color in colors">

运行结果：可以看到，图中的"红色"和"黄色"变为了不可选择的状态。

  • 将对象作为参数传入

在上面的例子中，我们传入的是一个列表array。ng-options也支持以对象object的方式传入数据：

使用object的方式传入数据，一般是为了简化配置，比如我们采取如下的配置：

javascript 复制代码 
$scope.countries = {
    CN: '中国China',
    US: '美国United States',
    UK: '英国United Kingdom',
    GR: '德国Germany'
};
$scope.country = 'CN';

注意，以下代码中，for 后面有一个空格 。如果没有，则无法成功运行！这是因为传入ng-options的其实是一串文本，而 Angular 需要解析这段文本，因此提出了对格式的要求。

html 复制代码 
<div ng-controller="FirstCtrl">
    <label>选择一个国家（有空选项）:
        <select ng-model="country" ng-options="k as v for (k, v) in countries">
            <option value="">-- 选择一个国家 --</option>
        </select>
    </label>
    <br>
    当前选中的国家: {{ country }}
</div>

运行结果，请注意列表中显示的值和选中时变量的值的关系。

引入ng-include和模板ng-template

引入ng-include和模板ng-template是定义和使用 HTML 代码碎片的功能。用于将 HTML 切碎分别存储，并根据需求再去获取对应的代码块，达到加速访问和代码复用的效果。下面，我们将分别介绍ng-include和ng-template。

  • 引入 ng-include

当 HTML 代码过于复杂，或者期望建立单页应用时，需要将部分 HTML 打包成独立的文件。这时候，我们在引入这个独立 HTML 文件时，可以使用ng-include功能。

使用方法如下：

html 复制代码 
<!--  直接传入一个网页的地址，请注意这里的使用用法 -->
<!--  'view/part.html' 外部有单引号 -->
<div ng-include="'views/part.html'"></div>
<!-- 假设$scope中有template:{url:"http://..."}这个对象 -->
<div ng-include="template.url"></div>
<div ng-include="getUrl()"></div>

从上面的例子可以看出，ng-include支持直接传入静态文本、传入变量、传入函数（返回网页地址）的方式来进行调用。

另外，ng-include的用法也可以直接作为标签名使用，这些用法的效果都是一样的，例如：

html 复制代码 
<div data-ng-include="'views/part.html'"></div>
<ng-include src="'views/part.html'"></ng-include>
  • 模板ng-template

ng-template用于将多个 HTML 片段存放于一个 HTML 文件中。并且可以根据需求分别调用其中的某一个片段。

ng-template的用法如下：

html 复制代码 
<script type="text/ng-template" id="html_part.html">
  <!-- HTML片段的实际内容 -->
</script>

ng-template需要将<script>的type设置为text/ng-template，然后给他配置一个id。这个id就是这段 HTML 代码被引用时的名称。

使用ng-template代码片段的方法就是上诉的ng-include方法，例如：

html 复制代码 
<div ng-include="'html_part.html'"></div>
相关推荐
还是大剑师兰特15 分钟前
什么是尾调用，使用尾调用有什么好处？
javascript·大剑师·尾调用
m0_7482361123 分钟前
Calcite Web 项目常见问题解决方案
开发语言·前端·rust
Watermelo61736 分钟前
详解js柯里化原理及用法，探究柯里化在Redux Selector 的场景模拟、构建复杂的数据流管道、优化深度嵌套函数中的精妙应用
开发语言·前端·javascript·算法·数据挖掘·数据分析·ecmascript
m0_7482489437 分钟前
HTML5系列（11）-- Web 无障碍开发指南
前端·html·html5
m0_748235611 小时前
从零开始学前端之HTML（三）
前端·html
一个处女座的程序猿O(∩_∩)O3 小时前
小型 Vue 项目，该不该用 Pinia 、Vuex呢？
前端·javascript·vue.js
hackeroink6 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者7 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-8 小时前
验证码机制
前端·后端
燃先生._.9 小时前
Day-03 Vue（生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤）
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程