Có cách nào để làm cho AngularJS tải partials ngay từ đầu và không khi cần thiết không?

Tôi có một thiết lập tuyến đường như thế này:

var myApp = angular.module('myApp', []).
    config(['$routeProvider', function ($routeProvider) {
    $routeProvider.
        when('/landing', {
            templateUrl: '/landing-partial',
            controller: landingController
        }).
        when('/:wkspId/query', {
            templateUrl: '/query-partial',
            controller: queryController
        }).
        otherwise({
            redirectTo: '/landing'
        });
}]);

Tôi muốn có thể làm cho angularjs tải xuống cả hai phần đầu và không khi được yêu cầu.

Có thể không?

Có, có ít nhất 2 giải pháp cho việc này:

1. Sử dụng scriptchỉ thị ( http://docs.angularjs.org/api/ng.directive:script ) để đặt các phần của bạn vào HTML được tải ban đầu
2. Bạn cũng có thể điền $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) từ JavaScript nếu cần (có thể dựa trên kết quả $httpcuộc gọi)

Nếu bạn muốn sử dụng phương thức (2) để điền vào, $templateCachebạn có thể làm như thế này:

$templateCache.put('second.html', '<b>Second</b> template');

Tất nhiên nội dung mẫu có thể đến từ một $httpcuộc gọi:

$http.get('third.html', {cache:$templateCache});

Dưới đây là plunker những kỹ thuật đó: http://plnkr.co/edit/J6Y2dc?p=preview

Nếu bạn sử dụng Grunt để xây dựng dự án của mình, có một plugin sẽ tự động lắp ráp các phần của bạn thành một mô-đun Angular có giá trị $ templateCache. Bạn có thể nối mô-đun này với phần còn lại của mã và tải mọi thứ từ một tệp khi khởi động.

https://npmjs.org/package/grunt-html2js

Thêm một nhiệm vụ xây dựng để nối và đăng ký các phần html của bạn trong Angular $templateCache. ( Câu trả lời này là một biến thể chi tiết hơn của câu trả lời của karlgold. )

Đối với grunt , sử dụng grunt-angular-samples . Đối với gulp , sử dụng gulp-angular-templatecache .

Dưới đây là đoạn mã cấu hình / mã để minh họa.

gruntfile.js Ví dụ:

ngtemplates: {
  app: {                
    src: ['app/partials/**.html', 'app/views/**.html'],
    dest: 'app/scripts/templates.js'
  },
  options: {
    module: 'myModule'
  }
}

gulpfile.js Ví dụ:

var templateCache = require('gulp-angular-templatecache');
var paths = ['app/partials/.html', 'app/views/.html'];

gulp.task('createTemplateCache', function () {
return gulp.src(paths)
    .pipe(templateCache('templates.js', { module: 'myModule', root:'app/views'}))
    .pipe(gulp.dest('app/scripts'));
    });

samples.js (tệp này được tự động tạo bởi tác vụ xây dựng)

$templateCache.put('app/views/main.html', "<div class=\"main\">\r"...

index.html

<script src="app/scripts/templates.js"></script>
<div ng-include ng-controller="main as vm" src="'app/views/main.html'"></div>

Nếu bạn bọc từng mẫu trong thẻ script, ví dụ:

<script id="about.html" type="text/ng-template">
<div>
    <h3>About</h3>
    This is the About page
    Its cool!
</div>
</script>

Ghép tất cả các mẫu thành 1 tệp lớn. Nếu sử dụng Visual Studio 2013, hãy tải xuống các yếu tố cần thiết cho Web - nó thêm menu nhấp chuột phải để tạo Gói HTML.

Thêm mã mà anh chàng này đã viết để thay đổi $templatecachedịch vụ góc cạnh - đây chỉ là một đoạn mã nhỏ và nó hoạt động: Vojta Jina's Gist

Của nó $http.getcần được thay đổi để sử dụng tập tin bó của bạn:

allTplPromise = $http.get('templates/templateBundle.min.html').then(

Tuyến đường của bạn templateUrlsẽ trông như thế này:

        $routeProvider.when(
            "/about", {
                controller: "",
                templateUrl: "about.html"
            }
        );

Nếu bạn sử dụng đường ray, bạn có thể sử dụng đường dẫn tài sản để biên dịch và chuyển tất cả các mẫu haml / erb của bạn vào một mô-đun mẫu có thể được thêm vào tệp application.js của bạn. Thanh toán http://minhajuddin.com/2013/04/11/angularjs-temsheet-and-rails-with-eager-loading

Tôi chỉ sử dụng ecođể làm công việc cho tôi. ecođược Sprockets hỗ trợ theo mặc định. Đó là một cách viết tắt cho Coffeescript nhúng để lấy tệp sinh thái và biên dịch thành tệp mẫu Javascript và tệp sẽ được xử lý như bất kỳ tệp js nào khác bạn có trong thư mục tài sản của mình.

Tất cả những gì bạn cần làm là tạo một mẫu có phần mở rộng .jst.eco và viết một số mã html vào đó, và rails sẽ tự động biên dịch và phục vụ tệp bằng đường dẫn tài sản và cách truy cập mẫu rất dễ dàng: JST['path/to/file']({var: value});trong đó path/to/fileđược dựa trên đường dẫn logic, vì vậy nếu bạn có tệp trong /assets/javascript/path/file.jst.eco, bạn có thể truy cập vào mẫu tạiJST['path/file']()

Để làm cho nó hoạt động với angularjs, bạn có thể chuyển nó vào thuộc tính template thay vì templateDir và nó sẽ bắt đầu hoạt động một cách kỳ diệu!

Bạn có thể chuyển $ state cho bộ điều khiển của mình và sau đó khi trang tải và gọi getter trong bộ điều khiển bạn gọi $ state.go ('index') hoặc bất kỳ phần nào bạn muốn tải. Làm xong.

Một phương pháp khác là sử dụng Cache ứng dụng của HTML5 để tải xuống tất cả các tệp một lần và giữ chúng trong bộ đệm của trình duyệt. Các liên kết trên có chứa nhiều thông tin hơn. Các thông tin sau đây là từ bài viết:

Thay đổi <html>thẻ của bạn để bao gồm một manifestthuộc tính:

<html manifest="http://www.example.com/example.mf">

Một tệp kê khai phải được phục vụ với loại mime text/cache-manifest.

Một bảng kê đơn giản trông giống như thế này:

CACHE MANIFEST
index.html
stylesheet.css
images/logo.png
scripts/main.js
http://cdn.example.com/scripts/main.js

Khi một ứng dụng ngoại tuyến, nó vẫn được lưu trong bộ nhớ cache cho đến khi một trong những điều sau đây xảy ra:

1. Người dùng xóa lưu trữ dữ liệu trình duyệt của họ cho trang web của bạn.
2. Tệp kê khai được sửa đổi. Lưu ý: cập nhật tệp được liệt kê trong tệp kê khai không có nghĩa là trình duyệt sẽ lưu lại tài nguyên đó. Bản thân tệp kê khai phải được thay đổi.