Question

我没有收到任何错误，但我无法让我的路由工作。任何帮助将不胜感激。感谢。

main.html

<!DOCTYPE html>
    <html ng-app = 'ContactsApp'>
            <!--ng app is bootstrapping application and it is called contactsapp like in the anuglar     app.js file---->
        <head>

            <title>Contacts</title>
            <base href = '/'>
            <link rel = 'stylesheet' href = "src/bootstrap.min.css">
            <!---base elemnt with a href attr of root 
            ...angular will use the base element and the href tells it what to use when it goes to get our front end resources so it will start with the root ----> 
        </head>


        <body>
            <div class = 'container'>

                <div class = "page-header">


                <h1>Contacts{{message}}</h1>

            </div>

                    <!---row and colsm12 are twitter bootstrap classes the ng view is anuglar it is saying that this will be the view div on the page so the contents of this page will change as our route changes---->

            <div class = 'row'>
                <div class = 'col-sm-12' ng-view></div>
            </div> 


            <script src = 'lib/jquery/dist/jquery.min.js'></script>
            <script src = 'lib/bootstrap/dist/js/bootstrap.min.js'></script>
            <script src = 'lib/node_modules/angular/angular.js'></script>
            <script src = 'lib/node_modules/angular-route/angular-route.min.js'> </script>
            <script src = 'lib/angular-resource/angular-resource.min.js'></script>
            <script src = 'src/app.js'></script>
            <script src = 'src/controllers.js'></script>
            <script src = 'src/factories.js'></script>
        </body>

    </html>

app.js

            angular.module('ContactsApp',['ngRoute'])

            .config(function($routeProvider, $locationProvider)
                    {
                        $routeProvider
                        .when('/contacts'), {
                            controller: 'ListController',
                            templateUrl: 'views/list.html'
                        };

                    });

controller.js

         angular.module('ContactsApp', [])
           .controller('ListController', function($scope){
             $scope.contacts = [];
        });

Answer 1

我在你的代码中看到了2个问题。

第一个问题是您使用名称ContactsApp定义模块两次。

为控制器提供不同名称的模块，并将其声明为主模块中的依赖项。

像这样：

app.js

angular.module('ContactsApp',['ngRoute','listControllers'])

.config(function($routeProvider, $locationProvider) {
     $routeProvider
     .when('/contacts'), {
          controller: 'ListController',
          templateUrl: 'views/list.html'
      };
});

controller.js

angular.module('listControllers', [])

.controller('ListController', function($scope){
    $scope.contacts = [];
});

第二个问题是你的main.html中的拼写错误：

<script src = 'lib/node_modules/angular-route/angular-route.min.js'script>

应该是：

<script src = 'lib/node_modules/angular-route/angular-route.min.js'></script>

AngularJs路由文件无法正常工作

1 个答案: