2014-11-01 4 views
0

У меня нет ошибок, но я не могу заставить свою маршрутизацию работать. Любая помощь будет принята с благодарностью. Благодарю.Файл маршрутизации AngularJs не работает

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 = []; 
     }); 
+0

Неверный закрытый скрипт 'angular-route.min.js'. – angabriel

ответ

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> 
+0

Спасибо. Изменение названия работало отлично! –

+0

Рад, что я мог помочь. Не забывайте отмечать это как принятый ответ, если это отвечает на ваш вопрос. – wvdz

Смежные вопросы