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入门教程02:AngularJS模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 在此专门从GitHub下载配套工程打包分享给大家。 本集教程地址: ...
【AngularJS入门教程01:静态模板】 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。 专门下载配套工程打包分享给大家。 本集教程地址: ...
在这一步,你将实现手机... AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。在此专门下载配套工程打包分享给大家。 本集教程地址: http://www.angularjs.cn/A00b
AngularJS 完整应用模板和空模板; HTML5/jQuery 完整应用模板和空模板; Material Design 完整应用模板和空模板; ASP.NET MVC5/6 + AngularJS 完整应用模板和空模板; ASP.NET MVC5/6 + HTML5/jQuery 完整应用模板...
AngularJS 完整应用模板和空模板; HTML5/jQuery 完整应用模板和空模板; Material Design 完整应用模板和空模板; ASP.NET MVC5/6 + AngularJS 完整应用模板和空模板; ASP.NET MVC5/6 + HTML5/jQuery 完整应用模板...
AngularJS 完整应用模板和空模板; HTML5/jQuery 完整应用模板和空模板; Material Design 完整应用模板和空模板; ASP.NET MVC5/6 + AngularJS 完整应用模板和空模板; ASP.NET MVC5/6 + HTML5/jQuery 完整应用模板...
《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...
《精通AngularJS》深入浅出地讲解了AngularJS的开发概念和原理,并通过丰富的开发实例向读者展示了构建复杂应用的完整过程,包括学习使用AngularJS特有的基于DOM的模板系统,实现复杂的后端通信,创建漂亮的表单,...
1. 关于AngularJS 2. 关于本文档 3. 开始的例子 4. 依赖注入 5. 作用域 6. 数据绑定与模板 7. 模板 8. 模板中的过滤器 9. 锚
主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用angularjs具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们。 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,...
本书是资深全栈工程师的代表性著作,由拥有丰富经验的国内AngularJS技术专家执笔翻译,通俗易懂、全面深入,是学习AngularJS不可错过的经典之作。无论是出于工作需要,还是好奇心的驱使,只要你想彻底理解AngularJS...
采用当前比较热门的开发框架,包含UI框架,用户管理,分页功能,查询,模态窗口,利用angularjs实现图片上传,消息提示框等功能,可以用作web项目的框架来使用,帮助学习angularjs和bootstrap前段和SSM后台框架的...
某宝30元资源 angularjs后台模板 学习angularjs的捷径 大量封装指令 ui-bootstrap指令插件 页面切换效果 组件之间通讯
AngularJS框架的体积非常小,但是设计理念和功能却非常强大,值得前端开发者深入学习 教程 本书对AngularJS框架的核心特性做了全面的介绍,包括常用的开发工具和开发环境。作为国内第一本关于AngularJS的书籍,本书...
AngularJS不是基于字符串的模板引擎290 响应DOM事件更新模型291 将模型变化传播给DOM291 同步DOM和模型变化292 Scope$apply——打开AngularJS世界的钥匙293 深入$digest循环295 整合300 112性能优化——设置...
此资源仅供学习研究之用,请与24小时删除。
在这一步,你将学习如何创建一个布局模板并且通过路由功能来构建一个具有多个视图的应用。 AngularJS初学者看到中文入门教程,却无法使用GitHub下载到配套的Angular的Seed工程,因此学习曲线大。在此专门下载配套...
本书是资深全栈工程师的代表性著作,由拥有丰富经验的国内AngularJS技术专家执笔翻译,通俗易懂、全面深入,是学习AngularJS不可错过的经典之作。无论是出于工作需要,还是好奇心的驱使,只要你想彻底理解AngularJS...