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

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

并且只能通过名称引用它：

angular.module('ionicApp')

Answer 2

您的Controller定义是否可能高于模块定义？

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

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

2 个答案: