Как переместить конфигурацию контроллера в собственный файл?

Question

У меня есть следующий угловую конфигурацию в файле index.js:

angular.module('ionicApp', ['ionic']) 

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 

     $stateProvider 
      .state('entry', { 
       url: '/entry', 
       templateUrl: 'app/views/entry/entry.html', 
       controller: 'EntryPageController' 
      }) 


     $urlRouterProvider.otherwise('/entry'); 
    }]) 

    .controller('EntryPageController', ['$scope', '$state', function ($scope, $state) { 
     $scope.navTitle = 'Entry Page'; 

     $scope.signIn = function() { 
      $state.go('main.home'); 
     } 
    }]) 

Я пытаюсь переместить определение контроллера (который работает в приведенном выше примере) в отдельный файл, а именно:

// file name entry-ctrl.js 
(function() { 
    'use strict'; 

    angular.module('ionicApp', ['ionic']) 
     .controller('EntryPageController', ['$scope', '$state', EntryPageController]); 

    function EntryPageController($scope, $state) { 
     $scope.navTitle = 'Entry Page'; 

     $scope.signIn = function() { 
      $state.go('main.home'); 
     } 
    } 
}) 
(); 

в index.html я ссылается файл как

<script src="app/views/entry/entry-ctrl.js"></script> 

к сожалению, я не могу получить приложение, чтобы правильно вести себя. Когда я использую исходный код, страница появляется, как я ожидаю. Но когда я использую код в файле entry-ctrl.js, ничего не появляется.

Есть ли что-то еще, что мне нужно сделать, чтобы использовать код в файле entry-ctrl.js?

Для записи, это мой entry.html:

<ion-view title="{{navTitle}}" class="bubble-background"> 
    <ion-content has-header="true" padding="true"> 
     <h1>I'm working!</h1> 
     <a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a> 
    </ion-content> 

</ion-view> 

Answer 1

Это кажется, что вы объявили о своем угловом приложении дважды, один раз в index.js и в entry-ctrl.js.

Я хотел бы изменить его к этому:

index.js

angular.module('ionicApp', ['ionic']) 

    .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { 

     $stateProvider 
      .state('entry', { 
       url: '/entry', 
       templateUrl: 'app/views/entry/entry.html', 
       controller: 'EntryPageController' 
      }) 


     $urlRouterProvider.otherwise('/entry'); 
    }]) 

начального ctrl.js

(function() { 
    'use strict'; 

    angular.module('ionicApp') 
     .controller('EntryPageController', ['$scope', '$state', EntryPageController]); 

    function EntryPageController($scope, $state) { 
     $scope.navTitle = 'Entry Page'; 

     $scope.signIn = function() { 
      $state.go('main.home'); 
     } 
    } 
})(); 

---

в угловых, вы объявляете ваши приложение с массивом зависимостей :

angular.module('ionicApp', ['ionic']) 

и вы ссылаться на него только по имени:

angular.module('ionicApp') 

Answer 2

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

(function() { 
    'use strict'; 

    // First, define your Controller 
    function EntryPageController($scope, $state) { 
     $scope.navTitle = 'Entry Page'; 

     $scope.signIn = function() { 
      $state.go('main.home'); 
     } 
    } 

    // Then call it in your module 
    angular.module('ionicApp', ['ionic']) 
     .controller('EntryPageController', ['$scope', '$state', EntryPageController]); 

})(this);