抽丝剥茧看路由_angular1.X---1_angular1 路由是什么-优快云博客

本文通过示例详细介绍了如何使用Angular 1.x进行路由配置，并展示了具体的HTML和JavaScript代码实现。通过两个示例页面的切换，演示了路由的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

该文章分为两部分:angular-route和原生JS写路由
在学习前端框架时, 每个同学不可避免的会接触到路由(route)…而本篇文章则以angular1.X为例, 向各位同学逐步拆开路由(route)的神秘面纱…
首先我们看一下ng正常的路由配置, 如下:

index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>路由</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <script type="text/javascript" src="js/angular-route.min.js"></script>
</head>
<body>
    <div ng-controller="myCtrl">
        <!-- 路由 -->
        <ul>
            <li><a href="#/ex1">路由1</a></li>
            <li><a href="#/ex2">路由2</a></li>
        </ul>
        <!-- 视图层 -->
        <ng-view></ng-view>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp', ['ngRoute']);
        app.controller('myCtrl',function($scope, $location){
            $scope.$on("$viewContentLoaded",function(){
                console.log('ng-view content loaded');
            });
            $scope.$on('$routeChangeStart',function(){
                console.log('route change start');
            });
        });

        function routeConfig($routeProvider){
            $routeProvider.when('/ex1', {
                templateUrl: 'routeEx1.html',
                controller: 'firstCtrl'
            }).when('/ex2', {
                templateUrl: 'routeEx2.html',
                controller: 'secondCtrl'
            }).otherwise({
                redirectTo: '/ex1'
            });
        }
        app.config(routeConfig);
    </script>
</body>
</html>

引入的文件有两个–angular.min.js和angular-route.min.js. 1.3之后, angular将路由从中拆离.
以下是两个路由文件

routeEx1.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由示例1</title>
</head>
<body>
    <!-- 靛青色 -->
    <div style="background-color:#00ffff;color:white;">路由测试1</div>
</body>
</html>

routeEx2.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由示例2</title>
</head>
<body>
    <!-- 黄色 -->
    <div style="background-color:#ffff00;color:white;">路由测试2</div>
</body>
</html>