কৌণিক নির্দেশিকা টেম্পলেট .js ফাইলের সাথে সম্পর্কিত r

Question

আমি একটি কৌনিক নির্দেশিকা তৈরি করছি যা কয়েকটি পৃথক স্থানে ব্যবহৃত হবে। আমি অ্যাপ্লিকেশনটির ফাইল কাঠামোটি সর্বদা গ্যারান্টি দিতে পারি না নির্দেশটি ব্যবহৃত হয়েছে তবে আমি ব্যবহারকারীকে একই ফোল্ডারে directive.jsএবং directive.html(আসল ফাইলের নাম নয়) রাখতে বাধ্য করতে পারি ।

পৃষ্ঠাটি যখন মূল্যায়ন করে তখন directive.jsএটিকে templateUrlনিজের সাথে আপেক্ষিক বলে মনে করে। ফাইলটির templateUrlসাথে সম্পর্কিত হতে সেট করা কি সম্ভব directive.js?

অথবা এটি কেবলমাত্র নির্দেশকে নিজেই টেম্পলেটটি অন্তর্ভুক্ত করার পরামর্শ দেওয়া হয়।

আমি ভাবছি আমি বিভিন্ন পরিস্থিতির উপর ভিত্তি করে বিভিন্ন টেম্পলেট লোড করতে চাই, তাই আপডেট করার পরিবর্তে আপেক্ষিক পথটি ব্যবহার করতে সক্ষম হতে পছন্দ করব directive.js

Comments

অথবা আপনি আপনার টেমপ্লেটগুলিকে জেতে রূপান্তর করতে গ্রান্ট-এইচটিএমএল 2 জ ব্যবহার করতে পারেন যা AngularJs তার টেম্পলেট ক্যাশে ক্যাশে করবে ache কৌনিক-ইউআই ছেলেরা এটিই করে।

— বিয়ারস 0

দুর্দান্ত ধারণা বিয়ার্স, গ্রুর্ট-এইচটিএমএল 2 জেএস সম্পর্কে আমি জানতাম না। এটি পরীক্ষা করে দেখুন।

— পেডালপেট

Answer 1

বর্তমানে সম্পাদিত স্ক্রিপ্ট ফাইলটি সর্বদা স্ক্রিপ্ট অ্যারেতে সর্বশেষ হবে, যাতে আপনি সহজেই এর পথটি খুঁজে পেতে পারেন:

// directive.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

angular.module('app', [])
    .directive('test', function () {
        return {
            templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });

যদি আপনি নিশ্চিত না হন যে স্ক্রিপ্টটির নাম কী (উদাহরণস্বরূপ আপনি যদি একাধিক স্ক্রিপ্ট একের মধ্যে প্যাক করে থাকেন) তবে এটি ব্যবহার করুন:

return {
    templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) 
        + 'directive.html'
};

দ্রষ্টব্য : যে কোনও ক্ষেত্রে ক্লোজার ব্যবহার করা হয়, আপনার বর্তমান কোডটি সঠিক সময়ে মূল্যায়ন করা হয়েছে তা নিশ্চিত করার জন্য আপনার কোডের বাইরে থাকা উচিত যেমন:

// directive.js

