javascript - 包含 ui.router 应用程序后停止工作

Question

当我使用 ngRoute 时，我的应用程序完全正常工作，但现在我已切换到 angular-ui-router并且应用程序无法运行。

这是app.js 文件

var app = angular.module('app', ['ui.bootstrap', 'ui.router', 'uiSwitch']);


app.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('otherwise', {
            url : '/',
            templateUrl: 'app/templates/todolists.html',
            controller: 'todoCtrl'
        })
        .state('home', {
            url: '/',
            templateUrl: 'app/templates/todolists.html',
            controller: 'todoCtrl'
        })
        .state('page', {
            url: '/:pageNumber',
            templateUrl: 'app/templates/todolists.html',
            controller: 'todoCtrl'
        })
        .state('view', {
            url: '/view/:todoId',
            templateUrl: 'app/templates/viewtodolist.html',
            controller: 'todoViewCtrl'
        })
        .state('add', {
            url: '/add_new',
            templateUrl: 'app/templates/addtodolist.html',
            controller: 'todoAddCtrl'
        })
        .state('edit', {
            url: '/edit/:todoId',
            templateUrl: 'app/templates/edittodolist.html',
            controller: 'todoEditCtrl'
        });
    $urlRouterProvider.otherwise('/');
});

这是我的 Controller

    var app = angular.module('app');
    var controllers = {};

    controllers.todoCtrl = function ($scope, $timeout, todoFactory, $state, $stateParams) {

        console.log('test');
        if(!$stateParams.pageNumber){
            $scope.currentPage = 1;
        } else {
            $scope.currentPage = $stateParams.pageNumber;
        }
        console.log($scope.currentPage);
        getData();

        //get another portions of data on page chang$locationed
        $scope.pageChanged = function () {
            $state.go("details", {pageNumber: $scope.currentPage });
        };

        /**
         * Get list of todos with pagination
         */
        function getData() {
            todoFactory.index($scope.currentPage).then(function (data) {
                $scope.totalItems = data.paging.count;
                $scope.itemsPerPage = data.paging.limit;
                $scope.todos = data.Todos;
            });
        }
    };
    app.controller(controllers);

这是我加载脚本的index.html

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- Angular stuff -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-bootstrap-npm/dist/angular-bootstrap.js"></script>
<script src="node_modules/angular-bootstrap-npm/dist/angular-bootstrap-tpls.js"></script>
<script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script src="node_modules/angular-ui-switch/angular-ui-switch.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/todoCtrl.js"></script>
<script src="app/factories/todoFactory.js"></script>
<script src="app/filters/dateFilter.js"></script>

问题是我没有收到任何错误， Controller 未加载(否则测试字符串将打印在控制台中)，只有空白页面(检查下图)。

Answer 1

我认为问题在于您没有为 Controller 分配名称。

所以尝试这样的事情

var app = angular.module('app');

    app.controller('TodoCtrl', TodoCtrl);

    // minification safe injection
    TodoCtrl.$inject = ['$scope', '$timeout', 'todoFactory', '$state', '$stateParams');

    function TodoCtrl ($scope, $timeout, todoFactory, $state, $stateParams) {

        console.log('test');
        if(!$stateParams.pageNumber){
            $scope.currentPage = 1;
        } else {
            $scope.currentPage = $stateParams.pageNumber;
        }
        console.log($scope.currentPage);
        getData();

        //get another portions of data on page chang$locationed
        $scope.pageChanged = function () {
            $state.go("details", {pageNumber: $scope.currentPage });
        };

        /**
         * Get list of todos with pagination
         */
        function getData() {
            todoFactory.index($scope.currentPage).then(function (data) {
                $scope.totalItems = data.paging.count;
                $scope.itemsPerPage = data.paging.limit;
                $scope.todos = data.Todos;
            });
        }
    };

除此之外，我强烈建议阅读 John Papas Angular Styleguide 它会教你诸如避免 $scope 和使用 controllerAs 语法之类的事情