JSP也算个模板吧,不过是服务端的。
<!DOCTYPE html> <html ng-app><!-- 必须 --> <title>AngularJS学习(三)模板</title> <meta charset="utf-8"> <!-- 引入angularJS --> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> <script src="03-1.js"></script> <!-- ng-controller指令指定了一个控制器,见03-1.js中的定义,这个控制器的作用范围(域)即在这个div内 --> <div ng-controller="PhoneListCtrl"> <!-- 这里phones定义在PhoneListCtrl内,即$scope.phones --> <p>手机总数:{{ phones.length }}</p> <ul> <!-- ng-repeat指令 用于循环 --> <li ng-repeat="phone in phones"> {{ $index + 1 }}<!-- $index 用于获取循环的当前索引 --> {{ phone.name }} <p>{{ phone.snippet }}</p> </li> </ul> <hr> <!-- ng-init指令 用于初始化一个值 --> <div ng-init="friends = {'adam':10, 'amalie':12}"> <p>对象:{{ friends }}</p> <ul> <!-- ng-repeat指令 另一种循环方式 --> <ol ng-repeat="(key,val) in friends"> {{ '第' + ($index + 1) + '属性为:' + key + ',它的值是:' + val}}<!-- $index 这种方式下依旧可用 --> </ol> </ul> <div> </div> </html>
03-1.js:
var PhoneListCtrl = function($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S."}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet."}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."} ]; }
相关推荐
**AngularJS标签模板加载原理详解** AngularJS,作为一款强大的前端JavaScript框架,以其双向数据绑定、模块化和...通过深入学习和实践,你可以更自如地驾驭AngularJS的模板系统,为你的Web应用带来更丰富的交互体验。
#### 三、AngularJS服务类型 - **工厂(Factory)**:工厂是一种常用的模式,用于创建对象实例,通常包含复杂的逻辑。 - **服务(Service)**:服务是封装特定任务或一组任务的对象,可以被多个控制器共享。 - **提供商...
【AngularJS入门教程02:AngularJS模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 在此专门从GitHub下载配套工程打包分享给大家。 本集教程地址: ...
AngularJS的学习资料众多,其中"AngularJS学习 chm 文件"是一个方便快捷的学习资源。 CHM文件,全称是Compiled HTML Help,是一种由Microsoft开发的帮助文件格式。它将HTML页面、索引和图像等资源打包在一起,形成...
AngularJS学习笔记是一份个人学习AngularJS过程的记录和总结,内容涵盖了AngularJS的基础概念、组件、服务、指令、过滤器、路由等各个方面。 AngularJS的核心特点之一是数据双向绑定,这允许开发者将数据模型和视图...
【AngularJS入门教程01:静态模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 专门下载配套工程打包分享给大家。 本集教程地址: ...
- **模板(Templates)**:AngularJS 支持动态模板,可以使用表达式来展示数据,也可以使用指令来控制DOM结构。 #### 二、AngularJS 的安装与配置 ##### 2.1 安装 AngularJS 可以通过以下几种方式之一来获取 ...
数据绑定是AngularJS的核心功能,笔记中细分为从数据到模板、从模板到数据、以及相互更新三个部分。模板是视图的HTML部分,AngularJS通过数据绑定来实现数据和模板之间的动态同步。 在模板中,可以使用过滤器来格式...
AngularJS学习总结&详细介绍 AngularJS是一款流行的前端JavaScript框架,用于构建单页应用程序(Single Page Application,简称SPA)。下面是AngularJS学习经验总结,全中文说明: 什么是AngularJS? AngularJS...
AngularJS学习指南 AngularJS是一个流行的前端JavaScript框架,用于构建复杂的Web应用程序。下面是学习AngularJS的关键知识点: 一、环境准备 * 安装Node.js和npm * 安装AngularJS * 创建和配置AngularJS项目 ...
在《AngularJS学习笔记.chm》中,读者可以期待找到关于这些概念的深入解释,包括如何创建AngularJS项目,设置模块,编写控制器,使用指令,以及进行数据绑定和依赖注入的实例。此外,还可能涉及如何调试、优化...
虽然后来Angular(2+)版本发布,但AngularJS 1.x系列依然有大量项目在运行,对于学习和维护这些项目,理解AngularJS 1.5.8的关键特性是非常必要的。通过下载提供的压缩包,你可以得到完整的AngularJS 1.5.8库,包括...
通过这个模板,开发者可以学习到: - 如何构建AngularJS 2应用的基本结构。 - 如何使用`http-server`快速启动本地开发服务器。 - AngularJS 2中的模块化和依赖注入系统。 - 如何创建和使用组件,以及组件间通信的...
#### 三、AngularJS 核心特性详解 1. **数据双向绑定** - **原理**:AngularJS 使用了脏检查(Dirty Checking)机制来实现数据双向绑定。每当应用状态发生改变时,AngularJS 会遍历所有绑定的表达式并检查它们是否...
【AngularJS学习笔记 - 进出自由,我的分享1】 AngularJS是一款由Google开发的JavaScript框架,用于构建富客户端Web应用程序。它强调数据绑定和依赖注入,简化了前端开发流程,尤其是在实现MVC(模型-视图-控制器)...
在这一步,你将实现手机... AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。在此专门下载配套工程打包分享给大家。 本集教程地址: http://www.angularjs.cn/A00b
AngularJS Eclipse 1.2.0 插件是专为开发者设计的一款强大的工具,它将AngularJS框架与Eclipse集成,极大地提升了开发AngularJS...如果你是Eclipse用户并且正在使用或打算学习AngularJS,那么这个插件绝对值得你拥有。