(function(currentScriptPath){
    angular.module('app', [])
        .directive('test', function () {
            return {
                templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });
})(
    (function () {
        var scripts = document.getElementsByTagName("script");
        var currentScriptPath = scripts[scripts.length - 1].src;
        return currentScriptPath;
    })()
);

Comments

ওহ, এখন এটাতো দুর্দান্ত! দুর্ভাগ্যক্রমে, এটি আমার জেএস ফাইলগুলি প্যাকিং এবং মিনিফাইংয়ের সাথে ভেঙে যাবে, তাই না? এছাড়াও, 'বর্তমানে কার্যকর স্ক্রিপ্ট ফাইলটি সর্বদা সর্বশেষ কেন?' আমি স্ক্রিপ্টের সমস্ত ফাইল বিশ্বব্যাপী স্কোপে লোড হয়ে যাওয়ার ছাপে ছিলাম।

— পেডালপেট

ব্রাউজারটি যখন কোনও <script>ট্যাগের মুখোমুখি হয় , পৃষ্ঠাটি রেন্ডার করা চালিয়ে যাওয়ার আগে তা অবিলম্বে এটি সম্পাদন করে, তাই বিশ্বব্যাপী স্ক্রিপ্টের স্কোপে সর্বশেষ <script>ট্যাগটি সর্বদা সর্বশেষ।

— অ্যালন গুবকিন

এছাড়াও, এটি ক্ষুদ্রায়ণে ভাঙ্গা উচিত নয়, তবে এটি প্যাকিংয়ের উপর ভেঙে যাওয়া উচিত, তাই আমি এর জন্য একটি সমাধান যুক্ত করেছি

— অ্যালন গুবকিন

আমি মনে করি আপনি যা বলতে চাইছেন তা আমি দেখছি। আপনি ধরে নিচ্ছেন যে আমি পৃষ্ঠায় সমস্ত কিছুই একক স্ক্রিপ্ট ট্যাগের মধ্যে লোড করছি। এটি কেস নয়, তবে আমি এটির কাজ করতে পারি। একটি দুর্দান্ত এবং সৃজনশীল উত্তরের জন্য ধন্যবাদ!

— পেডালপেট

স্ক্রিপ্টের নামটি প্রতিস্থাপনের পরিবর্তে আপনার path = currentScriptPath.split("/"); path.pop(); path.push("directive.html");ফাইলের নামের উপর নির্ভরতা থাকতে পারে না এবং "ডিরেক্টরেটিভ.জেএস", "/directive.js" এবং "পাথ / টু / ডাইরেক্টিভ.জেএস" সমর্থন করে। কোড গল্ফ প্রতিযোগিতা হ'ল এগুলিকে একক বিবৃতিতে সংযুক্ত করা (স্প্লাইস ব্যবহার করে, ইত্যাদি)।

— নাথান ম্যাকইননেস

Answer 2

আপনি যেমনটি বলেছিলেন যে আপনি নির্দেশকে বিভিন্ন সময়ে বিভিন্ন টেম্পলেট সরবরাহ করতে চেয়েছিলেন, তেমনি টেমপ্লেটকে কোনও বৈশিষ্ট্য হিসাবে নির্দেশের কাছে দেওয়ার অনুমতি দিচ্ছেন না কেন?

<div my-directive my-template="template"></div>

তারপরে $compile(template)(scope)নির্দেশকের ভিতরে কিছু ব্যবহার করুন ।

Comments

আমি নিশ্চিত না কেন আমি কেবল আজ এম এম ওয়েই সম্পর্কে এই বিষয়ে অবহিত হয়েছি, সাড়া না দেওয়ার জন্য দুঃখিত। আপনি কি নির্দেশ দিচ্ছেন যে নির্দেশকের মধ্যে আমার একাধিক টেম্পলেট রয়েছে? এবং তারপরে $compileকোনটি টেমপ্লেট পাস হবে তার পদ্ধতিটি কেবল নির্দেশ করুন ? আমার $compileযাইহোক যাইহোক ব্যবহার করতে হতে পারে, যাতে এটি একটি ভাল পরামর্শ হতে পারে।

— পেডালপেট

Answer 3

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

angular.module('app', [])

.constant('SCRIPT_URL', (function () {
    var scripts = document.getElementsByTagName("script");
    var scriptPath = scripts[scripts.length - 1].src;
    return scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1)
})())

.directive('test', function(SCRIPT_URL) {
    return {
        restrict :    'A',
        templateUrl : SCRIPT_URL + 'directive.html'
    }
});

Answer 4

এই কোডটি রুটস.জেএসস নামে একটি ফাইলে রয়েছে

নিম্নলিখিতগুলি আমার পক্ষে কার্যকর হয়নি:

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;
var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

নিম্নলিখিতগুলি করেছেন:

var bu2 = document.querySelector("script[src$='routes.js']");
currentScriptPath = bu2.src;
baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

আমার পরীক্ষাটি অলস লোড কৌণিকের প্রয়োজন সম্পর্কে নিম্নলিখিত ব্লগের উপর ভিত্তি করে তৈরি করা হয়েছে: http://ify.io/lazy-loading-in-angularjs/

প্রয়োজনীয়.js একটি প্রয়োজনীয় কনফিগ বুটস্ট্র্যাপ বেনিজেট করে

প্রয়োজনীয় কনফিগ একটি কৌণিক অ্যাপ.জেসকে বীজেট করে

কৌণিক অ্যাপ্লিকেশন.জেএস আমার রুটস.জেসকে বীজ্ট করে

