क्या शुरुआत में अंगुलरजेएस को लोड करने के लिए एक तरीका है और जरूरत पड़ने पर नहीं?


190

मेरे पास इस तरह एक रूट सेटअप है:

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

मैं चाहता हूं कि शुरुआत में दोनों हिस्से को डाउनलोड करने के लिए कोणीयरज बना सकें और जब अनुरोध न किया जाए।

क्या यह संभव है?

जवाबों:


270

हां, इसके लिए कम से कम 2 समाधान हैं:

  1. प्रारंभ में लोड किए गए HTML में अपने हिस्से डालने के लिए scriptनिर्देश ( http://docs.angularjs.org/api/ng.directive:script ) का उपयोग करें
  2. यदि आवश्यक हो (संभवतः कॉल के परिणाम के आधार पर) आप जावास्क्रिप्ट से $templateCache( http://docs.angularjs.org/api/ng.$templateCache ) भी भर सकते हैं।$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


2
उत्तर के लिए धन्यवाद। मुझे टेम्पलेट कैश आइडिया पसंद है क्योंकि मैं चीजों को स्क्रिप्ट टैग में नहीं डालना चाहता। इसे कैसे उपयोग करे? डॉक्यूमेंटेशन खराब है। मैंने वहाँ की एक टिप्पणी में फ़िडल देखा। लेकिन मैं एक url से लोड करना चाहता हूं।
रंजीथ रामचंद्र

टिप्पणियों के आधार पर उत्तर को अपडेट करें
pkozlowski.opensource

4
मैं कभी-कभी <script>सर्वर-साइड के साथ इनलाइन टैग का उपयोग करता हूं । यह मुझे संगठनात्मक उद्देश्यों के लिए अलग-अलग फ़ाइलों के रूप में मेरे हिस्से रखने देता है, लेकिन फिर भी एक दस्तावेज़ में सब कुछ वितरित करता है।
ब्लेज़ेमॉन्गर 18

2
क्या आपको पता है कि एक समाधान बनाम दूसरे को चुनने में गति को बढ़ावा देना है?
Atav32

2
मैं http कॉल का उपयोग करके टेम्प्लेट कैशिंग कर रहा हूं, लेकिन समस्या यह है कि कैश्ड टेम्प्लेट का नाम url forexample होगा: $ http.get ('ऐप / सुधार / टेम्प्लेट / ग्रुप-करेक्शन-टेबल.html', {cache: $ templateCache}); और फिर जब भी मैं इस बदसूरत नाम का उपयोग करना चाहता हूं, तो मुझे इस तरह का नाम देना होगा :( जो मुझे पसंद नहीं है, इस तरह: <td एनजी-शामिल करें = "एप्लिकेशन / सुधार / टेम्प्लेट / समूह-सुधार- table.html ' ">
शिलान

25

यदि आप अपनी परियोजना के निर्माण के लिए ग्रंट का उपयोग करते हैं, तो एक प्लगइन है जो स्वचालित रूप से आपके हिस्से को एक कोणीय मॉड्यूल में इकट्ठा करेगा जो $ टेम्पलेटकैश को प्रीमेच करता है। आप अपने बाकी कोड के साथ इस मॉड्यूल को संक्षिप्त कर सकते हैं और स्टार्टअप पर एक फ़ाइल से सब कुछ लोड कर सकते हैं।

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


11
वहाँ भी है grunt-angular-templatesजो एक ही तरह का काम करता है - npmjs.org/package/grunt-angular-templates - एक ट्रीट काम करता है
बेन वडिंग

क्या यह भी सूचकांक फ़ाइल पर टेम्पलेट्स के लिए काम करता है? मेरे पास अपनी अनुक्रमणिका फ़ाइल में एनजी-व्यू और एनजी-इन है और मुझे दिखाने के लिए अपने आवेदन को प्राप्त करने में परेशानी हो रही है।
बैटमैन

16

एंगुलर में अपने html भाग को व्यवस्थित और पंजीकृत करने के लिए एक बिल्ड कार्य जोड़ें $templateCache। ( यह उत्तर कार्लगॉल्ड के उत्तर का अधिक विस्तृत रूप है )

के लिए घुरघुराना , का उपयोग घुरघुराना-कोणीय टेम्पलेट्स । के लिए घूंट , उपयोग घूंट-कोणीय 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>

2
हाय @james मैं इस gulp plugin का उपयोग कर रहा हूँ। सभी। Html ठीक से लोड होते हैं, लेकिन जब मैं html को कुछ डायलॉग बॉक्स प्लगइन के भाग के रूप में निर्दिष्ट करने की कोशिश करता हूं (मैं एनजी-मैटेरियल का उपयोग कर रहा हूं) तो यह 404 फेंकता है। पूर्व - $ mdDialog.show ({कंट्रोलर: 'unitGridCtrl', templateUrl: 'user / partials / unitGrid.html '});
आनंद

क्या आपने मेरे ऐप / विचारों के संदर्भों को अपने उपयोगकर्ता / पार्टिकल्स के साथ बदल दिया है?
जेम्स लॉरुक

धन्यवाद। मैं भागमभाग का रास्ता नहीं बदल रहा हूँ, मैंने अपना प्रश्न पोस्ट किया - stackoverflow.com/questions/29399453/…
आनंद

11

यदि आप स्क्रिप्ट टैग में प्रत्येक टेम्पलेट को लपेटते हैं, जैसे:

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

1 बड़ी फ़ाइल में सभी टेम्प्लेट को समेटें। यदि विज़ुअल स्टूडियो 2013 का उपयोग कर रहे हैं, तो वेब आवश्यक डाउनलोड करें - यह HTML बंडल बनाने के लिए एक राइट क्लिक मेनू जोड़ता है।

उस कोड को जोड़ें जिसे इस आदमी ने कोणीय $templatecacheसेवा को बदलने के लिए लिखा है - इसका केवल एक छोटा सा कोड है और यह काम करता है: Vojta Jee's Aist

इसके $http.getकि अपने बंडल फ़ाइल का उपयोग करने को बदला जाना चाहिए:

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

आपके मार्गों templateUrlको इस तरह दिखना चाहिए:

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

2

यदि आप रेल का उपयोग करते हैं, तो आप अपने सभी haml / erb टेम्प्लेट को एक टेम्पलेट मॉड्यूल में संकलित करने और हटाने के लिए एसेट पाइप लाइन का उपयोग कर सकते हैं, जिसे आपके एप्लिकेशन.js फ़ाइल में जोड़ा जा सकता है। चेकआउट http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager-loading


0

मैं सिर्फ ecoमेरे लिए काम करने के लिए उपयोग करता हूं। ecoडिफ़ॉल्ट रूप से Sprockets द्वारा समर्थित है। यह एंबेडेड कॉफ़ीस्क्रिप्ट के लिए एक शॉर्टहैंड है जो एक इको फ़ाइल लेता है और एक जावास्क्रिप्ट टेम्प्लेट फ़ाइल में संकलित करता है, और फ़ाइल को आपके संपत्ति फ़ोल्डर में किसी भी अन्य जेएस फाइलों की तरह माना जाएगा।

आपको केवल एक्सटेंशन .jst.eco के साथ एक टेम्प्लेट बनाना है और वहां कुछ html कोड लिखना है, और रेल स्वचालित रूप से संपत्तियों की पाइपलाइन के साथ फाइल संकलित और सेवा करेगी, और टेम्पलेट तक पहुंचने का तरीका वास्तव में आसान है: JST['path/to/file']({var: value});जहां path/to/fileतार्किक मार्ग पर आधारित है, इसलिए यदि आपके पास फ़ाइल है /assets/javascript/path/file.jst.eco, तो आप टेम्पलेट को एक्सेस कर सकते हैंJST['path/file']()

इसे कोणीयज के साथ काम करने के लिए, आप इसे टेम्पलेटडायर के बजाय टेम्पलेट विशेषता में पास कर सकते हैं, और यह जादुई रूप से काम करना शुरू कर देगा!


मुझे यकीन नहीं है कि यह सवाल का जवाब देता है, और प्रोग्रामिंग भाषा को बदलना शायद ओवरकिल है।
xdhmoore

0

आप अपने कंट्रोलर को $ स्टेट पास कर सकते हैं और फिर जब पेज लोड हो जाता है और कंट्रोलर में कॉल करने वाले को आप $ state.go ('इंडेक्स') या जो भी आंशिक रूप से आप लोड करना चाहते हैं उसे कॉल करते हैं। किया हुआ।


-1

एक और तरीका यह है कि सभी फाइलों को एक बार डाउनलोड करने और उन्हें ब्राउज़र के कैश में रखने के लिए HTML5 के एप्लिकेशन कैश का उपयोग करें। उपरोक्त लिंक में बहुत अधिक जानकारी है। निम्नलिखित जानकारी लेख से है:

विशेषता <html>शामिल करने के लिए अपना टैग बदलें manifest:

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

एक मैनिफ़ेस्ट फ़ाइल को माइम-प्रकार के साथ परोसा जाना चाहिए text/cache-manifest

एक सरल प्रकटन कुछ इस तरह दिखता है:

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

एक बार एक आवेदन ऑफ़लाइन होने के बाद यह तब तक कैश किया जाता है जब तक कि निम्न में से कोई एक न हो जाए:

  1. उपयोगकर्ता आपकी साइट के लिए अपने ब्राउज़र का डेटा संग्रहण साफ़ करता है।
  2. मैनिफ़ेस्ट फ़ाइल संशोधित है। नोट: मेनिफ़ेस्ट में सूचीबद्ध फ़ाइल को अपडेट करने का मतलब यह नहीं है कि ब्राउज़र उस संसाधन को फिर से कैश कर देगा। मैनिफ़ेस्ट फ़ाइल को स्वयं बदलना होगा।

1
दुर्भाग्य से यह सुविधा अब विकसित की गई है। developer.mozilla.org/en-US/docs/Web/HTML/… तो बस एक हेड अप, अपने जोखिम पर इस दृष्टिकोण का उपयोग करें
आलसी कोडर

HTML मानक के अनुसार, "यह सुविधा वेब प्लेटफ़ॉर्म से निकाले जाने की प्रक्रिया में है। (यह एक लंबी प्रक्रिया है जिसमें कई साल लगते हैं।)" सुझाए गए प्रतिस्थापन, सेवा कार्यकर्ता, अभी भी एक "प्रायोगिक तकनीक" है। 2016 की शुरुआत। अभी के लिए, मैं अभी भी एप्लिकेशन कैश का उपयोग कर रहा हूं क्योंकि यह मेरे अनुप्रयोगों के लिए अच्छा काम करता है।
ब्रेंट वॉशबर्न
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.