angularjs项目里如何定义路由
时间: 2024-05-04 20:19:40 浏览: 8
在 AngularJS 中,可以使用 `ngRoute` 模块来定义路由。以下是一个简单的例子:
1. 首先,在 HTML 文件中引入 `ngRoute` 模块:
```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-route.min.js"></script>
```
2. 在 JavaScript 文件中定义路由:
```javascript
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "home.html"
})
.when("/about", {
templateUrl : "about.html"
})
.when("/contact", {
templateUrl : "contact.html"
})
.otherwise({
redirectTo: '/'
});
});
```
在上面的代码中,`$routeProvider` 是 `ngRoute` 模块的一个服务,它用于定义路由。通过调用 `.when()` 方法来定义路由,其中第一个参数是路由的 URL,第二个参数是一个配置对象,包括模板 URL、控制器等信息。在最后,可以通过 `.otherwise()` 方法定义默认路由。
3. 在 HTML 文件中使用 `ng-view` 指令来显示视图:
```html
<body ng-app="myApp">
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
<a href="#/contact">Contact</a>
</nav>
<div ng-view></div>
</body>
```
在上面的代码中,`ng-view` 指令用于显示路由对应的视图。在导航栏中,使用 `href` 属性指向定义好的路由 URL。