Angular JS：如何在局部文件中加载js文件

常业

2023-03-14

问题内容：

对于AngularJS来说，这很陌生，我想我打算做的术语是延迟加载。我看过几个不同的博客，但没有找到纯粹使用AngularJS的完整工作解决方案。

我知道，如果将<script src="js/process1.js"></script>in
放到index.html中，则一切正常，我正在尝试减少在初始负载时减少的js数量。

脚本标签位于局部文件中时，它永远不会被加载，因此永远不会创建P1Ctrl。因此，当前，如果用户进入该应用程序而从未去过process55，则即使从未使用过该用户，该用户仍然在其中拥有用于process55的代码。

在执行process1路由时，是否有一种方法可以加载文件并将process1.js中创建的对象注入main中定义的应用程序中？

index.html：

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Large Angular App</title>
    <link rel="stylesheet" href="lib/foundation/css/foundation.min.css" />
</head>
<body ng-app="largeApp" ng-controller="LargeAppController">

    <div>
        <a href="#/home">Home</a> | <a href="#/process1">Process1</a>
    </div>
    <br/>
    <br/>
    <br/>

    <ng-view>Test</ng-view>


    <script type="text/javascript" src="lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="lib/angular/angular.js"></script>
    <script type="text/javascript" src="lib/angular/angular-route.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>

js / main.js：

var app = angular.module("largeApp", ['ngRoute']);

var appCtrl = app.controller("LargeAppController", function(){});


app.config(function ($routeProvider, $controllerProvider) {
    // save references to the providers

    app.registerCtrl = $controllerProvider.register,

    $routeProvider.when('/', {templateUrl: 'partials/home.html'});
      //Thinking I need to set up a resolve to fire off a script loader to load js.
    $routeProvider.when('/process1', {templateUrl: 'partials/process1/process1.html'});
    $routeProvider.otherwise({redirectTo: '/'});
});

partials / home.html：

   <div>
    Home Page
   </div>

partials / process1.html：

<script type="text/javascript" src="js/process1/Process1Controller.js"></script>
Process 1 {{process1data}}

js / process1.js：

console.log("I made it here");

app.registerCtrl('Process1Controller',function($scope){
            $scope.process1data = "Hello!";
        }
]);

问题答案：

要以简单的方式实现控制器的延迟加载，您必须执行以下操作：

保存$controllerProvider.register（将控制器添加到已经自举的AngularJS应用程序中的唯一方法）到应用程序中的变量（
main.js ）：

var app = angular.module('app',["ngRoute"]);
app.config(['$routeProvider', '$controllerProvider',
    function($routeProvider, $controllerProvider) {
        // remember mentioned function for later use
        app.registerCtrl = $controllerProvider.register;
        //your routes
        $routeProvider.when('/', {templateUrl: 'partials/home.html'});
        $routeProvider.when('/process1', {templateUrl: 'partials/process1.html'});
        $routeProvider.otherwise({redirectTo: '/'});
    }
]);

process1.html ：

<script src="js/process1.js"></script>
<div ng-controller="P1Ctrl">
    {{content}}
</div>

现在，在 process1.js中， 您可以使用以下代码registerCtrl：

app.registerCtrl('P1Ctrl', function($scope)
{
   $scope.content = '...'; 
});

index.html
可能保持不变。检查是否process1.js正在加载您的代码（只需console.log()在的主体中正确使用process1.js，而不是在P1Ctrl控制器中使用）。如果不是，请在Angular之前包含jQuery：

<script src="lib/jquery/jquery.js"></script>
<script src="lib/angular/angular.js"></script>

重要说明： 此方法不适用于angular 1.2.0-rc.2和1.2.0-rc.3，因为jQuery的这一小技巧不起作用。

对于更复杂（更漂亮）的解决方案（.js文件以路由定义为依存关系），请查看以下文章：http ://ify.io/lazy-loading-in-
angularjs/-它也可与rc.2和rc.3一起使用。这是简单的实现描述的方法：http
:
//plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

Angular JS：如何在局部文件中加载js文件

相关阅读

相关文章

相关问答

相关工具

相关文档