javascript - 如何将 Controller 配置移至其自己的文件中？

Question

我在文件index.js中有以下 Angular 配置:

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

我正在尝试将 Controller 定义(在上面的示例中起作用)移动到它自己的文件中，如下所示:

// 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

您似乎声明了两次 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');
    }])

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 中，您可以使用一系列依赖项来声明您的应用程序:

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

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

angular.module('ionicApp')