如何將控制器配置移動到它自己的文件中？

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文件中使用代碼時，沒有任何內容出現。

還有什麼我需要做的使用入口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);