ngRoute - несколько контроллеров в отдельных файлах

Я сейчас в процессе изменения своего веб-приложения в одностраничном веб-приложении. Я последовал за этим уроком. link ngRoute - несколько контроллеров в отдельных файлах

это образец script.js

// script.js 

// create the module and name it scotchApp 
    // also include ngRoute for all our routing needs 
var scotchApp = angular.module('scotchApp', ['ngRoute']); 

// configure our routes 
scotchApp.config(function($routeProvider) { 
    $routeProvider 

     // route for the home page 
     .when('/', { 
      templateUrl : 'pages/home.html', 
      controller : 'mainController' 
     }) 

     // route for the about page 
     .when('/about', { 
      templateUrl : 'pages/about.html', 
      controller : 'aboutController' 
     }) 

     // route for the contact page 
     .when('/contact', { 
      templateUrl : 'pages/contact.html', 
      controller : 'contactController' 
     }); 
}); 

// create the controller and inject Angular's $scope 
scotchApp.controller('mainController', function($scope) { 
    // create a message to display in our view 
    $scope.message = 'Everyone come and see how good I look!'; 
}); 

scotchApp.controller('aboutController', function($scope) { 
    $scope.message = 'Look! I am an about page.'; 
}); 

scotchApp.controller('contactController', function($scope) { 
    $scope.message = 'Contact us! JK. This is just a demo.'; 
});

, так как мои контроллеры большие и многочисленнее, я отделил их в отдельные файлы.

но теперь контроллеры не распознаются ..

источник

2016-02-02 Faiyaz Md Abdul

Попробуйте добавить все контроллеры в отдельный модуль, а затем вставьте этот модуль в свой основной модуль. например, добавить весь контроллер в myControllerModule, а затем ввести его в angular.module ('scotchApp', ['ngRoute', 'myControllerModule']); –

включают их в ваш html-файл. ** note - включить файл, который содержит var scotchApp = angular.module ('scotchApp', ['ngRoute']); перед контроллерами ** –

@AmitRamoliya: любая ссылка для добавления контроллеров в модуль? –

Обновлено с разделенными контроллеров и представлений HTML.

index.html

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title></title> 
    <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js'></script> 
    <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js'></script> 
    <script type="text/javascript" src='./app.js'></script> 
    <script type="text/javascript" src='./HomeController.js'></script> 
    <script type="text/javascript" src='./AboutController.js'></script> 
    <script type="text/javascript" src='./ContactController.js'></script> 
    </head> 
    <body ng-app="myAPP"> 
     <div> 
      <div id="navigation"> 
       <a href="#/home">Home</a> 
       <a href="#/about">About</a> 
       <a href="#/contact">Contact</a> 
      </div> 
      <div ng-view></div> 
     </div> 
    </body> 
</html>

app.js

'use strict'; 

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

myAPP.config(['$routeProvider', 
    function (
     $routeProvider 
    ) { 
      $routeProvider. 
       when('/home', { 
        templateUrl: 'pages/home.html', 
        controller: 'HomeController' 
       }). 
       when('/about', { 
        templateUrl: 'pages/about.html', 
        controller: 'AboutController' 
       }). 
       when('/contact', { 
        templateUrl: 'pages/contact.html', 
        controller: 'ContactController' 
       }). 
       otherwise({ 
        redirectTo: '/home' 
       }); 
}]);

HomeController.js

angular.module('myAPP') 
    .controller('HomeController', function ($scope) { 
     // create a message to display in our view 
     $scope.message = 'Everyone come and see how good I look!'; 
    });

AboutController.js

angular.module('myAPP') 
.controller('AboutController', function ($scope) { 
     $scope.message = 'Look! I am an about page.'; 
});

ContactController.js

angular.module('myAPP') 
.controller('ContactController', function ($scope) { 
     $scope.message = 'Contact us! JK. This is just a demo.'; 
});

страницы/about.html

<h1> About </h1> 
{{message}}

страницы/contact.html

<h1> Contact </h1> 
{{message}}

страницы/Home.HTML

<h1> Home </h1> 
{{message}}

Вид папки:

Результат:

источник

2016-02-02 11:52:39

Посмотрите на мой вопрос. Я не хочу, чтобы все мои контроллеры были на той же странице. –

Я только что внес изменения, чтобы отразить ваш вопрос. Все проверено и работает как волшебство. Наслаждаться. –

Пожалуйста, дайте мне знать, если он решит вашу проблему. –

На мой взгляд, это должно работать, если вы не забыли включить контроллеры в индексном файле ...

источник

2016-02-02 11:26:07 shagrin

ngRoute - несколько контроллеров в отдельных файлах

ответ

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