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视图的更多相关文章

  1. [Angularjs]视图和路由（四）

    写在前面 关于angularjs的路由的概念基本上这篇就要结束了,通过学习,以及在实际项目中的实践,还是比较容易上手的.自己也通过angularjs做了一个在app上的一个模块,效果还是可以的. 系列 ...

  2. [Angularjs]视图和路由（二）

    写在前面 上篇文章主要介绍了视图和路由的基本概念,并在文章最后举了一个简单的使用案例.这篇文章将继续学习路由的配置,及相关参数的说明. 系列文章 [Angularjs]ng-select和ng-opt ...

  3. [Angularjs]视图和路由（三）

    写在前面 上篇文章主要介绍了路由中when方法的第二个参数,常见的几个属性,以及作用.本篇文章,将介绍和路由相关的几个常见的服务. 系列文章 [Angularjs]ng-select和ng-optio ...

  4. 7.在AngularJS视图中实现指令

    指令扩展了HTML的行为.可以创建自定义的HTML元素,属性和特定于应用程序的类与功能. 1.了解指令 指令是AngularJS模板标记和用于支持的JavaScript代码的组合.AngularJS指 ...

  5. [Angularjs]视图和路由（一）

    写在前面 对单页应用来讲,视图和路由的作用可以从一个视图跳转到另外一个视图,可以合理管理用户在使用过程中看到的界面. 将视图分解成布局和模版视图,并且根据用户当前访问的URL来展示对应的视图,将会是一 ...

  6. [转载]angularjs学习总结 详细教程

    http://blog.csdn.net/yy374864125/article/details/41349417#t75 目录(?)[-] 前言 AngularJS概述 AngularJS是什么 A ...

  7. AngularJS 视图和路由

    在AngularJS之后引用angular-route  路由   ngRoute模块加载声明   AngularJS提供的when和otherwise两个方法来定义应用的路由   otherwise ...

  8. [转载]AngularJS入门教程04：双向绑定

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

  9. [转载]AngularJS入门教程03：迭代器

    我们在上一步做了很多基础性的训练,所以现在我们可以来做一些简单的事情喽.我们要加入全文检索功能(没错,这个真的非常简单!).同时,我们也会写一个端到端测试,因为一个好的端到端测试可以帮上很大忙.它监视 ...

随机推荐

  1. jquery自动获取项目url路径

    //很多时候我们需要使用当前项目路径,但是如果把项目路径写死,会带来很多不便,此时就需要自动获取项目路径.//我们可以根据jquery来进行自动获取项目路径,获取方法如下function getRoo ...

  2. Hive的一些理解

    首先谈一下关于hive和hbase的区别的疑问(完全不是一个东西): 本质上来说hive和hbase没什么关系,虽然都是表,查数据等,但是他们根本就不是一个层面的东西 hive就是一个rapduce的 ...

  3. allegro对齐操作

    在placement  edit模式下 选中元件,右键对齐即可.

  4. jmeter实战1

  5. Jenkins 构建运行java程序

    我们将在Jenkins建立执行一个简单的 HelloWorld 应用程序,构建和运行Java程序.打开网址:http://localhost:8080/jenkins 第1步- 转到Jenkins 仪 ...

  6. NameNode内存溢出和DataNode请求超时异常处理

    问题背景 春节假期间,接连收到监控程序发出的数据异常问题,赶忙连接上跳板机检查各服务间的状态,发现Datanode在第二台.第三台从节点都掉线了,通过查看Datanode和Namenode运行日志,发 ...

  7. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  8. 基于RYU的拓扑发现

    基于RYU的拓扑发现 前言 本次实验是一个基于RYU的拓扑发现功能.参考了呈神的实现方式,并加了一些自己实现方式,做了一些数据结构的改动. 数据结构 link_to_port 字典 有两种关系: 一是 ...

  9. 第十一周PSP&进度条

    PSP 一.表格: D日期     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 11月24号 站立会议 分配任务&设计final方案 1 ...

  10. MySQL基础（二）：视图、触发器、函数、事务、存储过程

    一.视图 视图是一个虚拟表(非真实存在),其本质是[根据SQL语句获取动态的数据集,并为其命名],用户使用时只需使用[名称]即可获取结果集,并可以将其当作表来使用. 视图和上一篇学到的临时表搜索类似. ...