首页 > 代码库 > agularJs 路由

agularJs 路由

2024-08-18 17:12:15   222人阅读

angularJs的路由方式：

先定义一个模板ng-app-->然后定义路由的规则（routeProvider）在服务config里-->然后通过不同的URL实现

到单页面加载的所需页面的效果。

以上只是大概流程。

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.min.js"></script>
    <!-- 这是需要插件引入的：angular-route
    注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） -->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body ng-controller="myCon">
    <!-- 路由 -->
    <!-- ng-click="$location.path(‘/aaa‘)" 来改变路径
        功能与href的哈希值一样
    -->
    <a href="#aaa/123">首页</a>
    <a href="#bbb/345">aass</a>
    <a href="#ccc/76567">qqoc</a>
    <div ng-view></div>
    <script>
    // 使用插件ngRoute
    // 可以实现页面切换的效果
    // 还有历史记录的功能，可以返回
        var myApp=angular.module("myApp",["ngRoute"])
        // config配置是最早就执行的方法，所以在里面写好路由规则
        .config([‘$routeProvider‘,function($routeProvider){
            $routeProvider
            /*路由跳转的函数*/
            .when("/aaa/:num",{
                template: ‘<p>首页送你温暖</p>{{name}}‘,
                /*可以定义一个控制器，来限制作用域*/
                controller:"aaa"
            })
            .when("/bbb/:num",{
                template: ‘<p>aass送你高温</p>{{name}}‘,
                controller:"bbb"
            })
            .when("/ccc/:num",{
                template: ‘<p>qqoc送你高冷</p>{{name}}‘,
                controller:"ccc"
            })
            // 配置其他的路径跳转，可以想成default
            .otherwise({
                // 重定向地址
                // 可以理解为设置默认路径
                redirectTo:"/aaa"
            })
        }])

        // 假设我们需要在每次路由发生变化时，都执行一个函数来验证用户的权限，放置这个功能唯一合理的地方就是run方法
        // 不过它是全局的
        .run(["$rootScope",function($rootScope){
            // $on用于接收event与data
            // $routeChangeStart这个事件会在路由跳转前触发
            $rootScope.$on("$routeChangeStart",function(ev,current,pre){
                // 接受三个参数，一个是事件对象，一个是当前对象，一个是之前的对象
                console.log(ev);
                console.log(current);
                console.log(pre);
            })
        }])
        .controller("myCon",["$scope","$routeParams","$location",function($scope,$routeParams,$loaction){
            // $scope.$loaction=$loaction;
            // console.log($loaction);
            // 服务$routeParams保存了地址栏中的参数，例如{id : 1, name : ‘tom‘}
            console.log($routeParams);
        }])
        .controller("aaa",["$scope",function($scope){
            $scope.name="za";
        }])
        .controller("bbb",["$scope",function($scope){
            $scope.name="cs";
        }])
        .controller("ccc",["$scope",function($scope){
            $scope.name="vd";
        }])
    </script>
</body>
</html>

 

简化版代码：

这个可以更加简单的知道它的基础使用；

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="angular.min.js"></script>
    <!-- 这是需要插件引入的：angular-route
    注意不同版本的angularJs，插件最好对应上这个版本的号，（如果找不到对应版本，相近版本也可以） -->
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>
</head>
<body>
    <!-- 路由 -->
    <a href="#aaa">首页</a>
    <a href="#bbb">aass</a>
    <a href="#ccc">qqoc</a>
    <div ng-view></div>
    <script>
    // 使用插件ngRoute
    // 可以实现页面切换的效果
    // 还有历史记录的功能，可以返回
        var myApp=angular.module("myApp",["ngRoute"])
        // config配置是最早就执行的方法，所以在里面写好路由规则
        .config([‘$routeProvider‘,function($routeProvider){
            $routeProvider
            /*路由跳转的函数*/
            .when("/aaa",{
                template: ‘<p>首页送你温暖</p>{{name}}‘
            })
            .when("/bbb",{
                template: ‘<p>aass送你高温</p>{{name}}‘
            })
            .when("/ccc",{
                template: ‘<p>qqoc送你高冷</p>{{name}}‘
            })
            
        }])    
        
    </script>
</body>
</html>

 

agularJs 路由


联系
我们