AngularJS 视图

2021-11-15 13:23

  AngularJS支持通过单个页面上的多个视图单页应用。要做到这一点AngularJS提供了ng-view 、 ng-template 指令和 $routeProvider 服务。

AngularJS 视图

  ng-view

  NG-view标记简单地创建一个占位符,其中一个相应的视图(HTML或ng-template视图),可以根据配置来放置。

  使用

  定义主模块使用一个 div 及ng-view。

<div ng-app="mainApp">
...
   <div ng-view></div>

</div>    

  ng-template

  ng-template指令用于创建使用脚本标记的HTML视图。它包含一个“id”属性用于由 $routeProvider 映射带有控制器的视图。

  使用

  定义脚本块类型为 ng-template 的主模块 。

div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    

  $routeProvider

  $routeProvider是用来设置URL配置的关键服务,映射与对应的HTML页面或ng-template,并附加相同的控制器。

  使用

  定义脚本块类型为 ng-template 的主模块 。

<div ng-app="mainApp">
...
   <script type="text/ng-template" id="addStudent.htm">
      <h2> Add Student </h2>
         {{message}}
   </script>

</div>    

  使用

  定义脚本块及主模块,并设置路由配置。

var mainApp = angular.module("mainApp", ['ngRoute']);
      
      mainApp.config(['$routeProvider',
         function($routeProvider) {
            $routeProvider.
               when('/addStudent', {
                  templateUrl: 'addStudent.htm',
                  controller: 'AddStudentController'
               }).
               when('/viewStudents', {
                  templateUrl: 'viewStudents.htm',
                  controller: 'ViewStudentsController'
               }).
               otherwise({
                  redirectTo: '/addStudent'
               });
         }]);

  以下是在上面的例子中要考虑的重点。

  $ routeProvider定义作为一个函数在mainApp模块的配置下,使用键 '$routeProvider'.

  $routeProvider定义URL “/addStudent”,然后映射到“addStudent.htm”。addStudent.htm 存在于相同的路径的主html页面。如果HTM网页没有定义,那么NG-模板使用id="addStudent.htm"。我们使用ng-template。

  "otherwise" 用于设置的默认视图。

  "controller" 用于为视图设置相应的控制器。

  以上就是小编为大家整理发布的“AngularJS 视图”一文,更多相关内容尽在开课吧广场Web教程频道。

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用1
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营