শুরুতে অ্যাঙ্গুলার জেএস লোড পার্টিয়াল করার কোনও উপায় আছে এবং যখন প্রয়োজন হয় না তখন?

Question

আমার এইরকম একটি রুট সেটআপ রয়েছে:

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 ডাউনলোড করতে সক্ষম হতে চাই, যখন অনুরোধ করা হয় না।

এটা কি সম্ভব?

Answer 1

হ্যাঁ, এর জন্য কমপক্ষে 2 টি সমাধান রয়েছে:

1. প্রাথমিকভাবে লোড হওয়া এইচটিএমএলে আপনার পার্টিয়ালগুলি রাখার জন্য 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= পূর্বরূপ

Comments

উত্তরের জন্য ধন্যবাদ. আমি টেম্পলেট ক্যাশে আইডিয়া পছন্দ করি কারণ আমি জিনিসগুলি কোনও স্ক্রিপ্ট ট্যাগে রাখতে চাই না। এটি কিভাবে ব্যবহার করতে? ডকুমেন্টেশন খারাপ। আমি সেখানকার একটি মন্তব্যে হুড়োহুড়ি দেখেছি। তবে আমি একটি ইউআরএল থেকে লোড করতে চাই।

— রঞ্জিত রামচন্দ্র

মন্তব্যের ভিত্তিতে উত্তর আপডেট করেছেন

— pkozlowski.opensource

আমি মাঝে মাঝে <script>সার্ভার-সাইড অন্তর্ভুক্ত ইনলাইন ট্যাগ ব্যবহার করি use এটি আমার পার্টিয়ালগুলিকে সাংগঠনিক উদ্দেশ্যে পৃথক ফাইল হিসাবে রাখতে দেয় তবে এখনও একটি দস্তাবেজে সবকিছু সরবরাহ করে।

— ব্লেজমোনজার

আপনি কি জানেন যে একটি সমাধান বনাম অন্যটি বেছে নেওয়ার ক্ষেত্রে গতি বাড়ানো আছে কিনা?

— আতাভ 32

আমি HTTP কল ব্যবহার করে টেমপ্লেটগুলি ক্যাশে করছি, তবে সমস্যাটি হ'ল ক্যাশেড টেম্পলেটটির নামটি হবে url forexample: $ http.get ('অ্যাপ / সংশোধন / টেম্পলেট / গ্রুপ-সংশোধন-টেবিল html', {ক্যাশে: $ templateCache}); এবং তারপরে যখনই আমি টেমপ্লেটটি লোড করতে চাই তখন আমাকে এই কুৎসিত নামটি ব্যবহার করতে হবে :( যা আমি পছন্দ করি না, এটি পছন্দ করুন: <td ng-समावेश = "'অ্যাপ / সংশোধন / টেম্পলেট / গ্রুপ-সংশোধন-টেবিল html' ">

— শীলান

Answer 2

আপনি যদি আপনার প্রকল্পটি তৈরির জন্য গ্রান্ট ব্যবহার করেন তবে এমন একটি প্লাগইন রয়েছে যা স্বয়ংক্রিয়ভাবে আপনার পার্টিয়ালগুলিকে একটি কৌণিক মডিউলে একত্রিত করবে যা প্রাইমস $ টেমপ্লেট ক্যাশে। আপনি আপনার বাকী কোড সহ এই মডিউলটিকে একত্রিত করতে এবং শুরুতে একটি ফাইল থেকে সমস্ত কিছু লোড করতে পারেন।

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

Comments

এর রয়েছে grunt-angular-templatesযা জিনিস একই ধরনের কাজ করে - npmjs.org/package/grunt-angular-templates - একটি আচরণ কাজ করে

— বেন Walding

এটি কি সূচী ফাইলে টেম্পলেটগুলির জন্য কাজ করে? আমার ইনডেক্স ফাইলে একটি এনজি-ভিউ রয়েছে এবং এনজি-অন্তর্ভুক্ত রয়েছে এবং আমার অ্যাপ্লিকেশনটি প্রদর্শিত হতে সমস্যা হচ্ছে।

— ব্যাটম্যান

Answer 3

কৌণিকর মধ্যে আপনার এইচটিএমএল পার্টিয়ালগুলি একত্রিত করতে এবং নিবন্ধিত করতে একটি বিল্ড টাস্ক যুক্ত করুন $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'));
    });

টেম্পলেটস.জে (এই ফাইলটি বিল্ড টাস্ক দ্বারা স্বয়ংক্রিয়ভাবে তৈরি করা হয়েছে)

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

Comments

হাই @ জেমস আমি এই গুল্প প্লাগইনটি ব্যবহার করছি। সমস্ত .html লোড সঠিকভাবে হয় তবে যখন আমি কিছু ডায়ালগ বক্স প্লাগইন (আমি এনজি-উপাদান ব্যবহার করছি) এর অংশ হিসাবে এইচটিএমএলকে নির্দিষ্ট করার চেষ্টা করি তখন এটি 404 নিক্ষেপ করে ex পার্টিয়ালস / এনটিটিগ্রিড। html '});

— আনন্দ

আপনি কি আমার ব্যবহারকারী / পার্টিশনের সাথে আমার অ্যাপ / দর্শন রেফারেন্সগুলি প্রতিস্থাপন করেছেন?

— জেমস লরুক

ধন্যবাদ. আমি পার্টির দিক পরিবর্তন করছি না, আমি আমার প্রশ্ন পোস্ট করেছি - stackoverflow.com/questions/29399453/…

— আনন্দ

Answer 4

আপনি যদি কোনও স্ক্রিপ্ট ট্যাগে প্রতিটি টেম্পলেট মুড়ে রাখেন, যেমন:

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

