angular入门-路由控制-优快云博客

本文介绍如何使用Angular的$routeProvider模块实现前端路由控制。通过具体示例展示了如何定义模块、配置路由规则及创建控制器来响应不同的URL路径。

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

前端根据url做路由控制，主要用到angular中route模块$routeProvider

遇到的问题：引入angualar按照教程所说一步步的进行，总是调试不出来和各种报错，报错原因无非就是$routeProvider 未定义

主要是引入的angular.js没有包含angular-route这个模块需要我们自己额外的进行引用

app.js

1、定义模块

2、定义路由规则

controller.js

定义控制器，不同的路由对应不同templateUrl 和controller

index.html

加载app.js controller.js

view文件下放模块文件

list.html

detail.html

代码部分：

app.js

//app.js
            var routeApp = angular.module('routeApp',['ngRoute']);
            routeApp.config(['$routeProvider',function ($routeProvider) {
                $routeProvider
                    .when('/list', {
                        templateUrl: 'views/list.html',
                        controller: 'RouteListCtl'
                    })
                    .when('/list/:id/:content', {
                        templateUrl: 'views/detail.html',
                        controller: 'RouteDetailCtl'
                    })
                    .otherwise({
                        redirectTo: '/list'
                    });
            }]);

controller.js

//controller.js
 routeApp.controller('RouteListCtl',function($scope) {
    });
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
    $scope.content = $routeParams.content;
    console.log($routeParams)
});

index.html

<!doctype html>
<html ng-app="routeApp">
    <head>
    </head>
    <body>
         <div ng-view></div>
        <script src="angular.js"></script>
        <script src="angular-route.js"></script>
        <script src="app.js"></script>
        <script src="controller.js"></script>
    </body>
</html>

view/list.html

1 <hr/>
2 <h3>Route : List.html</h3>
3 <ul>
4     <li ng-repeat="id in [1, 2, 3 ]">
5         <a href="#/list/{{ id }}/asdfsfdsf"> ID{{ id }}</a>
6     </li>
7 </ul>

view/detail.html

<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
<small>{{content}}</small>

转载于:https://www.cnblogs.com/knightshibiao/p/3823743.html