มีวิธีทำให้ AngularJS โหลด partials ในตอนเริ่มต้นหรือไม่เมื่อจำเป็น?

ฉันมีการตั้งค่าเส้นทางเช่นนี้:

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

ฉันต้องการให้สามารถดาวน์โหลด angularjs ได้ทั้งตอนแรกและตอนที่ร้องขอ

เป็นไปได้ไหม?

ใช่มีทางออกอย่างน้อย 2 ข้อสำหรับสิ่งนี้:

1. ใช้scriptคำสั่ง ( http://docs.angularjs.org/api/ng.directive:script ) เพื่อใส่งานของคุณใน HTML ที่โหลดครั้งแรก
2. คุณสามารถกรอก$templateCache( http://docs.angularjs.org/api/ng.$templateCache ) จาก JavaScript ได้ถ้าต้องการ (อาจเป็นไปตามผลการ$httpโทร)

หากคุณต้องการใช้วิธีการ (2) ในการกรอกข้อมูล$templateCacheคุณสามารถทำสิ่งนี้ได้:

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

แน่นอนว่าเนื้อหาเทมเพลตอาจมาจากการ$httpโทร:

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

นี่คือเทคนิคที่พลั่วเกอร์เหล่านั้นคือ: http://plnkr.co/edit/J6Y2dc?p=preview

หากคุณใช้ Grunt ในการสร้างโครงการของคุณจะมีปลั๊กอินที่จะรวบรวมชิ้นงานของคุณโดยอัตโนมัติในโมดูล Angular ที่ primes $ templateCache คุณสามารถต่อโมดูลนี้เข้ากับส่วนที่เหลือของรหัสและโหลดทุกอย่างจากไฟล์เดียวเมื่อเริ่มต้น

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

เพิ่มการสร้างงานในการเชื่อมและการลงทะเบียนของคุณ HTML partials $templateCacheในเชิงมุม ( คำตอบนี้เป็นคำตอบที่แตกต่างของคำตอบของ karlgold )

สำหรับเสียงฮึดฮัดใช้ฮึดฮัดเชิงมุมแม่แบบ สำหรับอึกใช้อึกเชิงมุม-templatecache

ด้านล่างเป็นตัวอย่างโค้ดการกำหนดค่า / เพื่อแสดง

ตัวอย่าง gruntfile.js:

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

ตัวอย่าง gulpfile.js:

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'));
    });

templates.js (ไฟล์นี้สร้างอัตโนมัติโดยงานบิลด์)

$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>

หากคุณห่อแต่ละเทมเพลตในแท็กสคริปต์เช่น:

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

ต่อเทมเพลตทั้งหมดเป็นไฟล์ขนาดใหญ่ 1 ไฟล์ หากใช้ Visual Studio 2013 ดาวน์โหลดสิ่งจำเป็นสำหรับเว็บ - เพิ่มเมนูคลิกขวาเพื่อสร้าง HTML Bundle

เพิ่มรหัสที่ผู้ชายคนนี้เขียนไว้เพื่อเปลี่ยน$templatecacheบริการเชิงมุม- เป็นเพียงชิ้นส่วนรหัสขนาดเล็กเท่านั้นและใช้งานได้: Vojta Jina's Gist

มัน$http.getควรจะเปลี่ยนเป็นไฟล์บันเดิลของคุณ:

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

เส้นทางของคุณtemplateUrlควรมีลักษณะเช่นนี้:

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

หากคุณใช้ rails คุณสามารถใช้ไพพ์ไลน์ของสินทรัพย์เพื่อรวบรวมและผลักเทมเพลต haml / erb ทั้งหมดของคุณลงในโมดูลแม่แบบซึ่งสามารถผนวกเข้ากับไฟล์ application.js ของคุณ ชำระเงิน http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading

ฉันใช้ecoเพื่อทำงานให้ฉัน ecoได้รับการสนับสนุนโดย Sprockets เป็นค่าเริ่มต้น มันเป็นชวเลขสำหรับ Embedded Coffeescript ซึ่งใช้ไฟล์ eco และคอมไพล์ลงในไฟล์เทมเพลต Javascript และไฟล์นั้นจะได้รับการปฏิบัติเหมือนไฟล์ js อื่น ๆ ที่คุณมีในโฟลเดอร์ทรัพย์สินของคุณ

สิ่งที่คุณต้องทำคือการสร้างเทมเพลตที่มีนามสกุล. jst.eco และเขียนโค้ด html ในนั้นและ Rails จะคอมไพล์และให้บริการไฟล์กับไพพ์ไลน์ของสินทรัพย์โดยอัตโนมัติและวิธีการเข้าถึงเทมเพลตนั้นง่ายมาก: JST['path/to/file']({var: value});ที่ไหนpath/to/fileขึ้นอยู่กับโลจิคัลพา ธ ดังนั้นหากคุณมีไฟล์/assets/javascript/path/file.jst.ecoคุณสามารถเข้าถึงเทมเพลตได้ที่JST['path/file']()

ในการทำให้มันทำงานกับ angularjs คุณสามารถส่งไปยังแอตทริบิวต์ template แทน templateDir และมันจะเริ่มทำงานได้อย่างน่าอัศจรรย์!

คุณสามารถส่ง $ state ไปยังคอนโทรลเลอร์ของคุณและเมื่อเพจโหลดและเรียกใช้ getter ในคอนโทรลเลอร์ที่คุณเรียกใช้ $ state.go ('index') หรืออะไรก็ตามที่คุณต้องการโหลด เสร็จสิ้น

อีกวิธีหนึ่งคือการใช้Application Cacheของ HTML5 เพื่อดาวน์โหลดไฟล์ทั้งหมดหนึ่งครั้งและเก็บไว้ในแคชของเบราว์เซอร์ ลิงค์ด้านบนมีข้อมูลมากขึ้น ข้อมูลต่อไปนี้มาจากบทความ:

เปลี่ยนของคุณ <html>แท็กเพื่อรวมmanifestแอตทริบิวต์:

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

ไฟล์รายการจะต้องให้บริการกับประเภท mime text/cache-manifestmime

รายการง่าย ๆ มีลักษณะดังนี้:

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

เมื่อแอปพลิเคชันออฟไลน์มันจะยังคงถูกเก็บไว้จนกว่าจะมีสิ่งใดสิ่งหนึ่งต่อไปนี้เกิดขึ้น:

1. ผู้ใช้ล้างที่เก็บข้อมูลของเบราว์เซอร์สำหรับเว็บไซต์ของคุณ
2. ไฟล์ Manifest ถูกแก้ไข หมายเหตุ: การอัปเดตไฟล์ที่ปรากฏในรายการไม่ได้หมายความว่าเบราว์เซอร์จะแคชทรัพยากรนั้นอีกครั้ง ไฟล์ Manifest ต้องถูกแก้ไข