☰

Angular JS: パーシャルで js ファイルをロードする方法 質問する

tag-icon • tag-icon javascript jquery html angularjs
Angular JS: パーシャルで js ファイルをロードする方法 質問する

AngularJS については非常に初心者ですが、私がやろうとしていることは遅延読み込みという用語だと思います。いくつかの異なるブログを見てきましたが、純粋に AngularJS を使用した完全に機能するソリューションは見つかりませんでした。

index.html にを配置するとすべて正常に動作することは理解していますが<script src="js/process1.js"></script>、初期ロード時にプルダウンされる js の量を削減しようとしています。

スクリプト タグが部分にあると、読み込まれないため、P1Ctrl は作成されません。そのため、現在、ユーザーがアプリケーションにアクセスして process55 に移動しない場合は、process55 が使用されていなくても、ユーザーには process55 のコードがそこに残っています。

process1 ルートの実行時に、ファイルをロードして、process1.js で作成されたオブジェクトを main で定義されたアプリに挿入する方法はありますか?

インデックス.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: '/'});
});

部分/home.html:

   <div>
    Home Page
   </div>

部分/プロセス1.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!";
        }
]);

ベストアンサー1

コントローラーの遅延読み込みを簡単な方法で実装するには、次の操作を行う必要があります。

保存$controllerProvider.register（これは、すでにブートストラップされたAngularJSアプリにコントローラーを追加する唯一の方法です）をアプリの変数に保存します（メイン.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: '/'});
    }
]);

プロセス1.html:

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

そして今、プロセス1.js弊社のをご利用くださいregisterCtrl:

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

インデックス.htmlおそらく同じままです。 がprocess1.jsロードされているかどうかを確認します (コントローラーではなく、console.log()の本体で を使用するだけです)。ロードされていない場合は、Angular の前に jQuery を含めます。process1.jsP1Ctrl

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

重要：この方法は、jQuery を使用したこの小さなトリックが機能しないため、Angular 1.2.0-rc.2 および 1.2.0-rc.3 では機能しません。

.jsルート定義でファイルを依存関係として使用する、より複雑な (そしてよりきれいな) ソリューションについては、次の記事を参照してください。http://ify.io/angularjs での遅延読み込み/- rc.2 および rc.3 でも動作します。説明されているメソッドを実装した plunk は次のとおりです。http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

おすすめ記事