AngularJS入门教程的多视图切换使用示例

本文举例说明了AngularJS多视图切换的用法。分享给大家参考，如下：

在AngularJS应用程序中，我们可以在一个单独的文件中编写html片段，然后将这些片段加载到其他页面中。如果有多个片段文件，我们还可以根据用户的操作在控制器中动态加载不同的片段，从而达到切换视图的效果。

我们先来看看作者写的一个案例：

这两个字其实是分别写在page1.html和page2.html的两个html片段。以下是这两个文件的内容：

！-page1.html内容-div p 《南乡子登京口北固亭有怀》/p p PP去哪里看中国？冯光顾北大厦的全景。古往今来多少事兴衰，悠悠荡荡，长江滚滚流不息。/p p pTen千口袋还年轻，东南战争还没有停止。谁是世界英雄，曹流？生孩子如孙仲谋。/p/div！-page2.html内容-div p 《蝶恋花》/p p PTP危楼风薄，春愁极高，天昏地暗。在草色烟雾的余晖中，谁是沉默的将取决于光圈的意义。/p p建议稀里糊涂地喝醉，把酒当歌，把音乐弄得索然无味。随着衣服变宽，你永远不会后悔，你会为伊拉克而憔悴。/p/div接下来，让我们看看如何切换这两个片段。

！DOCTYPE html html ng-app=' route mod ' head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular-route . js '/脚本链接类型=' text/CSS ' href=' CSS/CSS 'route mode . config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider . when('/1 '，{ Templateurl : ' tutorial07/page 1 . html '，controller : ' multiview controller ' })。当('/2 '，{ template URLs : ' tutorial07/page 2 . html '，controller : ' multiview controller ' })})route mode . controller(' multiview controller '，function($scope，$log，$ location){ $ scope . init=function(){ $ location . path('/1 ')；} $ scope . prePage=function(){ $ log . info(' prePage ')；$ location . path('/1 ')；};$ scope . NextPage=function(){ $ log . info(' NextPage ')；$ location . path('/2 ')；};});/script/body/html在这里，我们需要使用AngularJs的路由模块ngRoute，模块代码封装在文件angular-route.js中，就像上一节一样，我们需要介绍一下。

脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular-route . js '/脚本并将其注入我们的模块，代码如下：

var route mod=angular . module(' route mod '，[' ngRoute '])；下一个任务是配置html片段的访问路径。我们需要调用模块的配置方法来配置$routeProvider服务。代码如下：

route mode . config([' $ RouterProvider '，function($ RouterProvider){ $ RouterProvider . when('/1 '，{ Templateurl : ' tutorial07/page 1 . html '，Controller: '多视图控制器' })。当('/2 '，{templateurl: '教程07/page2.html '，controller: '多视图控制器' })})我们通过ng-view指令定义了一个视图，并在控制器中调用了$location.path()方法

AngularJS源代码可以在这里下载。

希望本文对AngularJS编程有所帮助。