আমি একই কোডটি একটি রেভেল ওয়েব ফ্রেমওয়ার্ক এবং এসপ নেটওয়্যার এমভিসি দ্বারা পরিবেশন করা হয়েছিল। রিভেলে ডকুমেন্ট.জেট এলিমেন্টস বাইট্যাগনাম ("স্ক্রিপ্ট") আমার প্রয়োজনীয় বুটস্ট্র্যাপ জেএস ফাইল এবং আমার রুটস.জেগুলি নয় একটি পথ তৈরি করে। এএসপি.নেট এমভিসিতে এটি ভিজ্যুয়াল স্টুডিওর ইনজেকশন ব্রাউজার লিঙ্ক স্ক্রিপ্ট উপাদানটির একটি পথ তৈরি করে যা ডিবাগিং সেশনের সময় সেখানে রাখা হয়।

এটি আমার কাজের রুটস jজেএস কোড:

define([], function()
{
    var scripts = document.getElementsByTagName("script");
    var currentScriptPath = scripts[scripts.length-1].src;
    console.log("currentScriptPath:"+currentScriptPath);
    var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    var bu2 = document.querySelector("script[src$='routes.js']");
    currentScriptPath = bu2.src;
    console.log("bu2:"+bu2);
    console.log("src:"+bu2.src);
    baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    return {
        defaultRoutePath: '/',
            routes: {
            '/': {
                templateUrl: baseUrl + 'views/home.html',
                dependencies: [
                    'controllers/HomeViewController',
                    'directives/app-style'
                ]
            },
            '/about/:person': {
                templateUrl: baseUrl + 'views/about.html',
                dependencies: [
                    'controllers/AboutViewController',
                    'directives/app-color'
                ]
            },
            '/contact': {
                templateUrl: baseUrl + 'views/contact.html',
                dependencies: [
                    'controllers/ContactViewController',
                    'directives/app-color',
                    'directives/app-style'
                ]
            }
        }
    };
});

রেভেল থেকে চলার সময় এটি আমার কনসোল আউটপুট।

currentScriptPath:http://localhost:9000/public/ngApps/1/requireBootstrap.js routes.js:8
baseUrl:http://localhost:9000/public/ngApps/1/ routes.js:10
bu2:[object HTMLScriptElement] routes.js:13
src:http://localhost:9000/public/ngApps/1/routes.js routes.js:14
baseUrl:http://localhost:9000/public/ngApps/1/ 

আর একটি দুর্দান্ত জিনিস আমি করেছি তা হ'ল প্রয়োজনীয় কনফিগারেশনের সুবিধা গ্রহণ করা এবং এতে কিছু কাস্টম কনফিগারেশন স্থাপন করা। অর্থাত্ অ্যাড

customConfig: { baseRouteUrl: '/AngularLazyBaseLine/Home/Content' } 

তারপরে আপনি রুট.জেএস এর অভ্যন্তর থেকে নিম্নলিখিত কোডটি ব্যবহার করে এটি পেতে পারেন

var requireConfig = requirejs.s.contexts._.config;
console.log('requireConfig.customConfig.baseRouteUrl:' + requireConfig.customConfig.baseRouteUrl); 

কখনও কখনও আপনি একটি বেসুরল সম্মুখভাগ সংজ্ঞায়িত করা প্রয়োজন, কখনও কখনও আপনি গতিশীল এটি তৈরি করা প্রয়োজন। আপনার পরিস্থিতির জন্য আপনার পছন্দ।

Answer 5

কেউ কেউ এটিকে সামান্য "হ্যাকি" পরামর্শ দিতে পারে তবে আমি মনে করি এটি করার 1 টি উপায় না হওয়া পর্যন্ত কোনও কিছুই হ্যাকি হতে চলেছে।
এটি করার সাথে সাথে আমার অনেক ভাগ্য হয়েছে:

angular.module('ui.bootstrap', [])
  .provider('$appUrl', function(){
    this.route = function(url){
       var stack = new Error('dummy').stack.match(new RegExp(/(http(s)*\:\/\/)[^\:]+/igm));
       var app_path = stack[1];
       app_path = app_path.slice(0, app_path.lastIndexOf('App/') + 'App/'.length);
         return app_path + url;
    }
    this.$get = function(){
        return this.route;
    } 
  });

তারপরে অ্যাপটিতে মডিউল যুক্ত করার পরে কোনও অ্যাপ্লিকেশনটিতে কোডটি ব্যবহার করার সময়।
একটি অ্যাপ্লিকেশন কনফিগারেশন ফাংশনে:

