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移动电商实战 --（47）详细页_Flutter_html插件的使用

    详情里面是hemlt和图片组成的,但是flutter是不支持html的所以需要其他插件 flutter webview plugin:这个不太好用 flutter_html:用这个插件 先解决之前一个 ...

  2. 微信小程序 scroll-view 填满剩余可用高度

    根据微信小程序 scroll-view 文档所述,scroll-view必须给定一个固定高度.那么如果我们想要让它自动填充剩余高度,该怎么办呢? 前言 在说出我的解决方案之前,先来看一下我的页面设计, ...

  3. 蜜汁头文件&&slow slow read

    slow slow read 板子 inline int read() { ; char last=' ',ch=getchar(); ') last=ch,ch=getchar(); +ch-',c ...

  4. keras 在train_on_batch中启用tensorboard

    def write_log(callback, names, logs, batch_no): for name, value in zip(names, logs): summary = tf.Su ...

  5. Django学习笔记009-django models进行数据库增删查改

    引入models的定义 from app.models import  myclass class  myclass(): aa =  models. CharField (max_length=No ...

  6. Docker 镜像小结---操作指令介绍(七)

    目录 一.搜索镜像 二.下载镜像 三.查看本地镜像 四.显示镜像构建历史 五.删除镜像 六.镜像创建 七.上传镜像 八.给镜像打 tag 九.存出和载入镜像 一.搜索镜像 很多情况下我们可能需要下载某 ...

  7. 对图片清晰度问题，纠结了一晚上。清理了下Libray，瞬间变清晰了，泪奔

    对图片清晰度问题,纠结了一晚上.清理了下Libray,瞬间变清晰了,泪奔

  8. MySQL的注入总结

    0x01 MySQL 5.0以上和MySQL 5.0以下版本的区别 MySQL5.0以上版本存在一个叫information_schema的数据库,它存储着数据库的所有信息,其中保存着关于MySQL服 ...

  9. leetcode903 Valid Permutations for DI Sequence

    思路: dp[i][j]表示到第i + 1个位置为止,并且以剩下的所有数字中第j + 1小的数字为结尾所有的合法序列数. 实现: class Solution { public: int numPer ...

  10. spring 中常用的两种事务配置方式

    引用:http://blog.csdn.net/qh_java/article/details/51811533 引用:http://www.cnblogs.com/rushoooooo/archiv ...