angular js ng-route 路由简单实例:
注意:必须引入angular-route.js
index.html:
<html lang="en" ng-app="myApp"> <head> <meta charset="utf-8"> <title>My HTML File</title> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/> <script src="bower_components/jquery/dist/jquery.min.js"></script> <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script> <script src="bower_components/angular/angular.js"></script> <script src="bower_components/angular/angular-route.js"></script> <script src="js/app.js"></script> </head> <body> <div ng-view></div> </body> </html>allPerson.html
<div class="container"> <div class="row"> <a href="#/detail/:0">person0</a> <a href="#/detail/:1">person1</a> <a href="#/detail/:2">person2</a> <a href="#/detail/:3">person3</a> </div> </div>personDetail.html <div class="container"> <div class="row"> personId{{personId}} </div> </div> app.js注意:依赖注入 ngRoute 模块
otherwise() 定义的找不到路径时跳转的路由
$routeParams:参数传递
var app = angular.module('myApp',['ngRoute']); function personDetailCtrl($scope,$routeParams){ $scope.personId = $routeParams.personId; } app.config(['$routeProvider', function($routeProvider) { $routeProvider .when('/allPerson', { templateUrl: 'html/allPerson.html' }) .when('/detail/:personId', { templateUrl: 'html/personDetail.html', controller:personDetailCtrl }).otherwise( { redirectTo: '/allPerson' }); }]);