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. Flutter移动电商实战 --（49）详细页_Stack制作底部工具栏

    一直悬浮在最下面的 Stack层叠组件.里面用Row 可以横向布局 开始 stack如果想定位就要用position去定位. 修改return返回值的这个地方 大R刷新查看效果,可以看到固定的在左下角 ...

  2. 123457123456#0#-----com.twoapp.YiZhiFanPai08--前拼后广--儿童益智记忆翻牌jiemei

    com.twoapp.YiZhiFanPai08--前拼后广--儿童益智记忆翻牌jiemei

  3. tensorflow学习 从入门到实战(转)

    原文作者:zhaozhengcoder链接:https://www.jianshu.com/p/27a2fb320934來源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处. ...

  4. 使用PHP实现命令模式（转）

    <?php /** * 命令模式 2010-08-21 sz * @author phppan.p#gmail.com http://www.phppan.com * 哥学社成员(http:// ...

  5. Redis源码解析

    一.src/server.c 中的redisCommandTable列出的所有redis支持的命令,其中字符串命令包括从get到mget:列表命令从rpush到rpoplpush:集合命令包括从sad ...

  6. linux lnmp下无法使用mail发邮件的两种解决方法

    在配置了lnmp环境后,出现了mail函数不能发送邮件的问题,其实有两种方法,一是使用sendmail组件,而是使用postfix. 方法一,使用sendmail组件来发邮件  1.安装 sendma ...

  7. OWASP TOP 10（OWASP十大应用安全风险）

    TOP1-注入 当不受信任的数据作为命令或查询的一部分发送到解释器时,会发生注入漏洞,例如SQL,NoSQL,OS,LDAP注入(轻量目录访问协议),xpath(XPath即为XML路径语言,它是一种 ...

  8. OpenGL学习笔记 之三 （简单示例 太阳月亮地球）

    #include<glut.h> // 太阳.地球和月亮 // 假设每个月都是30天 // 一年12个月,共是360天 ;//day的变化:从0到359 void myDisplay(vo ...

  9. 【数据库开发】在Windows上以服务方式运行 MSOPenTech/Redis

    在Windows上以服务方式运行 MSOPenTech/Redis ServiceStack.Redis 使用教程里提到Redis最好还是部署到Linux下去,Windows只是用来做开发环境,现在这 ...

  10. 深入理解linux内核-内存寻址

    逻辑地址:由一个段和偏移量组成的地址线性地址(虚拟地址):物理地址:CPU的物理地址线相对应的地址32或36位 多处理器系统中每个CPU对应一个GDT 局部线程存储:用于线程内部的各个函数调用都能访问 ...