AngularJS và tích hợp Webpack

Question

Tôi đang tìm kiếm trợ giúp với việc sử dụng webpack cho ứng dụng AngularJS lớn. Chúng tôi đang sử dụng cấu trúc thư mục dựa trên tính năng (mỗi tính năng/trang có một mô-đun và họ có bộ điều khiển, chỉ thị). Tôi đã cấu hình thành công webpack để làm cho nó hoạt động với Grunt, nó tạo ra một gói duy nhất. Tôi muốn tạo các khối như là một ứng dụng lớn, chúng tôi muốn tải các tạo phẩm mô-đun (trang/tính năng) không đồng bộ.

Tôi đang xem một số ví dụ về webpack để sử dụng 'code splitting' sử dụng cú pháp require([deps],fn). Tuy nhiên tôi không thể có được những khối lười biếng. Trước hết, tôi không biết chính xác nơi nào, tôi sẽ cần phải nhập các khối này trước khi AngularJS định tuyến người dùng đến trang tiếp theo. Tôi đang đấu tranh để tìm một sự phân chia trách nhiệm rõ ràng.

Có ai đó trỏ tôi đến một ứng dụng ví dụ AngularJS trong đó webpack được sử dụng để tải bộ điều khiển/chỉ thị/bộ lọc không đồng bộ sau mỗi tuyến đường không?

ít trong các liên kết Tôi sau: Should I use Browserify or Webpack for lazy loading of dependancies in angular 1.x https://github.com/petehunt/webpack-howto#9-async-loading http://dontkry.com/posts/code/single-page-modules-with-webpack.html

Answer 1

Sagar Ganatra đã viết một hữu ích blog post về mã tách.

Chia nhỏ mã đáng ngạc nhiên không thực sự được hỗ trợ bởi hệ thống mô-đun góc. Tuy nhiên, có một cách để đạt được việc tách mã bằng cách lưu tham chiếu đến các nhà cung cấp đặc biệt của góc trong giai đoạn cấu hình.

[...] khi Angular khởi tạo hoặc khởi động ứng dụng, chức năng - bộ điều khiển, dịch vụ, v.v. có sẵn trên phiên bản mô-đun. Ở đây, chúng tôi đang lười tải các thành phần và các chức năng không có sẵn tại một điểm sau này; do đó chúng tôi phải sử dụng các chức năng của nhà cung cấp khác nhau và đăng ký các thành phần này. Các nhà cung cấp chỉ có sẵn trong phương thức cấu hình và do đó chúng ta sẽ phải lưu trữ một tham chiếu của các nhà cung cấp này trong hàm cấu hình khi ứng dụng được khởi tạo.

window.app.config([ 
    '$routeProvider', 
    '$controllerProvider', 
    '$compileProvider', 
    '$filterProvider', 
    '$provide', 
    function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) { 

     $routeProvider.when('/login', { 
      templateUrl: 'components/login/partials/login.html', 
      resolve: { 
       load: ['$q', '$rootScope', function ($q, $rootScope) { 

        var deferred = $q.defer(); 

        // lazy load controllers, etc. 
        require ([ 
         'components/login/controllers/loginController', 
         'components/login/services/loginService' 
        ], function() { 

         $rootScope.$apply(function() { 
          deferred.resolve(); 
         }); 

        }); 

        return deferred.promise; 
       }] 
      } 
     }); 


     //store a reference to various provider functions 
     window.app.components = { 
      controller: $controllerProvider.register, 
      service: $provide.service 
     }; 

    } 
]); 

Bây giờ bên loginController của bạn ví dụ bạn viết

app.components.controller('loginController'); 

để xác định bộ điều khiển mới của bạn uể oải.

Nếu bạn cũng muốn tải mẫu của mình xuống, tôi khuyên bạn nên sử dụng ui-router. Ở đó bạn có thể chỉ định một templateProvider đó là basically a function to load templates async

Answer 2

Đây là trích dẫn từ https://github.com/webpack/webpack/issues/150

webpack là một bundler mô-đun không phải là một bộ nạp javascript. Nó đóng gói các tập tin từ đĩa cục bộ và không tải các tập tin từ web (ngoại trừ các khối riêng của nó).

Sử dụng trình tải javascript, i. e. script.js

var $script = require("scriptjs"); 
$script("//ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js", function() { 
    // ... 
});