angularjs路由

Today we will look into AngularJS Routing example using ngRoute module and $routeProvider. Earlier we looked into AngularJS Modules and AngularJS Controllers.

今天，我们将研究使用ngRoute模块和$ routeProvider的AngularJS路由示例。 之前，我们研究了AngularJS模块和AngularJS控制器 。

AngularJS中的路由 (Routing in AngularJS)

Routing in AngularJS is one of the core feature. In this AngularJS routing example, we will build a small single page application with multiple views to show you how routing in AngularJS works.

AngularJS中的路由是核心功能之一。 在此AngularJS路由示例中，我们将构建一个具有多个视图的小型单页应用程序，以向您展示AngularJS中的路由工作方式。

ngRoute (ngRoute)

AngularJS ngRoute module provides routing, deep linking services and directives for angular applications. We have to download angular-route.js script that contains the ngRoute module from AngularJS official website to use the routing feature.

AngularJS ngRoute模块为angular应用程序提供路由，深层链接服务和指令。 我们必须从AngularJS官方网站下载包含ngRoute模块的angular-route.js脚本，才能使用路由功能。

You can also use the CDN in your application to include this file. In this tutorial, We are going to use the Google CDN.

您也可以在应用程序中使用CDN来包含此文件。 在本教程中，我们将使用Google CDN。

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js

https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js

If you are bundling this file into your application, then you can add it to your page with below code.

如果将此文件捆绑到应用程序中，则可以使用以下代码将其添加到页面中。

<script src="angular-route.js">

If you want to include it from Google CDN, then use below code.

如果要从Google CDN包含它，请使用以下代码。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>

Then load the ngRoute module in your AngularJS application by adding it as a dependent module as shown below.

然后通过将ngRoute模块添加为依赖模块，将其加载到AngularJS应用程序中，如下所示。

angular.module('appName', ['ngRoute']);

ngView (ngView)

ngView directive is used to display the HTML templates or views in the specified routes. Every time the current route changes, the included view changes with it according to the configuration of the $route service.

ngView指令用于显示指定路由中HTML模板或视图。 每次当前路由更改时，包含的视图都会根据$ route服务的配置随之更改。

$ routeProvider ($routeProvider)

$routeProvider is used to configure the routes. We use the ngRoute config() to configure the $routeProvider. The config() takes a function which takes the $routeProvider as parameter and the routing configuration goes inside the function.

$ routeProvider用于配置路由。 我们使用ngRoute config（）配置$ routeProvider。 config()一个以$routeProvider作为参数的函数，并且路由配置进入该函数内部。

$routeProvider has a simple API, accepting either the when() or otherwise() method.

$ routeProvider有一个简单的API，可以接受when()或else otherwise()方法。

AngularJS路由语法 (AngularJS Routing Syntax)

The following syntax is used to configure the routes in AngularJS.

以下语法用于在AngularJS中配置路由。

var app = angular.module("appName", ['ngRoute']);app.config(function($routeProvider) {$routeProvider.when('/view1', {templateUrl: 'view1.html',controller: 'FirstController'}).when('/view2', {templateUrl: 'view2.html',controller: 'SecondController'}).otherwise({redirectTo: '/view1'});
});

when() method takes a pathand a route as parameters.

when()方法将路径和路线作为参数。

path is a part of the URL after the # symbol.

path是＃符号后的URL的一部分。

route contains two properties – templateUrl and controller.

route包含两个属性templateUrl和controller 。

templateUrl property defines which HTML template AngularJS should load and display inside the div with the ngView directive.

templateUrl属性定义AngularJS应该使用ngView指令加载并显示在div中HTML模板。

controller property defines which controllers should be used with the HTML template.

controller属性定义与HTML模板一起使用的控制器。

When the application is loaded, path is matched against the part of the URL after the # symbol. If no route paths matches the given URL the browser will be redirected to the path specified in the otherwise() function.

加载应用程序时， 路径将与＃符号后面的URL部分匹配。 如果没有路由路径与给定的URL匹配，浏览器将被重定向到else（）函数中指定的路径。

AngularJS路由示例 (AngularJS Routing Example)

Now let’s go through a simple example to understand the AngularJS rounting. At first, we will define a module, some routes, create controllers and create multiple views. Finally, we will create the shell page of our application to hold the multiple views.

