AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令，以及 $routeProvider 服务。

ng-view

ng-view 标记只是简单地创建一个占位符，是一个相应的视图(HTML或ng-template视图)，可以根据配置来放置。

使用

定义一个div与ng-view在主模块中。

<div ng-app="mainApp">

...

   <div ng-view></div>

</div>

ng-template

ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性。

使用

定义类型作为主模块中 ng-template 的脚本块。

<div ng-app="mainApp">

...

   <script type="text/ng-template" id="addStudent.html">

      <h2> Add Student </h2>

         {{message}}

   </script>

</div>

$routeProvider

$routeProvider是组网址的配置，将它们映射相应的HTML页面或 ng-template，并附加一个控制器使用相同键的服务。

使用

定义类型作为主模块中 ng-template 的脚本块。

<div ng-app="mainApp">

...

   <script type="text/ng-template" id="addStudent.html">

      <h2> Add Student </h2>

         {{message}}

   </script>

</div>

使用

定义主模块的脚本块，并设置路由配置。

 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'

               });

         }]);

以下是在上面的例子中需要考虑的重要问题

  • $routeProvider被定义为使用关键字作为'$routeProvider“下mainApp模块的配置功能；

  • $routeProvider当定义了URL“/addStudent”映射到“addStudent.html”。 addStudent.html应存在于相同的路径主要的html 页面。如果htm页面没有定义，那么ng-template被id=“addStudent.html”使用。我们已经使用了ng-template；

  • “otherwise”是用来设置的默认视图；

  • “conlloer”是用来设置该视图对应的控制器；

例子

下面的例子将展示上述所有指令。

<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>

引入其它页面

<body>

    <div ng-app="mainApp">

        <p><a href="#about">About</a></p>

        <p><a href="#contact">Contact</a></p>

        <div ng-view></div>

    </div>

    <script>

        var mainApp = angular.module("mainApp", ['ngRoute']);

        mainApp.config(['$routeProvider',

         function($routeProvider) {

             $routeProvider.

                when('/about', {

                    templateUrl: 'page-about.html',

                    controller: 'AddStudentController'

                }).

                when('/contact', {

                    templateUrl: 'page-contact.html',

                    controller: 'ViewStudentsController'

                });

         }]);

        mainApp.controller('AddStudentController', function($scope) {

            $scope.message = "This page will be used to display add student form";

        });

        </script>

</body>

AngularJS视图 ng-view的更多相关文章

  1. 1.Android 视图及View绘制分析笔记之setContentView

    自从1983年第一台图形用户界面的个人电脑问世以来,几乎所有的PC操作系统都支持可视化操作,Android也不例外.对于所有Android Developer来说,我们接触最多的控件就是View.通常 ...

  2. ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view)

    在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是首先将修改点代码,使得发布日期属性(ReleaseDate)看上去更好.打开Models \ Movie ...

  3. 视图(View)与部分视图(Partial View)之间数据传递

    写ASP.NET MVC程序,我们经常需要把数据从视图(View)传递至部分视图(Partial View) 或者相反. 今天Insus.NET使用 ControllerBase.TempData 进 ...

  4. 截取视图某一段另存为部分视图(Partial View)

    在做ASP.NET MVC后台管理程序时,根据程序需要,Isus.NET需要实现一个功能,就是动态截取视图某一段另存为部分视图Partial View. 思路为在视图中,使用jQury的程序截图以及P ...

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

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

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

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

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

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

  8. iphone绘图的几个基本概念CGPoint、CGSize、CGRect、CGRectMake、window（窗口）、视图（view）

    我一般情况下不会使用interface builder去画界面,而是用纯代码去创建界面,不是装B,而是刚从vi转到xcode不久,不太习惯interface builder而已.当然如果需要我也会使用 ...

  9. 验证编辑方法(Edit method)和编辑视图(Edit view)

    ASP.NET MVC 5 - 验证编辑方法(Edit method)和编辑视图(Edit view) 在本节中,您将验证电影控制器生成的编辑方法(Edit action methods)和视图.但是 ...

  10. SAP HANA中创建计算视图(Calculation View)

    [Step By Step]SAP HANA中创建计算视图(Calculation View) Demo Instruction: 该视图将两个表AUDIOBOOKS和BOOKS中的数据进行连接,并作 ...

随机推荐

  1. office web apps 在线问答预览

    最近在做项目时,需要用到在线文档预览,看过明道的一篇搭建office web apps服务的文章,但是由于时间的关系,没有仔细研究,这几天有时间,就拿出来研究了下,折腾了几天终于完成了部署,然后就搬过 ...

  2. flume 诞生背景 数据同步

    flume一开始是cloudlera的项目 当时他们的工程师需要一次次地为客户编写工具 来实现数据的自动化导入

  3. （八）UML之状态图

    一.概念 状态图(Statechart Diagram)主要用于描述一个对象在其生存期间的动态行为,表现为一个对象所经历的状态序列,引起状态转移的事件(Event),以及因状态转移而伴随的动作(Act ...

  4. 【ARTS】01_37_左耳听风-201900722~201900728

    ARTS: Algrothm: leetcode算法题目 Review: 阅读并且点评一篇英文技术文章 Tip/Techni: 学习一个技术技巧 Share: 分享一篇有观点和思考的技术文章 Algo ...

  5. 用Python做一个简单的小游戏

    学习总是枯燥的,对于Python小白的我来讲,更是乏味的.为了提高学习的兴趣,今天我就来写一个小程序练练手. 数字猜谜游戏相信大家都不陌生,A给出最小值最大值,B写一个该范围内的数,A猜测写下的是多少 ...

  6. laravel的ORM转为原生sql

    注:mysql测试成功,mongoDB测试失败//将laravel的ORM转为原生sql $SubProfits为laravel的ORM对象 $SubProfits = model::where('i ...

  7. 【OpenGL学习】 四种绘制直线的算法

    我是用MFC框架进行测试的,由于本人也没有专门系统学习MFC框架,代码若有不足之处,请指出. 一,先来一个最简单的DDA算法 DDA算法全称为数值微分法,基于微分方程来绘制直线. ①推导微分方程如下: ...

  8. blender-编译源码

    1. 获得源码,目前是以 2.8 版本为例子 https://www.blender.org/download/  上,可以直接下面源码 2.  解压,在blender-2.80 目录下,运行 mak ...

  9. 安装Node.js教程

    前期准备 1.Node.js 简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node ...

  10. js删除array数组中元素

    for(var i = 0; i < array.length; i++) { if(-1 != array[i]) { array.splice(i, 1); i--; } } 上面if就是判 ...