Несколько контроллеров, работающих в примере ngRoute

У меня есть небольшой пример ngRoute. Я пытаюсь использовать несколько приложений и контроллеров. Первое приложение/контроллер предназначено для главной страницы, а второй набор приложений/контроллеров - для html, который ngRoute загружает после нажатия кнопки. Однако, похоже, он не работает. Код ниже:Несколько контроллеров, работающих в примере ngRoute

Главный модуль

var app = angular.module("MainModule", ["ngRoute"]);

Главный контроллер

app.controller("MainController", function ($scope) { 

}); 

app.config(function ($routeProvider) { 
    $routeProvider 
     .when('/customers', { 
      templateUrl: "customers.html", 
      controller: "CustomerController" 
    }) 
});

Модуль клиента

var CustomerModule = angular.module("CustomerModule", []);

контроллер клиента

CustomerModule.controller("CustomerController", function ($scope) { 

$scope.Test = "Hey"; 

$scope.CustomerArray = [ 
    { "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman"  }, 
    { "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" } 
    ] 
});

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
    <script src="scripts/MainModule.js"></script> 
    <script src="scripts/MainController.js"></script> 
    <link rel="stylesheet" type="text/css" href="MyCSS.css"> 
</head> 
<body> 


    <div ng-app="MainModule"> 
     <div id="TopDiv">Main Module</div> 
     <a href="#/customers"><input type="button" value="Load Customers" /> </a> 

     <div ng-view></div> 

    </div> 

</body> 
</html>

customers.html

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script src="scripts/CustomerModule.js"></script> 
    <script src="scripts/CustomerController.js"></script> 
</head> 
<body> 
    <div ng-app="CustomerModule" ng-controller="CustomerController"> 
     {{Test}} 

      <ul> 
       <li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li> 
      </ul> 

    </div> 
</body> 
</html>

Длинные куски кода нет, но мы надеемся, простой код. Выход, когда я нажимаю кнопку «Загрузить клиент», буквально {{Test}} без данных массива.

Я сейчас изучаю углы, поэтому любая помощь в этом вопросе я буду признателен. Я просто делаю это для удовольствия, чтобы учиться. Поэтому я предполагаю, что проблема не нажимает. :) Благодаря!

источник

2016-08-24 Johnny_Orion

проблема здесь заключается в том, что нг маршрута ожидает загрузки * parial * поместить в 'ng- view', но ваш файл customers.html не является частичным, он содержит собственное 'ng-app'. Кроме того, параметр 'controller' в' $ routeProvider' создает объект контроллера из того же модуля, с которым настроен '$ routeProvider', но ваш' CustomerController' находится в совершенно другом модуле. Кроме того, вы никогда не должны использовать 'controller' в JavaScript и' ng-controller' в HTML одновременно, так как они оба загружают уникальный экземпляр контроллера. – Claies

Здесь много ошибок, другими словами. Я могу собрать рабочий образец, но это займет немного времени. – Claies

Большое спасибо за ваше время и ваш комментарий. Я изучаю много своих ошибок только после публикации этого примера. Если вы сможете предоставить рабочий образец, это было бы здорово! Если нет, это тоже нормально, поскольку я понимаю, что это много усилий. Это только для обучения и экспериментов от моего имени. Еще раз спасибо. –

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

Для каждой «страницы» не обязательно иметь собственный модуль. Однако это не плохая практика.Чтобы поддержать проект, вы должны здесь одного модуля для каждого вида, я сделал следующие изменения:

включают в себя CustomerModule как зависимость в MainModule (MainModule.js):

var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);

нагрузки ALL скрипты в index.html:

<script src="scripts/MainModule.js"></script> 
<script src="scripts/MainController.js"></script> 

<script src="scripts/CustomerModule.js"></script> 
<script src="scripts/CustomerController.js"></script>

с этими изменениями $routeProvider способен найти CustomerController и создать его экземпляр во время изменения маршрута. Теперь client.html не нужно создавать контроллер, и его можно разделить до полного частичного. Кроме того, выражение, используемое в customers.html, необходимо было изменить и разбивать на отдельные выражения для каждого свойства.

Окончательный customers.html:

{{Test}} 

<ul> 
    <li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li> 
</ul>

Полный рабочий образец на plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview

источник

2016-08-25 16:45:02 Claies

Это прекрасно работает. Большое спасибо! Ясный и лаконичный, и все разделено на отдельные файлы, которые, по-видимому, являются лучшей идеей для долгого кодирования. И этот пример сайта замечательный! Браво! –

Я не уверен, но проблема в вашем MainModule. Это должно быть так или так:

var app = angular.module("MainModule", ["ngRoute"]);

При вызове angular.module только с одним параметром - это только пытается модуль ПОЛУЧИТЬ, а не создавать.

И customers.html должна содержать только части из вас HTML, а не полный: файлы

Полный customers.html

{{Test}} 

<ul> 
    <li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li> 
</ul>

и добавить MOVE клиента к расслоение плотной index.html:

<script src="scripts/MainModule.js"></script> 
<script src="scripts/MainController.js"></script> 
<script src="scripts/CustomerModule.js"></script> 
<script src="scripts/CustomerController.js"></script> 
<link rel="stylesheet" type="text/css" href="MyCSS.css">

Надеюсь, это помогает.

источник

2016-08-25 00:08:07 vedmaque

Спасибо за ваше время и ваш комментарий. Вы находитесь на линии MainModule, моя ошибка в этом! К сожалению, с вашими предложенными изменениями результат все тот же. Кажется, это не должно быть так сложно! Еще раз спасибо. –

Несколько контроллеров, работающих в примере ngRoute

ответ

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