Angular.js 应用里如何实现列表应用
【摘要】 源代码：<html ng-app="nameApp"> <head> <meta charset="utf-8"> <title>Angular.js Example</title> <script src="angular/angular.js"></script> <script> var nameApp = angular.module('nameA...
源代码：
<html ng-app="nameApp">
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="angular/angular.js"></script>
<script>
var nameApp = angular.module('nameApp', []);
nameApp.controller('NameCtrl', function ($scope){
$scope.Ionames = ['Larry', 'Curly', 'Moe'];
});
</script>
</head>
<body ng-controller="NameCtrl">
<ul>
<li ng-repeat="nameF in Ionames">{{nameF}}</li>
</ul>
</body>
</html>
这段代码是一个简单的 AngularJS 应用示例。下面我将详细解释每个部分的功能和语法：
-
HTML结构与AngularJS整合
<html ng-app="nameApp">这行代码将整个 HTML 页面定义为 AngularJS 的应用程序，
ng-app="nameApp"是一个 AngularJS 的指令，用来定义 AngularJS 应用的根模块。这里的"nameApp"必须与 JavaScript 中创建模块时使用的名称相匹配。 -
引入AngularJS库
<script src="angular/angular.js"></script>这行代码通过
<script>标签引入了 AngularJS 的库文件。这是使用 AngularJS 开发任何应用前的必需步骤。 -
定义AngularJS模块和控制器
var nameApp = angular.module('nameApp', []); nameApp.controller('NameCtrl', function ($scope){ $scope.Ionames = ['Larry', 'Curly', 'Moe']; });angular.module('nameApp', []): 这行代码创建了一个名为"nameApp"的新模块。数组[]中可以包含一系列的依赖，用于注入到应用中。这里的数组是空的，表示该模块不依赖于其他模块。nameApp.controller('NameCtrl', function ($scope){...}): 这行代码定义了一个控制器NameCtrl。控制器用于建立视图（HTML）和模型（JavaScript）之间的数据绑定。$scope: 是一个对象，AngularJS 通过它将控制器的数据传递到视图。在这里，$scope.Ionames = ['Larry', 'Curly', 'Moe']定义了一个数组Ionames，并初始化了三个字符串元素。
-
在HTML中使用控制器
<body ng-controller="NameCtrl">使用
ng-controller="NameCtrl"指令将<body>标签指定为NameCtrl控制器的作用域。这意味着在<body>标签内部的任何数据绑定都会与NameCtrl控制器的$scope对象关联。 -
数据绑定和重复指令
<ul> <li ng-repeat="nameF in Ionames">{{nameF}}</li> </ul>ng-repeat="nameF in Ionames": 这是 AngularJS 中的一个指令，用于对数组进行迭代。这里它遍历Ionames数组中的每个元素。对于数组中的每个元素，ng-repeat都会复制<li>元素，创建一个列表项。{{nameF}}: 这是 AngularJS 的插值表达式。它用于在 HTML 中显示 JavaScript 变量的值。在这个例子中，它会显示由ng-repeat当前迭代的数组元素的值。
总结来说，这段代码创建了一个简单的 AngularJS 应用，其中包含一个名为 nameApp 的模块和一个名为 NameCtrl 的控制器，用于显示一个由三个名字组成的列表。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）