📜  AngularJS-视图

📅  最后修改于: 2020-10-27 02:52:34             🧑  作者: Mango


AngularJS通过在单个页面上的多个视图来支持Single Page Application。为此,AngularJS提供了ng-view和ng-template指令以及$ routeProvider服务。

ng-view指令

ng-view指令仅创建一个占位符,可根据配置在其中放置相应的视图(HTML或ng-template视图)。

用法

在主模块中使用ng-view定义div。

...

ng-template指令

ng-template指令用于使用脚本标签创建HTML视图。它包含id属性,该属性由$ routeProvider用来与控制器映射视图。

用法

在主模块中将脚本块定义为ng-template。

...

$ routeProvider服务

$ routeProvider是一项关键服务,用于设置URL的配置,将它们与相应的HTML页面或ng-template映射,并为其附加控制器。

用法1

在主模块中将脚本块定义为ng-template。

...

用法2

使用主模块定义脚本块并设置路由配置。

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.when定义URL“ / addStudent”,该URL映射到“ addStudent.htm”。 addStudent.htm应该与HTML主页面位于相同的路径中。如果未定义HTML页面,则需要将ng-template与id =“ addStudent.htm”一起使用。我们使用了ng-template。

  • “否则”用于设置默认视图。

  • “控制器”用于为视图设置相应的控制器。

以下示例显示了所有上述指令的使用。

testAngularJS.htm

Angular JS Views
      
      
   
   
   
      

AngularJS Sample Application

Add Student

View Students

输出

在网络浏览器中打开文件testAngularJS.htm并查看结果。