.config(['$routeProvider', '$appUrlProvider', function ($routeProvider, $appUrlProvider) {

    $routeProvider
        .when('/path:folder_path*', {
            controller: 'BrowseFolderCntrl',
            templateUrl: $appUrlProvider.route('views/browse-folder.html')
        });
}]);

এবং একটি অ্যাপ্লিকেশন নিয়ামক (যদি প্রয়োজন হয়):

var MyCntrl = function ($scope, $appUrl) {
    $scope.templateUrl = $appUrl('views/my-angular-view.html');
};

এটি একটি নতুন জাভাস্ক্রিপ্ট ত্রুটি তৈরি করে এবং স্ট্যাকের ট্রেস টেনে আনে। এরপরে এটি সমস্ত ইউআরএলকে পার্স করে (কলিং লাইন / চর নম্বর বাদে)।
তারপরে আপনি কেবল অ্যারেতে প্রথমটি বের করতে পারেন যা বর্তমান ফাইল হবে যেখানে কোডটি চলছে।

[1]কলিং ফাইলের অবস্থানটি পেতে যদি আপনি কোডটি কেন্দ্রীভূত করতে চান এবং তারপরে অ্যারেতে দ্বিতীয় ( ) বের করতে চান তবে এটিও সহায়ক

Comments

এটি ধীর, হ্যাকি, এবং প্রকৃতপক্ষে ব্যবহার করতে বেশ বিরক্তিকর হতে চলেছে, তবে নতুনত্বের জন্য +1!

— নাথান ম্যাকআইনেস

যেমন আমি বলেছিলাম, আসলে এটি করার কোনও উপায় নেই সুতরাং কোনও পদ্ধতিতে এটির পক্ষে মতামত রয়েছে। আমি অ্যাপ্লিকেশনটি কোথায় বাস করে তা খুঁজে পাওয়ার জন্য অ্যাপ্লিকেশন লোড প্রতি একবার ব্যবহার করা হয়েছে বলে আমি সত্যিই কোনও কার্য সম্পাদনের সমস্যা খুঁজে পাইনি। এছাড়াও, এটি ব্যবহার করা আসলে বেশ সহজ, আমি পুরো কোডটি দেখিনি যা এটিকে একটি কৌনিক জাল সরবরাহকারীর মধ্যে আবৃত করে ... আমার উত্তর আপডেট করতে পারে।

— ডান রিচার্ডসন

Answer 6

বেশ কয়েকটি ব্যবহারকারী উল্লেখ করেছেন যে, স্থিতিশীল ফাইলগুলি নির্মাণের সময় প্রাসঙ্গিক পথগুলি সহায়ক নয় এবং আমি এটি করার জন্য সুপারিশ করব।

Ular টেমপ্লেট ক্যাচে নামে আঙ্গুলের মধ্যে একটি নিফটি বৈশিষ্ট্য রয়েছে , যা কম-বেশি ক্যাশে টেম্পলেট ফাইল করে এবং পরবর্তী সময় কৌনিকটির একটি প্রয়োজন হয়, প্রকৃত অনুরোধ করার পরিবর্তে এটি ক্যাশেড সংস্করণ সরবরাহ করে। এটি এটি ব্যবহারের একটি সাধারণ উপায়:

module = angular.module('myModule');
module.run(['$templateCache', function($templateCache) {
$templateCache.put('as/specified/in/templateurl/file.html',
    '<div>blabla</div>');
}]);
})();

সুতরাং এইভাবে আপনি উভয়ই আপেক্ষিক ইউআরএলগুলির সমস্যা মোকাবেলা করুন এবং আপনি কার্য সম্পাদন করতে পারবেন।

অবশ্যই আমরা পৃথক টেম্পলেট এইচটিএমএল ফাইল রাখার ধারণাটি পছন্দ করি (প্রতিক্রিয়াটির বিপরীতে), সুতরাং উপরের নিজস্ব দ্বারা কোনও ভাল নয়। এখানে বিল্ড সিস্টেম আসে, যা সমস্ত টেমপ্লেট এইচটিএমএল ফাইলগুলি পড়তে পারে এবং উপরের মতো একটি জেএস তৈরি করতে পারে।

গ্রান্ট, গাল্প, ওয়েবপ্যাকের জন্য বেশ কয়েকটি এইচটিএমএল 2 জেএস মডিউল রয়েছে এবং এটি তাদের পিছনে মূল ধারণা। আমি ব্যক্তিগতভাবে কুল ব্যবহার করি, তাই আমি বিশেষত অভিনব gulp-ng-html2js কারণ এটি খুব সহজেই এটি করে।