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. Unity 音频合并

    将多个音频组合起来进行播放 代码如下: ; [SerializeField] AudioClip s1; [SerializeField] AudioClip s2; [SerializeField] ...

  2. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 2 Tables and Indexes中的Clustered Indexes一节（翻译）

    <Pro SQL Server Internals> 作者: Dmitri Korotkevitch 出版社: Apress出版年: 2016-12-29页数: 804定价: USD 59 ...

  3. Windos 下python2.7安装 pymssql 解决方案

    最近在学python,到安装pymssql这一块遇到了不少问题. 第一:如何安装python 模块,也是最主要的问题. 可以这么理解:在安装python其它模块之前,可以先安装一个负责安装模块的模块. ...

  4. C++中清空缓冲区

    C++中标准输入cin有多种输入方式.. 这篇文章罗列的还是简要易懂的.C++输入cin详解...如果只是简单的使用cin>>的话,会单个token的读入.但是会忽略换行符,空格,制表符等 ...

  5. Windows server 自带的 .net版本

    1. Win2012r2 所带的版本: 2. Win2016 所带的版本 4.6 Win2019 自带的 .net版本为: 4.7 4. 然后比较 Win2008r2sp1 使用的是 .net3.5 ...

  6. spirngcloud文件

    https://blog.csdn.net/liumiaocn/article/details/54309866

  7. 600字让你读懂Git

    设想你现在位于 alpha/ 目录下,这里有一个文本文件 number.txt,里面的内容只有一个词:“first”. 现在执行 git init 将这个 alpha 文件夹初始化为 Git 仓库. ...

  8. angular 可信的html 指令

    angular.module('app').filter('trustHtml', ($sce) => { return (html) => { if(typeof(html)==&quo ...

  9. Semantic Versioning Specification & 语义化版本

    Semantic Versioning Specification & 语义化版本 Semantic Versioning Specification http://semver.org 16 ...

  10. 原理分析dubbo分布式应用中使用zipkin做链路追踪

    zipkin是什么 Zipkin是一款开源的分布式实时数据追踪系统(Distributed Tracking System),基于 Google Dapper的论文设计而来,由 Twitter 公司开 ...