基于Angular中不同版本的不同路由风格?

时间:2015-02-11 08:28:06

标签: angularjs

最近两个月前,我使用了AngularJS v1.0.7

路由就像app.js

angular.module('newdev', ['newdev.filters', 'newdev.services', 'newdev.directives', 'newdev.controllers']).
config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/operator-list', {templateUrl: 'operator/operator-list.jsp', controller: 'OperatorListCtrl'});
    $routeProvider.when('/operator-detail/:id', {templateUrl: 'operator/operator-detail.jsp', controller: 'OperatorDetailCtrl'});
    $routeProvider.when('/operator-creation', {templateUrl: 'operator/operator-creation.jsp', controller: 'OperatorCreationCtrl'});
}]);
...

<!doctype html>
<html lang="en" ng-app="newdev">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My AngularJS App</title>
        <link rel="stylesheet" href="css/app.css" />
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    </head>
    <body>
        <base href="/newdev/" />
        <ul class="menu">
            <li>
                <a href="#/operator-list">Manage Operator</a>
            </li>
        </ul>

        <div ng-view></div>

        <script src="lib/jquery/jquery.js"></script>
        <script src="lib/bootstrap/bootstrap.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="lib/angular/angular-resource.js"></script>

        <!-- AngularJS App Code ==================================================== -->
        <script src="js/app.js"></script>
        <script src="js/services.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/directives.js"></script>
    </body>
</html>

...
Just Routing like : <a href="#/operator-list">Manage Operator</a>
....

现在我升级到AngularJS v1.3.13。它不起作用;

控制台

Uncaught Error: [$injector:modulerr] Failed to instantiate module newdev due to:
Error: [$injector:unpr] Unknown provider: $routeProvider
http://errors.angularjs.org/1.3.13/$injector/unpr?p0=%24routeProvider
    at http://localhost:7070/newdev/lib/angular/angular.js:63:12
    at http://localhost:7070/newdev/lib/angular/angular.js:3997:19
    at getService (http://localhost:7070/newdev/lib/angular/angular.js:4144:39)
    at Object.invoke (http://localhost:7070/newdev/lib/angular/angular.js:4176:13)
    at runInvokeQueue (http://localhost:7070/newdev/lib/angular/angular.js:4091:35)
    at http://localhost:7070/newdev/lib/angular/angular.js:4100:11
    at forEach (http://localhost:7070/newdev/lib/angular/angular.js:323:20)
    at loadModules (http://localhost:7070/newdev/lib/angular/angular.js:4081:5)
    at createInjector (http://localhost:7070/newdev/lib/angular/angular.js:4007:11)
    at doBootstrap (http://localhost:7070/newdev/lib/angular/angular.js:1445:20)
http://errors.angularjs.org/1.3.13/$injector/modulerr?p0=newdev&p1=Error%3A…3A%2F%2Flocalhost%3A7070%2Fnewdev%2Flib%2Fangular%2Fangular.js%3A1445%3A20)

为什么不同版本之间的路由风格如此之多?哪种方式与不同版本兼容?

1 个答案:

答案 0 :(得分:0)

只是一个粗略的糖果,但我认为你需要在你的代码中包含angular-route作为脚本引用。

Angular Library Index

您现在必须明确引用angular-route,因此将angular-route代码复制到.js文件中,并在项目中的角度引用下面引用它。希望这适合你。