angular js ng-route 路由简单实例

最新推荐文章于 2022-11-17 15:54:25 发布

学而思之

最新推荐文章于 2022-11-17 15:54:25 发布

阅读量933

点赞数

分类专栏： javaScript angular js

本文链接：https://blog.csdn.net/chiping123/article/details/53436488

版权

javaScript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

angular js

2 篇文章 0 订阅

订阅专栏

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

收藏

觉得还不错? 一键收藏
0
评论
angular js ng-route 路由简单实例

angular js ng-route 路由简单实例：注意：必须引入angular-route.jsindex.html: My HTML File allPerson.html person0 person
复制链接

扫一扫

专栏目录