AngularJS入门教程之多视图切换用法示例

AngularJS多视图切换：动态载入HTML碎片文件

在AngularJS应用中，我们常常需要将HTML代码片段（或称为碎片）写在单独的文件中，然后在需要的时候动态地加载到页面中。这种技术尤其在需要多视图切换的场景中非常有用。下面是一个简单的实例来展示如何在AngularJS中实现这种功能。

假设我们有两个HTML碎片，分别存储在`page1.html`和`page2.html`这两个文件中。这两个文件的内容分别是《南乡子·登京口北固亭有怀》和《蝶恋花》的词文。

我们需要在AngularJS的控制器中定义一个变量来保存当前要显示的视图。我们可以将这个变量命名为`currentView`。

然后，我们可以使用AngularJS的`$http`服务来加载外部的HTML文件。当`currentView`变化时，我们就使用`$http`服务加载对应的HTML文件，并使用`$compile`服务将加载的HTML编译成AngularJS模板。

假设我们已经有了这样的控制器代码：

```javascript

app.controller('MyController', function($scope, $http, $compile, $sce) {

$scope.currentView = 1; // 初始视图，假设为page1

$scope.loadView = function(viewNumber) {

$http.get('path_to_your_html_file/' + viewNumber + '.html').then(function(response) {

var content = $sce.trustAsHtml(response.data); // 因为从外部源加载HTML，需要使用$sce服务进行信任

var element = $compile(content)($scope); // 使用$compile服务将HTML编译成AngularJS模板

$scope.currentView = viewNumber; // 更新当前视图

});

};

});

```

AngularJs的路由魅力：ngRoute模块的神奇之旅

在一个繁华的网页应用中，我们如何展示不同的内容页面而不进行页面刷新呢？答案是使用AngularJs的路由模块ngRoute。让我们深入了解一下这个强大的模块，它是如何让我们的网页应用更加动态和用户友好的。

想象一下，我们有一个基本的网页结构，包括头部、主体内容和底部。在主体内容部分，我们想要根据不同的用户操作或需求展示不同的页面，这就是ngRoute模块大展身手的地方。

我们需要引入ngRoute模块的相关文件。就像其他JavaScript文件一样，我们将angular-route.js文件引入到我们的项目中。我们还需要一个CSS文件来美化我们的页面，那就是tutorial07.css。

接下来，我们来看一下HTML结构。我们有一个header，一个包含路由视图的内容区域，以及一个footer。在内容区域中，我们使用ng-view指令来定义我们的路由视图。这意味着根据不同的路由，这个区域会展示不同的内容。

我们还看到两个按钮：“上一页”和“”。这些按钮将触发我们的路由变化，让我们在不同的页面之间切换。这是通过ng-click指令和MultiViewController中的函数实现的。

现在，让我们转到JavaScript部分，看看我们的ngRoute是如何配置的。我们创建了一个名为routeMod的模块，并使用了ngRoute。我们通过$routeProvider来配置我们的路由。我们定义了两个路由：/1和/2，分别对应不同的模板和控制器。

在MultiViewController中，我们定义了三个函数：init、prePage和nextPage。init函数在页面加载时设置默认的路由为/1。prePage和nextPage函数分别用于处理“上一页”和“”按钮的点击事件，通过改变路由来加载不同的页面内容。

AngularJS的路由模块：从注入到配置

在AngularJS中，路由模块是一个非常重要的组成部分，它允许我们根据不同的URL路径加载不同的页面或视图。本文将指导你如何注入路由模块并进行配置。

我们需要引入路由模块的JavaScript文件。可以通过以下方式引入angular-route.js文件：

接下来，我们需要将路由模块注入到我们的主模块中。创建如下的变量并调用模块方法：

var routeMod = angular.module('routeMod', ['ngRoute']);

现在我们已经成功引入了路由模块，接下来需要进行配置。配置路由的过程涉及到指定不同的URL路径与对应的页面或视图之间的映射关系。为此，我们需要使用模块的config方法来对$routeProvider服务进行配置。代码如下：

routeMod.config(['$routeProvider', function($routeProvider) {

$routeProvider

.when('/1', {

templateUrl: 'tutorial07/page1.html', // 指定页面或视图的HTML文件路径

controller: 'MultiViewController' // 指定对应的控制器

})

.when('/2', {

templateUrl: 'tutorial07/page2.html', // 指定页面或视图的HTML文件路径

controller: 'MultiViewController' // 指定对应的控制器

})

// 可以根据需要添加更多的路径与视图之间的映射关系

// ...

}]);

在HTML页面中，我们需要通过ng-view指令定义一个视图容器。在控制器中，我们可以通过调用$location.path()方法来动态改变视图中加载的页面或视图。这样，我们就可以根据不同的URL路径展示不同的内容了。

相信你对AngularJS的路由模块有了更深入的了解。无论你是初学者还是经验丰富的开发者，本文都将为你提供有价值的指导和启示。如果你对AngularJS的源码感兴趣，可点击此处了解更多信息。希望本文对你进行AngularJS程序设计时有所帮助。记住，掌握路由模块是构建单页应用的重要一环。现在开始实践吧！

我们使用了Cambrian的render方法（cambrian.render('body')）来呈现或渲染页面的主体部分。这将确保我们的应用程序能够正确地展示给用户。