Angular.js 如何绘制列表

简介: 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 被赋值为一个包含三个国家信息的数组。每个国家是一个对象,包含 namepopulation 两个属性。


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 对象的 namepopulation 属性变化时,Angular 会自动更新这些值在页面上的显示。


4. 结语

以上就是这段 Angular.js 代码的核心功能和工作原理。通过这个例子,我们可以看到 Angular.js 如何通过模块化的结构、明确的数据绑定和控制器的概念来简化复杂的前端开发。这种模式大大增强了前端开发的效率和可维护性,是现代 web 应用开发中常见的一种模式。

相关文章
|
1月前
|
前端开发 JavaScript
js + ajax实现商品列表页到详情页的跳转
js + ajax实现商品列表页到详情页的跳转
|
8月前
|
Web App开发 JavaScript 前端开发
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
57 0
|
1月前
|
JavaScript 前端开发
【专栏】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表
【4月更文挑战第29天】`Function.prototype.apply` 在JavaScript中用于动态设定函数上下文(`this`)和参数列表。它接受两个参数:上下文对象和参数数组。理解`apply`有助于深入JS运行机制。文章分三部分探讨其原理:基本概念和用法、工作原理详解、实际应用与注意事项。在应用中要注意性能、参数类型和兼容性问题。`apply`可用于动态改变上下文、传递参数数组,甚至模拟其他语言的调用方式。通过深入理解`apply`,能提升代码质量和效率。
|
1月前
|
前端开发 JavaScript API
JavaScript待办事项列表
JavaScript待办事项列表
|
1月前
|
移动开发 前端开发 JavaScript
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
使用JavaScript实现一个复杂功能:自定义拖拽排序列表
|
1月前
|
JavaScript
sort列表排序(js的问题)
sort列表排序(js的问题)
|
8月前
|
存储 JavaScript 前端开发
手撕前端面试题【javascript~ 列表动态渲染、无重复数组、数组排序、新数组、创建数组、深浅拷贝、内存泄露等】
html页面的骨架,相当于人的骨头,只有骨头是不是看着有点瘆人,只有HTML也是如此。 css,相当于把骨架修饰起来,相当于人的皮肉。
46 0
|
1月前
|
前端开发 JavaScript
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
从0到1:用HTML、CSS和JavaScript构建一个简单的待办事项列表
43 0
|
1月前
编程笔记 html5&css&js 015 HTML列表
编程笔记 html5&css&js 015 HTML列表
|
1月前
|
JavaScript 前端开发 小程序
element 订单列表中 实现多个倒计时(vue+js)
element 订单列表中 实现多个倒计时(vue+js)