[转载]AngularJS视图
http://www.yiibai.com/angularjs/angularjs_views.html
<html>
<head>
<title>Angular JS Views</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="mainApp">
<p><a href="#addStudent">Add Student</a></p>
<p><a href="#viewStudents">View Students</a></p>
<div ng-view></div>
<script type="text/ng-template" id="addStudent.html">
<h2> Add Student </h2>
{{message}}
</script>
<script type="text/ng-template" id="viewStudents.html">
<h2> View Students </h2>
{{message}}
</script>
</div> <script>
var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/addStudent', {
templateUrl: 'addStudent.html',
controller: 'AddStudentController'
}).
when('/viewStudents', {
templateUrl: 'viewStudents.html',
controller: 'ViewStudentsController'
}).
otherwise({
redirectTo: '/addStudent'
});
}]); mainApp.controller('AddStudentController', function($scope) {
$scope.message = "This page will be used to display add student form";
}); mainApp.controller('ViewStudentsController', function($scope) {
$scope.message = "This page will be used to display all the students";
});
</script>
</body>
</html>
结果
在Web浏览器中打开textAngularJS.html。看到结果如下：
http://www.tuicool.com/articles/byAZB3
[转载]AngularJS视图的更多相关文章
- [Angularjs]视图和路由（四）
写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...
- [Angularjs]视图和路由（二）
写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...
- [Angularjs]视图和路由（三）
写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...
- 7.在AngularJS视图中实现指令
指令扩展了HTML的行为.可以创建自定义的HTML元素,属性和特定于应用程序的类与功能. 1.了解指令 指令是AngularJS模板标记和用于支持的JavaScript代码的组合.AngularJS指 ...
- [Angularjs]视图和路由（一）
写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...
- [转载]angularjs学习总结 详细教程
http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...
- AngularJS 视图和路由
在AngularJS之后引用angular-route 路由 ngRoute模块加载声明 AngularJS提供的when和otherwise两个方法来定义应用的路由 otherwise ...
- [转载]AngularJS入门教程04：双向绑定
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
- [转载]AngularJS入门教程03：迭代器
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...
随机推荐
- keycode值对照表
转载自:https://segmentfault.com/a/1190000005828048 字母和数字键的键码值(keyCode) 按键 键码 按键 键码 按键 键码 按键 键码 A 65 J 7 ...
- alpha版发布
网站网址:http://doeverying.applinzi.com/
- 第二阶段Sprint7
昨天:将“录制”及“保存”整合到一起,修复出现的Bug,使之能够正常运行. 今天:把视频录制整合到时间提醒里,实现视频提醒 遇到的问题:额,整进去直接就停止运行了..也没有报错..
- SE Springer小组《Spring音乐播放器》软件需求说明之四
4 运行环境规定 4．1设备 我们计划完成的音乐软件较小巧,功能并不复杂,在普通笔记本电脑中即可运行,并无特殊硬设备要求. 4．2支持软件 需要用到windows操作系统,用VS编写C/C++代码,还 ...
- 第二个spring冲刺第9天
其中一个队员在检查程序的BUG途中发现了几个重要的BUG比如答案乱码.程序闪退,弹出黑幕.于是我们决定先把这些问题解决再继续开发其他功能
- servlet编码乱码问题
继承HttpServlet 重写doGet(HttpServletRequest req,HttpServletResponse resp),doPost()方法 post提交时: protected ...
- 组件 -- Badge
.badge :长方形的徽章 badge的颜色: .badge-primary .badge-secondary .badge-success .badge-warning ... ... .badg ...
- thinkphp5报错
thinkPHP5配置nginx环境无法打开(require():open_basedirrestrictionineffect.File(/mnt/hgfs/ro (2018-07-19 22:05 ...
- js css样式操作代码（批量操作）
js css样式操作代码(批量操作) 作者: 字体:[增加 减小] 类型:转载 时间:2009-10-09 用js控制css样式,能让网页达到良好的的用户体验甚至是动画的效果.并且考虑到效率. ...
- Docker(八)-Docker创建Nginx容器
获取Nginx镜像 最简单的方法就是通过 docker pull nginx 命令来创建 Nginx容器. $ sudo docker pull nginx 或者: $ sudo docker pul ...