简介AngularJS的视图功能应用  更新时间:2015年06月17日 10:46:23   投稿:goldensun   这篇文章主要介绍了AngularJS的视图功能应用,包括ng-view和ng-template以及$routeProvider的使用,以及 $routeProvider 需要的朋友可以参考下  AngularJS支持通过在单个页面上的多个视图的单页应用。要做到这一点AngularJS提供ng-view 和 ng-template指令,以及 $routeProvider 服务。 ng-view ng-view 标记只是简单地创建一个占位符,是一个相应的视图(HTML或ng-template视图),可以根据配置来放置。 使用 定义一个div与ng-view在主模块中。 … ng-template ng-template 指令是用来创建使用script标签的HTML视图。它包含一个用于由$routeProvider映射控制器视图“id”属性。 使用 定义类型作为主模块中 ng-template 的脚本块。 … $routeProvider $routeProvider是组网址的配置,将它们映射相应的HTML页面或 ng-template,并附加一个控制器使用相同键的服务。 使用 定义类型作为主模块中 ng-template 的脚本块。 …   使用 定义主模块的脚本块,并设置路由配置。 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”是用来设置该视图对应的控制器; 例子 下面的例子将展示上述所有指令。 testAngularJS.html Angular JS Views AngularJS Sample Application Add Student View Students 结果 在Web浏览器中打开textAngularJS.html。看到结果如下: 您可能感兴趣的文章: AngularJS入门教程之路由与多视图详解 AngularJS基于ui-route实现深层路由的方法【路由嵌套】 AngularJS通过ng-route实现基本的路由功能实例详解 AngularJS监听路由的变化示例代码 AngularJS 路由详解和简单实例 AngularJS 路由和模板实例及路由地址简化方法(必看) 使用AngularJS对路由进行安全性处理的方法 Angularjs制作简单的路由功能demo AngularJS入门教程之多视图切换用法示例 模板视图和AngularJS之间冲突的解决方法 AngularJS 视图详解及示例代码 AngularJS实现使用路由切换视图的方法 AngularJS 视图 相关文章 angular中不同的组件间传值与通信的方法 本篇文章主要介绍了angular中不同的组件间传值与通信的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 Angular2 自定义validators的实现方法 angular 当需要form表单需要验证时,angular自带了许多校验器,但是很多时候自带的无法满足业务需求,这时候就需要自定义的校验器,下面通过本文给大家分享Angular2 自定义validators的实现方法,需要的朋友参考下吧 2017-07-07 AngularJS ng-bind-template 指令详解 本文注意介绍AngularJS ng-bind-template 指令,这里把相关资料整理了一下,并附实例代码,有需要的小伙伴可以参考下 2016-07-07 详解Angualr 组件间通信 本篇文章主要介绍了Angualr 组件间通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-01-01 Angular 输入框实现自定义验证功能 AngularJS 表单和控件可以验证输入的数据。本文给大家介绍Angular 输入框实现自定义验证功能,非常不错,具有参考借鉴价值,需要的朋友参考下 2017-02-02 angular中ui calendar的一些使用心得(推荐) 下面小编就为大家带来一篇angular中ui calendar的一些使用心得(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-11-11 Angular设置title信息解决SEO方面存在问题 爬虫在检索seo信息的时候会读不了js给其赋的值,导致搜索引擎收录不了或者收录了无效的信息,下面本文给大家介绍Angular设置title信息解决SEO方面存在问题,需要的朋友可以参考下 2016-08-08 Angularjs 手写日历的实现代码(不用插件) 本篇文章介绍了Angularjs 手写日历的实现代码(不用插件),整理了详细的代码,非常具有实用价值,需要的朋友可以参考下 2017-10-10 Angular的事件和表单详解 这篇文章主要为大家详细介绍了Angular的事件和表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-12-12 9种改善AngularJS性能的方法 这篇文章主要为大家详细介绍了9种改善AngularJS性能的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-11-11 最新评论

 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”是用来设置该视图对应的控制器;

例子

下面的例子将展示上述所有指令。
testAngularJS.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。看到结果如下:

2015617104059841.jpg (560×429)

您可能感兴趣的文章:

  • AngularJS入门教程之路由与多视图详解
  • AngularJS基于ui-route实现深层路由的方法【路由嵌套】
  • AngularJS通过ng-route实现基本的路由功能实例详解
  • AngularJS监听路由的变化示例代码
  • AngularJS 路由详解和简单实例
  • AngularJS 路由和模板实例及路由地址简化方法(必看)
  • 使用AngularJS对路由进行安全性处理的方法
  • Angularjs制作简单的路由功能demo
  • AngularJS入门教程之多视图切换用法示例
  • 模板视图和AngularJS之间冲突的解决方法
  • AngularJS 视图详解及示例代码
  • AngularJS实现使用路由切换视图的方法
张贴在3