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. ELK安装部署

    一.ELK简介 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部.Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大 ...

  2. 《杜增强讲Unity之Tanks坦克大战》10-相机控制

    10 相机控制 本节主要学习如何控制相机自动调整位置和焦距,使两个坦克一直同时在视野内.   image 在Hierarchy点击右键   image 点击 Create Empty,生成空对象,改名 ...

  3. Docker-安装(CentOS7)

    1.安装需要的软件包:yum-util提供yum-config-manager功能 yum install -y yum-utils device-mapper-persistent-data lvm ...

  4. ffmpeg sox 音频转换 MP3 转 wav

    转自:https://blog.csdn.net/xiaoshulf/article/details/78657172 1 windows 下 mp3 文件和 wav 文件的 转换 实现代码: 1 f ...

  5. Daily Scrumming* 2015.12.17（Day 9）

    一.团队scrum meeting照片 二.成员工作总结 姓名 任务ID 迁入记录 江昊 任务1077 https://github.com/buaaclubs-team/temp-front/com ...

  6. c# 导出数据到excel

    直接上代码: private void button1_MouseDown(object sender, MouseEventArgs e) { if (e.Button == MouseButton ...

  7. 对《OA云》作品的分析

    对<OA云>作品的分析 软件描述:<OA云>是一款基于移动端的企业日常事物办公软件,企业人员进入该产品后可以对当天的出勤情况进行签到,系统会自动的识别以及记录下员工的实时签到信 ...

  8. YOLO（You Only Look Once）

    参考 YOLO(You Only Look Once)算法详解 YOLO算法的原理与实现 一.介绍 YOLO算法把物体检测问题处理成回归问题,用一个卷积神经网络结构就可以从输入图像直接预测boundi ...

  9. SDN开源项目以及组织机构

    SDN开源项目以及组织机构 以上内容均摘自网络 如有侵权,请转告笔者,立即删除 两大组织 ONF (Open Networking Foundation) Google.Facebook.Micros ...

  10. jdk命令行工具：jstat与jmap

    转自文章:http://blog.csdn.net/gzh0222/article/details/8538727 C:\Users\Administrator\Desktop>jstat -g ...