angularJS 视图view

最新推荐文章于 2021-08-24 16:25:21 发布

weixin_30713953

最新推荐文章于 2021-08-24 16:25:21 发布

阅读量308

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dyc-yoko/p/6270631.html

本文介绍了如何使用AngularJS创建单页应用(SPA)，重点讲解了ng-view指令、ng-template和$routeProvider服务的使用方法。通过示例展示了如何配置路由以实现不同视图间的导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

ng-view

开启视图，只是一个占位符，没有值例：<div ng-view></div>

ng-template

创建视图，通过script标签，类型为ng-template，包含了一个$routeProvider映射控制的id属性，id指向一个html页面

$routeProvider

主要网址的配置，是一个angular对象，将他们映射相应的html页面或者ng-template

使用

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

通过config来配置，配置项为数组，回调函数的参数为$routeProvider,利用$routeProvider的when方法，参数1为请求路径，参数2为对象

包含了templateURL指向视图，controller为该视图的的控制器，otherwise 指向默认视图，如果页面不存在，渲染视图可以用template：（标签+内容）