2014-03-01 4 views
0

У меня возникли проблемы с попыткой показать частичный html в моем файле index.html (ничего не отображается).Угловой шаблон JS теперь показывает

Пожалуйста, смотрите мой код index.html:

<!doctype html> 
<html lang="en" ng-app="myApp"> 
    <head> 
     <meta charset="utf-8"> 
     <title>My AngularJS App</title> 
     <link rel="stylesheet" href="css/app.css"/> 
     <link rel="stylesheet" href="css/animations.css"/> 
     <link rel="stylesheet" href="css/bootstrap.css"/> 
     <script src="js/jquery-1.11.0.min.js"></script> 
     <script src="lib/angular/angular.js"></script> 
     <script src="lib/angular/angular-animate.js"></script> 
     <script src="lib/angular/angular-route.js"></script> 
     <script src="lib/angular/angular-resource.js"></script> 
     <script src="js/app.js"></script> 
     <script src="js/animations.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> 
    </head> 
    <body> 
     <li> 
      <a href="#people">Show People</a> 
     </li> 
     <div ng-view></div> 
    </body> 
</html> 

Тогда я пытаюсь загрузить people.html, который находится на директории Partials, используя маршрутизацию на app.js:

'use strict'; 

// Declare app level module which depends on filters, and services 
var myApp = angular.module('myApp', ['ngRoute', 'filters', 'services', 'directives', 'controllers']); 

myApp.config(['$routeProvider', 
function($routeProvider) { 
    $routeProvider.when('/people', { 
     templateUrl : 'patials/people.html', 
     controller : 'PeopleController' 
    }).otherwise({ 
     redirectTo : '/people' 
    }); 
}]); 

Если я заменяю часть ng-view на моем index.html с моим содержимым файла шаблона, все отображается нормально, поэтому я не думаю, что у меня есть проблема с моими объявлениями контроллера.

Можете ли вы взглянуть и помочь мне разобраться, что случилось?

Спасибо!

+4

Вы уверены, что его не опечатка здесь - путь говорит: лям/people.html '(не частичные). Можете ли вы опубликовать jsfiddle в случае, если все еще проблема – rajasaur

+0

Я исправил эту строку, но она по-прежнему загружается ботом. –

+0

Plnkr.co, вероятно, будет работать лучше, поскольку проблема связана с маршрутом и несколькими файлами. Также проверьте вкладку «Консоль» и вкладку «Сеть» и вкладку «Сценарии» в отладчике chrome (или любом отладчике) и посмотрите, есть ли какие-либо ошибки в консоли, B любые неудачные запросы на вкладке сети, а C - загрузка ваших сценариев и точек останова на вашем компьютере код. – shaunhusain

ответ

1

Вы используете var myApp = angular.module('myApp', []); внутри вашего контроллера. Если вы добавите массив в качестве второго параметра в angular.module, модуль будет автоматически создан как новый и переопределяет предыдущее одноименное имя, поэтому config больше не работает, поскольку в вашем коде он определен на другом модуле ,

Просто измените код в PeopleController определении от

var myApp = angular.module('myApp', []); 

в

var myApp = angular.module('myApp'); 

и он должен работать

отредактирован звенеть: http://plnkr.co/edit/bK9vHSPxKmijhlLPS5C5?p=preview

+0

Это решило мою проблему, но мне также нужно было изменить другую строку, на app.js: var myApp = angular.module ('myApp', ['ngRoute', 'фильтры', 'services', 'директивы', 'контроллеры']); для этого = var myApp = angular.module ('myApp', ['ngRoute']); –

+0

Спасибо! Я до сих пор не понимаю, что было не так с этой линией на app.js –

+0

Это также было исправлено в моем плунге, но я думал, что это было намеренно. Причина заключалась в том, что строки в массиве - это имена модулей, на которые 'myApp' зависит ... и, по-видимому, эти модули не существовали в вашем приложении, поэтому он бросил ошибки создания. – doodeec

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