angularJS 路由加载js controller 未定义解决方案

最新推荐文章于 2023-03-07 09:35:39 发布

weixin_33795806

最新推荐文章于 2023-03-07 09:35:39 发布

阅读量319

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3756690/blog/3025357

本文聚焦框架使用中路由加载js未定义的问题，介绍了路由$routeProvider异步加载js的懒加载用法。指出通过路由js需引用第三方库加载，还要修改被加载脚本代码，以防止控制器未定义，实例涉及angularJS和ocLazyLoad。

2019独角兽企业重金招聘Python工程师标准>>>

说明

本文主要说明，在angularJS框架使用中，angularJS 路由加载js controller 未定义解决方案。

路由 $routeProvider 异步加载js

路由的基本用法，请查看官方文档，下面实例只说明，懒加载用法。

实例使用版本:

angularJS:1.7.6

ocLazyLoad:1.1.0

片段说明

通过路由懒加载js，需要引用第三方ocLazyLoad库加载，并且修改被加载脚本代码，防止控制器出现未定义现象。

定义 ocLazyLoad 库

angular.module("app_name", ['ngRoute','ngSanitize','oc.lazyLoad'])

路由设置

angular.config(['$routeProvider', function($routeProvider){
    $routeProvider
    	// 路由示例图
        .when('/',{
        	// 模版地址
            templateUrl:'/PC/Public/Template/CustomerData.php',
        	// 控制器名字
            controller:'controller_name',
        	// 依赖请求
            resolve: {
                // 调用 ocLazyLoad
                deps: ['$ocLazyLoad',function (e) {
                    return e.load(['/PC/Public/Template/L/L0/CustomerModel/CustomerData.js']);
                }]
            }
        })
        .otherwise({redirectTo:'/'});
}]);

被加载js代码

// 添加指定 app 名称，防止出现未定义控制器
angular.module("app_name").controller("controller_name", ["$scope", function ($scope) {

    console.log("$scope");

}]);

转载于:https://my.oschina.net/u/3756690/blog/3025357