সমস্ত টেমপ্লেট 1 টি বড় ফাইলে সংযুক্ত করুন। ভিজুয়াল স্টুডিও 2013 ব্যবহার করে, ওয়েব প্রয়োজনীয় ডাউনলোড করুন - এটি এইচটিএমএল বান্ডিল তৈরি করতে ডান ক্লিক মেনু যুক্ত করে।

এই লোকটি কৌণিক $templatecacheপরিষেবা পরিবর্তন করার জন্য যে কোডটি লিখেছিল তা যুক্ত করুন - এটি কেবল কোডের একটি ছোট অংশ এবং এটি কাজ করে: ভোজনা জিনার গিস্ট

তার $http.getযে আপনার বান্ডিল ফাইল ব্যবহার পরিবর্তন করা উচিত:

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

আপনার রুটগুলি templateUrlদেখতে দেখতে এমন হওয়া উচিত:

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

Answer 5

আপনি যদি রেল ব্যবহার করেন, আপনি আপনার সমস্ত এইচএমএল / ইরব টেমপ্লেটগুলি টেম্পলেট মডিউলে সংকলন করতে এবং সরিয়ে দেওয়ার জন্য অ্যাসেট পাইপলাইনটি ব্যবহার করতে পারেন যা আপনার অ্যাপ্লিকেশন.জেএস ফাইলগুলিতে সংযুক্ত করা যায়। চেকআউট http://minhajuddin.com/2013/04/28/angularjs-templates-and-rails-with-eager- loading

Answer 6

আমি শুধু ecoআমার জন্য কাজটি করতে ব্যবহার করি। ecoডিফল্টরূপে স্প্রোককেট দ্বারা সমর্থিত। এটি এম্বেডেড কফিস্ক্রিপ্টের জন্য একটি শর্টহ্যান্ড যা একটি ইকো ফাইল নেয় এবং একটি জাভাস্ক্রিপ্ট টেম্পলেট ফাইলের মধ্যে সংকলন করে, এবং ফাইলটি আপনার সম্পদ ফোল্ডারে থাকা অন্য জেএস ফাইলগুলির মতোই বিবেচিত হবে।

আপনাকে যা করতে হবে তা হল এক্সটেনশন .jst.eco সহ একটি টেম্পলেট তৈরি করা এবং সেখানে কিছু এইচটিএমএল কোড লিখুন এবং রেলগুলি স্বয়ংক্রিয়ভাবে সম্পদ পাইপলাইনে ফাইলটি সংকলন এবং পরিবেশন করবে এবং টেমপ্লেটটি অ্যাক্সেস করার উপায়টি সত্যিই সহজ: JST['path/to/file']({var: value});যেখানে path/to/fileলজিক্যাল পাথের উপর ভিত্তি করে, সুতরাং আপনার যদি ফাইল থাকে তবে আপনি /assets/javascript/path/file.jst.ecoটেমপ্লেটটি অ্যাক্সেস করতে পারবেনJST['path/file']()

এঙ্গুলারজ দিয়ে এটিকে কাজ করার জন্য, আপনি এটিকে টেমপ্লেটডির পরিবর্তে টেমপ্লেট বৈশিষ্ট্যে পাস করতে পারেন এবং এটি যাদুতে কাজ শুরু করবে!

Comments

আমি নিশ্চিত নই যে এটির প্রশ্নের উত্তর এসেছে, এবং প্রোগ্রামিংয়ের ভাষা পরিবর্তন করা সম্ভবত অতিমাত্রার চেয়ে বেশি।

— xdhmoore

Answer 7

আপনি control রাষ্ট্রটি আপনার নিয়ামকের কাছে এবং তারপরে পৃষ্ঠাটি লোড হয়ে যায় এবং যখন আপনি নিয়ামকটিতে ter state.go ('সূচক') কল করেন বা যে অংশটি আপনি লোড করতে চান তাতে কল করে। সম্পন্ন.

Answer 8

আর একটি পদ্ধতি হ'ল এইচটিএমএল 5 ব্যবহার করা অ্যাপ্লিকেশন ক্যাশে সমস্ত ফাইল একবার ডাউনলোড করতে এবং সেগুলি ব্রাউজারের ক্যাশে রাখা। উপরের লিঙ্কটিতে আরও অনেক তথ্য রয়েছে। নিম্নলিখিত তথ্য নিবন্ধ থেকে:

<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. ম্যানিফেস্ট ফাইলটি পরিবর্তিত হয়েছে। দ্রষ্টব্য: ম্যানিফেস্টে তালিকাভুক্ত একটি ফাইল আপডেট করার অর্থ ব্রাউজারটি সেই সংস্থানটিকে পুনরায় ক্যাশে করবে। ম্যানিফেস্ট ফাইলটি নিজেই পরিবর্তন করতে হবে।

Comments

দুর্ভাগ্যক্রমে এই বৈশিষ্ট্যটি এখন অবচয় করা হয়েছে বিকাশকারী.মোজিলা.আর.ইন.ইউএস /

— অলস কোডার

এইচটিএমএল স্ট্যান্ডার্ড অনুসারে, "এই বৈশিষ্ট্যটি ওয়েব প্ল্যাটফর্ম থেকে সরানোর প্রক্রিয়াধীন। ২০১ early সালের শুরুর দিকে now আপাতত, আমি এখনও অ্যাপ্লিকেশন ক্যাশে ব্যবহার করছি কারণ এটি আমার অ্যাপ্লিকেশনগুলির জন্য ভাল কাজ করে।

— ব্রেন্ট ওয়াশবার্ন 18