[转载]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：迭代器
我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...
随机推荐
- GitHub 新手教程 一，GitHub 注册
1,注册地址: https://github.com/ 2,输入账号.邮箱.密码: 3,选择 Free 免费账号: 4,选择一些基本信息(翻译后中文见下面的图): 翻译如下: 5,打开你注册用的邮箱, ...
- js中文汉字按拼音排序
JavaScript 提供本地化文字排序,比如对中文按照拼音排序,不需要程序显示比较字符串拼音. String.prototype.localeCompare 在不考虑多音字的前提下,基本可以完美实现 ...
- LeetCode 167. 两数之和 II - 输入有序数组
题目: 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的 ...
- Android实现Service永久驻留
说实话,这是一种流氓行为.但有些时候又是不得不需要的.比如微信的NotifyReceiver.现在抛开这些伦理的东西不讲,我们只是来看看技术上怎么实现.在后台运行的service有几个途径可以将其停止 ...
- SQL Server 删除重复数据只保留一条
DELETE FROM Bus_TerminalMessage_Keywords WHERE Content IN (select Content from Bus_TerminalMessage_K ...
- DHCP全局配置文件解析
作用 参数 ddns-update-style 类型 定义DNS服务动态更新的类型,类型包括:none(不支持动态更新), interim (互动更新模式)与ad-hoc(特殊更新模式) allow ...
- poi中如何自定义日期格式
1. poi的“Quick Guide”中提供了 “How to create date cells ”例子来说明如何创建日期单元格,代码如下: HSSFCellStyle cellStyle = w ...
- java的属性只能在类里面 方法外面定义
java的属性只能在类里面 方法外面定义 区别于python:python 既能在类里面(类属性) 又能在方法里面定义属性(实例属性)
- Swap HDU - 2819 （有关矩阵的二分匹配）
题意见大佬:https://www.cnblogs.com/gj-Acit/archive/2013/08/17/3265502.html 题目大意很明确,交换图的某些行或者是某些列(可以都换),使得 ...
- MT【199】映射的个数
(2018中科大自招)设$S=\{1,2,3,4,5\}$则满足$f(f(x))=x$的映射:$S \longrightarrow S$的个数____解答:由于$a\ne b$时必须满足$f(a)=b ...