脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → AngularJS的视图

简介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在主模块中。

<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入门教程之学习环境搭建

    这篇文章主要介绍了AngularJS入门教程之学习环境搭建,本教程将指导您完成一个简单的应用程序创建过程,包括编写和运行单元测试、不断地测试应用,需要的朋友可以参考下
    2014-12-12
  • Angular通过angular-cli来搭建web前端项目的方法

    Angular通过angular-cli来搭建web前端项目的方法

    这篇文章主要介绍了Angular通过angular-cli来搭建web前端项目的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Angularjs 根据一个select的值去设置另一个select的值方法

    Angularjs 根据一个select的值去设置另一个select的值方法

    今天小编就为大家分享一篇Angularjs 根据一个select的值去设置另一个select的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • AngularJs基本特性解析(一)

    AngularJs基本特性解析(一)

    angularjs是javascript的一个框架，通过script标签添加到网页中。这篇文章主要介绍了AngularJs基本特性解析(一)的相关资料,需要的朋友可以参考下
    2016-07-07
  • angular2+nodejs实现图片上传功能

    angular2+nodejs实现图片上传功能

    这篇文章主要介绍了angular2+nodejs实现图片上传功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Angular2+如何去除url中的#号详解

    Angular2+如何去除url中的#号详解

    这篇文章主要给大家介绍了关于Angular 2+时如何去除url中#号的相关资料，文中先对#号去除的原因及方法进行详细的介绍和分析，然后通过示例代码给大家演示去除的方法，需要的朋友可以参考借鉴，下面随着小编来一起看看吧。
    2017-12-12
  • Angular应用的多语言设置问题解决示例

    Angular应用的多语言设置问题解决示例

    这篇文章主要为大家介绍了Angular应用的多语言设置问题解决示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • Angularjs中使用layDate日期控件示例

    Angularjs中使用layDate日期控件示例

    本篇文章主要介绍了Angularjs中使用layDate日期控件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • Angular处理未可知异常错误的方法详解

    Angular处理未可知异常错误的方法详解

    这篇文章主要给大家介绍了关于Angular如何处理未可知异常错误的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • Angular懒加载动态创建显示该模块下声明的组件

    Angular懒加载动态创建显示该模块下声明的组件

    这篇文章主要为大家介绍了Angular懒加载动态创建显示该模块下声明的组件，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-05-05

最新评论