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. 深入浅出etcd系列 – 心跳和选举

    作者:宝爷 校对:DJ 1.绪论 etcd作为华为云PaaS的核心部件,实现了PaaS大多数组件的数据持久化.集群选举.状态同步等功能.如此重要的一个部件,我们只有深入地理解其架构设计和内部工作机制, ...

  2. 激活IntelliJ IDEA到2100年

    1.下载破解文件(破解版本2018.2,其他版本未尝试) http://idea.lanyus.com/jar/JetbrainsIdesCrack-4.2-release-sha1-3323d5d0 ...

  3. 技术进阶：Kubernetes高级架构与应用状态部署

    在了解Kubernetes应用状态部署前,我们先看看Kubernetes的高级架构,方便更好的理解Kubernetes的状态. Kubernetes 的高级架构 包括应用程序部署模型,服务发现和负载均 ...

  4. B1004. 成绩排名

    这一题总算是把C++的重载活学活用了一回,节省了很多脑细胞. #include<bits/stdc++.h> using namespace std; struct student{ st ...

  5. 软件工程实践-git的使用

    ² Github使用心得 其实以前就注册过一个github账号,不过那时只不过是因为在网上看到这个挺对于程序员有着重大作用就顺手去弄了,从未使用过,直到这次软工实践需要我才从新回想起来. 之前的几篇随 ...

  6. final发布评论Ⅱ

    奋斗吧兄弟:奋斗吧兄弟团队提供了草原.水域.田地三种环境可以进行选择.功能如下:添加自定义生物功能可以增加生物种类,但是无法设置捕食关系,这里希望想办法完善.生物除了图片方式以外,还可以以文字的方式展 ...

  7. node.js处理url常用方法

    处理非阻塞I/O /* *回调函数的方法 异步 */ /* function f(cb){ fs.readFile('./4',(err,data)=>{ cb(data.toString()) ...

  8. Windows 7 上面 redis 启动报错的处理

    Windows 7或者是 win10 上面 安装redis 的windows 3.2.100 的版本 启动报错: Creating Server TCP listening socket *:: li ...

  9. [菜鸟]HTTP 与 HTTPS 的区别

    HTTP 与 HTTPS 的区别 分类 编程技术 基本概念 HTTP(HyperText Transfer Protocol:超文本传输协议)是一种用于分布式.协作式和超媒体信息系统的应用层协议. 简 ...

  10. linux 开机直接进入命令行

    一.图形界面和命令行切换 linux系统在启动图形化界面后,可以在图形界面和命令行之间来回切换,linux提供了6个命令行终端(terminal或Console),分别为tty1——tty6,使用Ct ...