Angular路由

来源：互联网发布：淘宝手办良心店铺编辑：程序博客网时间：2024/05/17 02:17

路由的使用
1.创建模块
2.配置路由
3.创建每个页面对应的控制器
4.创建ng-template
5.视图层创建ng-view

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>route</title>    <script src="node_modules/angular/angular.js"></script>    <script src="node_modules/angular-route/angular-route.js"></script>    <script>        var app=angular.module('app',['ngRoute']);        /*配置路由*/        app.config(['$routeProvider',function($routeProvider){            $routeProvider                    .when('/a/:name',{controller:'studentsController',templateUrl:'a_tmpl'})                    .when('/b/:name',{controller:'teachersController',templateUrl:'a_tmpl'})                    .when('/c/:name',{controller:'othersController',templateUrl:'a_tmpl'})                    .otherwise({                        redirectTo:'/a'                    });        }]);        app.controller('studentsController',['$scope','$routeParams',function($scope,$routeParams){            $scope.title="这是"+$routeParams.name+"控制器";        }]);        app.controller('teachersController',['$scope','$routeParams',function($scope,$routeParams){            $scope.title="这是"+$routeParams.name+"控制器";        }]);        app.controller('othersController',['$scope','$routeParams',function($scope,$routeParams){            $scope.title="这是"+$routeParams.name+"控制器";        }]);    </script></head><body ng-app="app"><script id="a_tmpl" type="text/ng-template">    <h1>{{title}}</h1></script>    <ul>        <li><a href="#/a/default_a">A</a></li>        <li><a href="#/b/default_b">B</a></li>        <li><a href="#/c/default_c">C</a></li>    </ul>    <div ng-view></div></body></html>

0 0