Angular.js 如何绘制列表
代码：
<html ng-app="countryApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular/angular.js"></script>
<script>
var countryApp = angular.module('countryApp', []);
countryApp.controller('CountryCtrl', function ($scope){
$scope.countries = [
{"name": "China", "population": 1359821000},
{"name": "India", "population": 1205625000},
{"name": "United States of America","population": 312247000}
];
});
</script>
</head>
<body ng-controller="CountryCtrl">
<ul>
<li ng-repeat="country in countries">{{country.name}} - population {{country.population}}</li>
</ul>
</body>
</html>
效果：
这段代码是一个非常典型的 Angular.js 示例，展示了 Angular 的基本结构和功能。Angular.js 是一个用于构建客户端应用的框架，它允许使用 HTML 作为模板语言，并通过扩展 HTML 的语法来表达应用的组件清晰和简洁地。
1. Angular 应用的初始化和模块定义
代码开始于 <html ng-app="countryApp">。这里的 ng-app 指令用于定义 Angular.js 应用的根元素，并指明应用的名称是 countryApp。这告诉 Angular 初始化时应该加载并引导这个名为 countryApp 的模块。
在 <script> 标签中，通过调用 angular.module 方法创建了一个名为 countryApp 的模块。angular.module 的第一个参数是模块的名称（在这里是 countryApp），第二个参数是一个数组，包含了该模块的依赖列表。由于这个示例中模块不依赖于其他模块，因此这个数组是空的。
2. 控制器的定义
接下来，定义了一个控制器 CountryCtrl。在 Angular 中，控制器负责初始化和从模型到视图的数据更新。这里使用 countryApp.controller 方法来创建控制器，第一个参数是控制器的名称，第二个参数是一个包含控制器逻辑的函数。
在 CountryCtrl 控制器的函数中，通过 $scope 对象来暴露数据模型。$scope 是一个特殊的对象，它作为视图（HTML）和控制器之间的桥梁。在这个例子中，$scope.countries 被赋值为一个包含三个国家信息的数组。每个国家是一个对象，包含 name 和 population 两个属性。
3. 数据绑定和视图更新
在 <body> 标签中，ng-controller="CountryCtrl" 指令告诉 Angular 这部分 HTML 将由 CountryCtrl 控制器来管理。这意味着在这部分 HTML 中可以访问到控制器中的 $scope 对象。
在 <ul> 列表中，ng-repeat 指令用来迭代一个数组，为数组中的每一个项生成一个 <li> 元素。这里的表达式 country in countries 表示对 $scope.countries 数组进行迭代，每次迭代的结果存储在 country 变量中。
在每个 <li> 元素内，使用了 {{country.name}} 和 {{country.population}} 来进行数据绑定。这种双花括号语法允许我们将表达式嵌入到 HTML 中。当 country 对象的 name 或 population 属性变化时，Angular 会自动更新这些值在页面上的显示。
4. 结语
以上就是这段 Angular.js 代码的核心功能和工作原理。通过这个例子，我们可以看到 Angular.js 如何通过模块化的结构、明确的数据绑定和控制器的概念来简化复杂的前端开发。这种模式大大增强了前端开发的效率和可维护性，是现代 web 应用开发中常见的一种模式。
- 点赞
- 收藏
- 关注作者
评论（0）