angular js ng-route 路由简单实例

来源：互联网发布：ip广播软件编辑：程序博客网时间：2024/05/22 13:34

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'            });    }]);

0 0