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. Ubuntu 开机自动启动

    # 开机启动 2018-12-13在etc目录下建立loraserver.sh文件,[**注意**:设置脚本的运行属性]其内容为 #!/bin/bash cd /home/zqkj/loraserve ...

  2. WebSplider在线爬虫

    WebSplider是什么? WebSplider在线爬虫是一个结合Web技术与爬虫技术的项目. WebSplider支持Web页面进行爬虫配置,提交配置到服务器后,服务器端爬虫程序进行数据抓取,最后 ...

  3. 云容器云引擎：容器化微服务，Istio占C位出道

    在精彩的软件容器世界中,当新项目涌现并解决你认为早已解决的问题时,这感觉就像地面在你的脚下不断地移动.在许多情况下,这些问题很久以前被解决,但现在的云原生架构正在推动着更大规模的应用程序部署,这就需要 ...

  4. 机器学习初入门02 - Pandas的基本操作

    之前的numpy可以说是一个针对矩阵运算的库,这个Pandas可以说是一个实现数据处理的库,Pandas底层的许多函数正是基于numpy实现的 一.Pandas数据读取 1.pandas.read_c ...

  5. c# winform调用摄像头识别二维码

    首先我们需要引用两个第三方组件:AForge和zxing. Aforge是摄像头操作组件,zxing是二维码识别组件.都是开源项目.避免重复造轮子. 其实一些操作代码我也是参照别人的,若侵犯您的版权, ...

  6. Docker(四)-Dcoker镜像

    Docker 运行容器前需要本地存在对应的镜像,如果镜像不存在本地, Docker 会从镜像仓库下载(默认是Docker Hub公共注册服务器中的仓库). Docker Hub:https://hub ...

  7. ehcache、redis应用场景比较

    应用场景: ehcache是Hibernate中默认的CacheProvider,直接在jvm虚拟机中缓存,速度快,效率高:但是缓存共享麻烦,集群分布式应用不方便.  . 缓存数据有两级:内存和磁盘, ...

  8. Java之递归遍历目录，修改指定文件的指定内容

    EditProperties.java package PropertiesOperation.Edit; import java.io.File; /** * 替换指定Porpoerties文件中的 ...

  9. Java NIO 详解（二）

    异步IO 异步 I/O 是一种没有阻塞地读写数据的方法.通常,在代码进行 read() 调用时,代码会阻塞直至有可供读取的数据.同样, write()调用将会阻塞直至数据能够写入,关于同步的IO请参考 ...

  10. HGOI20180813 (NOIP2018 提高组 Day2 模拟试题)

    省常中省选提高Day2 继续 第一题就考了贪心,正解95pts的贪心策略第一印象是想到的,但是被自己否定掉了qwq,然后打了 不是正解的贪心,样例5没过(可怜)思路如下:先找出每个门对应可以通过的人数 ...