Angular配置Router(路由)提示Controller NaNunction/undefined错误

墨蓝 2022-06-15 04:22 86阅读 0赞

> 在配置Angular 路由的时候，和以往一样使用如下配置：

*  router.js

var adminApp = angular.module('adminApp', ['oc.lazyLoad', 'ui.router']);
    angular.element(document).ready(function () { 
        angular.bootstrap(document, ['adminApp']);
    });
    
    adminApp.run(function ($rootScope, $state, $stateParams) { 
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });
    adminApp.config(function ($stateProvider, $urlRouterProvider) { 
        $urlRouterProvider.when("", "dashboard/accountManagement");
        $urlRouterProvider.otherwise("dashboard/accountManagement");
        $stateProvider
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: 'dashboard/dashboard.html',
                controller: 'dashboardController',
                resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) { 
                        return $ocLazyLoad.load(['dashboard/dashboard.js']);
                    }]
                }
            });
    });

*  dashboardController.js

angular.module("adminApp").controller('dashboardController', function ($scope) {
        console.log("dashboardController");
    });

> 但是提示错误：

angular.min.js:118 Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=dashboardController&p1=not%20aNaNunction%2C%20got%20undefined
        at http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:6:412
        at sb (http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:23:18)
        at Pa (http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:23:105)
        at http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:89:310
        at Object.<anonymous> (http://localhost:63342/static/plugin/angular-1.5.8/angular-ui-router.js:3971:42)
        at http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:16:71
        at la (http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:81:90)
        at p (http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:66:341)
        at g (http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:58:481)
        at http://localhost:63342/static/plugin/angular-1.5.8/angular.min.js:58:119

--------------------

> 原因是因为直接写controller无法识别，所有需要使用register来注册该controller

*  router.js

var adminApp = angular.module('adminApp', ['oc.lazyLoad', 'ui.router']);
    angular.element(document).ready(function () { 
        angular.bootstrap(document, ['adminApp']);
    });
    
    adminApp.run(function ($rootScope, $state, $stateParams) { 
        $rootScope.$state = $state;
        $rootScope.$stateParams = $stateParams;
    });
    adminApp.config(function ($stateProvider, $urlRouterProvider, $controllerProvider) { 
    
        //以下是新加入的
        adminApp.controllerProvider = $controllerProvider;
    
        $urlRouterProvider.when("", "dashboard/accountManagement");
        $urlRouterProvider.otherwise("dashboard/accountManagement");
        $stateProvider
            .state('dashboard', {
                url: '/dashboard',
                templateUrl: 'dashboard/dashboard.html',
                controller: 'dashboardController',
                resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) { 
                        return $ocLazyLoad.load(['dashboard/dashboard.js']);
                    }]
                }
            });
    });

*  dashboardController.js

angular.module("adminApp").controllerProvider.register('dashboardController', function ($scope) {
        console.log("dashboardController");
    });

发表评论取消回复

表情：

评论列表（有 0 条评论，86人围观）

还没有评论，来说两句吧...

相关阅读

相关 angular 路由

`index.html` 下添加`<base>` 元素，告诉路由器该如何合成导航用的URL <base href="/">复制代码新建angular项目时...

柔光的暖阳◎/ 2024年04月17日 13:49/ 0 赞/ 73 阅读

相关 Vue-Router路由与配置

现在的很多应用都流行SPA应用（singe page application) 。传统的项目大多使用多页面结构，需要切换内容的时候我们往往会进行单个html文件的跳转，这个

╰半夏微凉°/ 2024年03月30日 10:26/ 0 赞/ 59 阅读

相关路由Router

![1552472-20190802184530104-497847985.png][] 基本使用 ![1552472-20190802184820660-172948

╰半橙微兮°/ 2023年06月02日 15:59/ 0 赞/ 349 阅读

相关手动配置vue-router路由

首先终端输入创建路由指令： ![在这里插入图片描述][20210316180229775.jpg_pic_center] 创建router文件夹，并在该文件夹中创建in

灰太狼/ 2022年11月10日 05:47/ 0 赞/ 218 阅读

相关 Angular配置Router(路由)提示Controller NaNunction/undefined错误

> 在配置Angular 路由的时候，和以往一样使用如下配置： router.js var adminApp = angular.module('adminA

墨蓝/ 2022年06月15日 04:22/ 0 赞/ 87 阅读

相关 React-router（11）路由配置

11、路由配置 [DEMO地址][DEMO] > 参考 9.routeConfigTable.js 简单来说，就是有一个对象，如下： const Route

﹏ヽ暗。殇╰゛Y/ 2022年05月30日 04:11/ 0 赞/ 287 阅读

相关 react-router路由配置

React路由传参，路由配置 const RouteConfig = [ { path: 'first',

亦凉/ 2022年05月24日 04:47/ 0 赞/ 331 阅读

相关 angular2 ( Router 路由 )

Angular2以组件化的视角来看待web应用，使用Angular2开发的web应用，就是一棵组件树。组件大致分为两类：一类是如list、table这种通放之四海而皆准的通用组

客官°小女子只卖身不卖艺/ 2022年05月22日 09:18/ 0 赞/ 244 阅读

相关 angular路由ui-router路由嵌套，多视图，ocLazyLoad，写法，简易代码

直接撸代码，此demo目的只是实现功能，用法；简易demo目录 ![这里写图片描述][70] //index.html <!DOCTYPE html>

男娘i/ 2022年05月17日 10:39/ 0 赞/ 228 阅读

相关 Vue中管理路由-vue-router路由配置

在新建Vue Router时，Router的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等，这里只介绍

àì夳堔傛蜴生んèń/ 2022年02月24日 09:24/ 0 赞/ 1058 阅读