Angular JS: Cách tải các tệp js trong partials

Rất mới với AngularJS, tôi đoán thuật ngữ cho những gì tôi đang cố gắng làm là tải chậm. Tôi đã xem xét một số blog khác nhau và tôi đã không tìm thấy một giải pháp làm việc hoàn chỉnh mà là hoàn toàn bằng cách sử dụng AngularJS.Angular JS: Cách tải các tệp js trong partials

Tôi hiểu rằng nếu tôi đặt <script src="js/process1.js"></script> trong index.html, tất cả đều hoạt động tốt, tôi đang cố cắt giảm số lượng js được giảm xuống khi tải ban đầu.

Với thẻ tập lệnh nằm ở một phần, thẻ không bao giờ được tải để P1Ctrl không bao giờ được tạo. Vì vậy, hiện tại, nếu người dùng truy cập vào ứng dụng và không bao giờ chuyển sang process55, người dùng vẫn có mã ở đó cho process55 mặc dù nó chưa bao giờ được sử dụng.

Có cách nào để tải tệp và tiêm các đối tượng được tạo trong process1.js vào ứng dụng được xác định trong chính, tại thời điểm process1 được thực thi không?

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!"; 
     } 
]);

Nguồn

2013-10-17 John

Để thực hiện tải lười biếng của bộ điều khiển theo cách đơn giản, bạn phải làm như sau:

Lưu $controllerProvider.register (đó là phương pháp duy nhất để thêm một bộ điều khiển vào đã bootstrapped AngularJS ứng dụng) vào biến trong ứng dụng của bạn (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>

Và bây giờ, trong process1.js bạn sử dụng của chúng tôi registerCtrl:

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

index.html lẽ vẫn giữ nguyên. Kiểm tra xem process1.js của bạn có đang được tải hay không (chỉ cần sử dụng console.log() ngay trong phần thân của process1.js, không ở trong bộ điều khiển P1Ctrl). Nếu nó không phải là, bao gồm jQuery trước góc:

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

QUAN TRỌNG: Phương pháp này không làm việc với góc 1.2.0-rc.2 và 1.2.0-rc.3, vì thủ thuật này ít với jQuery không hoạt động.

Để có giải pháp phức tạp hơn (và đẹp hơn), với .js tệp làm phụ thuộc trong định nghĩa tuyến đường, hãy kiểm tra bài viết đó: http://ify.io/lazy-loading-in-angularjs/ - nó cũng hoạt động với rc.2 và rc.3.Dưới đây là plunk thực hiện phương pháp mô tả: http://plnkr.co/edit/ukWikO5TVDtQ1l9WlrGD

Nguồn

2013-10-17 19:46:09 lort

Đặt tất cả điều này lại với nhau và nó không phá vỡ, nhưng nó không hoạt động. Đã thử và không có tham chiếu jquery. Trang hiển thị không có lỗi nhưng js không bao giờ được gọi và dữ liệu được đặt trong khung nhìn bởi bộ điều khiển. Nhìn vào trang web IFY mà bạn đã đề cập có vẻ như cho biết tôi cần một trình tải tập lệnh và sử dụng các lời hứa. Tôi biết tôi đang ở gần ... nhưng chưa hoàn toàn ở đó. – John

Tôi vừa mới nhận ra rằng mẹo này bằng cách sử dụng jQuery không hoạt động với Angular 1.2. – lort

Điều đó đã làm cho các trick chuyển sang 1.1.5. – John

Angular JS: Cách tải các tệp js trong partials

Trả lời

Các vấn đề liên quan