angularJS 路由加載js controller 未定義 解決方案

說明

本文主要說明，在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");

}]);