现在，让我们通过一个简单的示例来了解AngularJS漫游。 首先，我们将定义一个模块，一些路由，创建控制器并创建多个视图。 最后，我们将创建应用程序的外壳页面以容纳多个视图。

1. Create a module named mainApp and load ngRoute as a dependent module.创建一个名为模块mainApp和负载ngRoute的相关模块。
2. Configure the routes using $routeProvider.使用$routeProvider配置路由。
3. We use two paths in the example, /home and /viewStudents.在示例中，我们使用两个路径 / home和/ viewStudents 。
4. We use only a single controller in this example, StudentController在此示例中，我们仅使用单个控制器StudentController
5. StudentController is initialized with an array of students and a message. We will be showing the message in the home page and the students list in viewStudents page.使用一系列学生和一条消息初始化StudentController 。 我们将在首页中显示该消息，并在viewStudents页面中显示学生列表。
6. Save this file as main.js将此文件另存为main.js

main.js

main.js

var mainApp = angular.module("mainApp", ['ngRoute']);mainApp.config(function($routeProvider) {$routeProvider.when('/home', {templateUrl: 'home.html',controller: 'StudentController'}).when('/viewStudents', {templateUrl: 'viewStudents.html',controller: 'StudentController'}).otherwise({redirectTo: '/home'});
});mainApp.controller('StudentController', function($scope) {$scope.students = [{name: 'Mark Waugh', city:'New York'},{name: 'Steve Jonathan', city:'London'},{name: 'John Marcus', city:'Paris'}];$scope.message = "Click on the hyper link to view the students list.";
});

For example, if the URL is like https://www.journaldev.com/index.html#/home, The URL part after the # matches /home, it will load home.html page and if it matches /viewStudents then it will load viewStudents.html in to the shell page. If nothing matches then it will go in otherwise condition and page will be redirected to home.html.

例如，如果URL像https://www.journaldev.com/index.html#/home，则＃后面的URL部分匹配/home ，它将加载home.html页面，如果它匹配/viewStudents则它将会将viewStudents.html加载到外壳页面中。 如果没有匹配项，则它将进入其他条件，并将页面重定向到home.html 。

Now we can create our views and save as home.html and viewStudents.html files.

现在，我们可以创建视图并将其另存为home.html和viewStudents.html文件。

home.html

home.html

<div class="container"><h2> Welcome </h2><p>{{message}}</p><a href="#/viewStudents"> View Students List</a>
</div>

This is the default page of our application. In this view, we just print out the message, which we have already initialized in the StudentController. You can also see a link to the viewStudents page.

这是我们应用程序的默认页面。 在此视图中，我们仅打印出已在StudentController中初始化的消息。 您还可以看到指向viewStudents页面的链接。

viewStudents.html

viewStudents.html

<div class="container"><h2> View Students </h2>Search:<br/><input type="text" ng-model="name" /><br/><ul><li ng-repeat="student in students | filter:name">{{student.name}} , {{student.city}}</li></ul><a href="#/home"> Back</a>
</div>

In the above view, you can see a list of students with a search option.

在上面的视图中，您可以看到带有搜索选项的学生列表。

Finally, follow below steps to complete our AngularJS routing example application.

最后，按照以下步骤完成我们的AngularJS路由示例应用程序。

• ng-app auto-bootstraps our application mainAppng-app自动引导我们的应用程序mainApp
• ngView directive is the placeholder of the views – home.html and viewStudents.htmlngView指令是视图的占位符– home.html和viewStudents.html
• Include angular.min.js and angular-route.min.js包括angular.min.js和angular-route.min.js
• Include main.js which we have created in the earlier steps.包括我们在前面的步骤中创建的main.js
• Save the file as index.html将文件另存为index.html

index.html

index.html

<!DOCTYPE html>
<html><head lang="en"><meta charset="utf-8"><title>AngularJS Routing</title></head><body><div ng-app="mainApp"><ng-view></ng-view></div><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script><script type="text/javascript" src="main.js"></script></body>
</html>

That’s all for our AngularJS Routing example. Our application is ready to run.

这就是我们的AngularJS路由示例。 我们的应用程序可以运行了。

运行你的应用程序 (Run your application)

• Save all the files in the same directory.将所有文件保存在同一目录中。
• open index.html from your browser从浏览器中打开index.html
• Try our online demo.试试我们的在线演示。

AngularJS路由示例在线演示 (AngularJS Routing Example Online Demo)

演示地址

翻译自: https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider

angularjs路由