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. world: 对比两个文档

    1. 2. 3. 4.

  2. php接口数据安全解决方案（一）

    前言 目录介绍 登录鉴权图 接口请求安全性校验整体流程图 代码展示 演示用户登录 演示获取用户信息 文章完整代码地址 后记 前言 目的: 1.实现前后端代码分离,分布式部署 2.利用token替代se ...

  3. Bitmap之getDensity和setDensity函数

    package com.loaderman.customviewdemo; import android.app.Activity; import android.graphics.Bitmap; i ...

  4. 002-01-RestTemplate-配置使用说明

    一.概述 Spring RestTemplate 是 Spring 提供的用于访问 Rest 服务的客户端,RestTemplate 提供了多种便捷访问远程Http服务的方法,能够大大提高客户端的编写 ...

  5. Apache配置优化之开启GZip传输

    1.确保apache已经编译的模块里有mod_deflate模块 2.确保apache的配置文件里引入了压缩的模块 3.确保要开启Gzip压缩的虚拟主机配置里有如下配置,并重启apache服务:如果要 ...

  6. activiti的坑

    maven配置: <dependency> <groupId>org.activiti</groupId> <artifactId>activiti-e ...

  7. 树莓派连接显示器后设置ssh服务开机自动开启

    进入命令行,然后执行: cd /boot sudo touch ssh sudo restart -r now 然后就重新启动了,重启好了会有依据提示. 然后可以输入ssh localhost进行一下 ...

  8. iOS——使用FMDB进行数据库操作（转载）

    iOS 使用FMDB进行数据库操作 https://github.com/ccgus/fmdb [摘要]本文介绍iOS 使用FMDB进行数据库操作,并提供详细的示例代码供参考. FMDB 使用方法 A ...

  9. 搭建iOS开发环境

    搭建ios开发环境 1.  直接购买Apple公司的电脑,如MacBook笔记本电脑,默认自带了Mac OS X操作系统. 2.下载安装Xcode和SDK     登录https://develope ...

  10. ERNIE 2.0 理解与使用

    更新中 更新时间:2019-12-06 17:43:27 实验需要,在自己学习的过程中做如下笔记,欢迎指正,欢迎交流. 1. ERNIE简述 ERNIE和BERT一样,也是基于transformer来 ...