Угловой UI-маршрутизатор, не отображающий вложенные виды и ссылки

Я изучаю Angular и теперь, когда у меня есть время, изучая его, я решил сделать небольшое приложение, чтобы проверить свои знания, но ссылки на моем приложении и вложенных представлениях Похоже, что я работаю по какой-то причине, я пока не могу понять, я использую угловой ui-router, потому что это довольно просто, чтобы обрабатывать маршруты и подобные вещи.Угловой UI-маршрутизатор, не отображающий вложенные виды и ссылки

проблема: Я пытаюсь загрузить шаблоны маршрутов в div, который содержит ui-view, но он не работает.

У меня есть эти три JS файлы:

первые config.route.js

'use strict'; 

angular.module('weekobApp', ['ui.router']) 
.config(function($stateProvider, $urlRouterProvider) { 

    $urlRouterProvider.otherwise('/'); 

    $stateProvider 

     // route for the home page 
     .state('app', { 
      url:'/', 
      views: { 
       'header': { 
        templateUrl : 'app/layout/header.html', 
       }, 
       'content': { 
        templateUrl : 'app/layout/dashboard.html', 
        controller : 'DashboardController' 
       }, 
       'footer': { 
        templateUrl : 'app/layout/footer.html', 
       } 
      } 

     }); 
});

dashboard.js

'use strict'; 

angular.module('weekobApp', []) 
    .controller('DashboardController', ['$scope', function ($scope) { 
    $scope.myname = "Dashboard"; 
}]);

и, наконец, файл HTML:

<!DOCTYPE html> 
<html ng-app="weekobApp"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Title</title> 
    <!-- build:css content/styles/style.css --> 
    <link href="content/styles/style.css" rel="stylesheet" /> 
    <!-- endbuild --> 
</head> 
<body> 

    <div ui-view="header"></div> 
    <div ui-view="content"></div> 
    <div ui-view="footer"></div> 

    <!-- build:js app/main.js --> 
    <script src="../../bower_components/angular/angular.min.js"></script> 
    <script src="../../bower_components/angular-ui-router/release/angular-ui-router.min.js"></script> 
    <script src="../../bower_components/angular-resource/angular-resource.min.js"></script> 
    <!-- Dashboard modules --> 
    <script src="app/dashboard/config.route.js"></script> 
    <script src="app/dashboard/dashboard.js"></script> 
    <!-- endbuild --> 
</body> 
</html>

источник

2016-01-06 Enmanuel Duran

Вы должны только объявить список зависимостей модуля один раз. – georgeawg

Вы должны объявить только список зависимостей модуля сразу:

angular.module('weekobApp', ['ui.router']); 

angular.module('weekobApp') 
    .config(function($stateProvider, $urlRouterProvider) { 

angular.module('weekobApp') 
    .controller('DashboardController', ['$scope', function ($scope) {

Первая строка создает модуль. Остальные два добавляют компоненты к модулю. Ваш код переписывал предыдущий компонент.

источник

2016-01-06 16:48:33 georgeawg

Я сделал это, но теперь я получаю эту проблему "[$ injector: modulerr] Не удалось создать экземпляр модуля weekobApp из-за: Ошибка: [$ injector: unpr]", и он по-прежнему не показывает никакого шаблона! –

Показать больше сообщения об ошибке. Каково имя поставщика в сообщении об ошибке? – georgeawg

это ошибка, которую я получаю https://goo.gl/Kze4xL, когда я добавляю параметр [] в angular.module внутри dashboard.js, эта ошибка исчезает, я знаю, это потому, что она перезаписывает зависимости, но Я просто сказал. –

Угловой UI-маршрутизатор, не отображающий вложенные виды и ссылки

ответ

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