angular js ng-route 路由简单实例

    xiaoxiao2021-12-14  17

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

    转载请注明原文地址: https://ju.6miu.com/read-965687.html

    最新回复(0)