Javascript 如何将控制器配置移动到自己的文件中？

我在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文件中的代码，我还需要做些什么

作为记录，这是my 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>

我在工作！
登录

您似乎两次声明了angular应用程序，一次是在

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');
    }])

(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');
        }
    }
})();

输入ctrl.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');
    }])

(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中，您使用一系列依赖项声明应用程序：

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

并且您仅通过名称引用它：

angular.module('ionicApp')

---

您似乎声明了两次angular应用程序，一次是在

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');
    }])

(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');
        }
    }
})();

输入ctrl.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');
    }])

(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中，您使用一系列依赖项声明应用程序：

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

并且您仅通过名称引用它：

angular.module('ionicApp')

---

控制器定义是否可能必须高于模块定义

(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);

---

控制器定义是否可能必须高于模块定义

(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);

---

您是否尝试将

EntryPageController

定义置于

angular.module

调用上方？您是否尝试将

EntryPageController

定义置于

angular.module

调用上方？