AngularJS - একক টেমপ্লেটে একাধিক এনজি-ভিউ

Question

আমি AngularJS ব্যবহার করে একটি গতিশীল ওয়েব অ্যাপ তৈরি করছি। ng-viewএকটি টেম্পলেটে একাধিক থাকা কি সম্ভব ?

Comments

এখনও কিছু বাগ সহ একটি টানার অনুরোধ আছে বলে মনে হচ্ছে: github.com/angular/angular.js/pull/1198

— আল্প

অ্যাঙ্গুলারে নির্দেশকের ভূমিকা সম্পর্কে লেখেন জান ভারভিগ। এটি আপনার প্রশ্নের উত্তর নয়, তবে কিছু ক্ষেত্রে তার ধারণাগুলি ভাল বিকল্প হতে পারে: jan.varwig.org/archive/angularjs-views-vs-directives/…

— জুহা Palomäki

কৌণিক টিউটোরিয়ালটি দিয়ে যাচ্ছিল এবং এই একই প্রশ্নটি ছিল, তারা এটিকে খুব স্পষ্ট করে না, যদিও এটি একটি গভীর গভীর ধারণা বলে মনে হচ্ছে ..

— qwwqwwq

Answer 1

আপনি কেবল একটি পেতে পারেন ng-view।

: আপনি বিভিন্নভাবে এর বিষয়বস্তু পরিবর্তন করতে পারেন ng-include, ng-switchম্যাপিং বিভিন্ন কন্ট্রোলার এবং routeProvider মাধ্যমে টেমপ্লেট বা।

Comments

ম্যাপিং নিয়ন্ত্রণকারী এবং টেম্পলেটগুলি পুরো এনজি-ভিউ উপাদানটি প্রতিস্থাপন করবে, তাই না?

— zx1986

একটি উইজেটের বিষয়বস্তু পরিবর্তনশীল পরিবর্তন সম্পর্কে কী? আপনি কি উইজেটের জন্য একটি ভিউ এবং উইজেটের জন্য একটি নিয়ামক এবং উইজেটের জন্য একটি মডেল তৈরি করতে চান না?

— রে সয়েলজার

এটা ভিউ ব্যবহার করার পরামর্শ দেওয়া হয়? ভেরিয়েবলগুলি দিয়ে ডিভগুলি সংজ্ঞায়িত করা ng-showএবং ng-hideতাদের দৃশ্যমানতা নিয়ন্ত্রণ করা কি ভাল নয় ? কারণ মাঝে মাঝে আমি একাধিক উপাদানগুলি লুকিয়ে / দেখানো পছন্দ করতে পারি

— সামথিংসমথিং

Answer 2

ইউআই-রাউটার এমন একটি প্রকল্প যা সহায়তা করতে পারে: https://github.com/angular-ui/ui-router এর বৈশিষ্ট্যগুলির মধ্যে একটি হ'ল একাধিক নামযুক্ত দর্শন

ইউআই-রাউটারের অনেকগুলি বৈশিষ্ট্য রয়েছে এবং আপনি যদি উন্নত অ্যাপে কাজ করে থাকেন তবে আমি আপনাকে এটি ব্যবহার করার পরামর্শ দিচ্ছি।

একাধিক নামযুক্ত দর্শনের ডকুমেন্টেশন এখানে দেখুন ।

Comments

দুর্ভাগ্যক্রমে যেমন ইউআই-রাউটার রিডমে বলেছেন: দ্রষ্টব্য: ইউআই-রাউটারটি সক্রিয় বিকাশের অধীনে রয়েছে। যেমন, এই লাইব্রেরিটি ভালভাবে পরীক্ষা করার সময়, API পরিবর্তন হতে পারে। আপনি যদি পরিবর্তনের অনুসরণে স্বাচ্ছন্দ্য বোধ করেন এবং সে অনুযায়ী আপনার ব্যবহার আপডেট করে থাকেন তবেই উত্পাদন অ্যাপ্লিকেশনগুলিতে এটি ব্যবহার করার কথা বিবেচনা করুন।

— ট্রেইনোসিস

@ ট্রেইনোসিস এটি একাধিক প্রকল্পের জন্য ব্যবহার করেছে, 'খুব' স্থিতিশীল বলে মনে হচ্ছে এবং এখন পর্যন্ত আমার এপিআই পরিবর্তন করার কোনও সমস্যা নেই, আসলে আমি এপিআই-তে কোনও বড় পরিবর্তন মনে করি না।

— মরতেজা জিয়া

Answer 3

আমি বিশ্বাস করি আপনি একা থাকার মাধ্যমে আপনি এটি সম্পাদন করতে পারবেন ng-view। প্রধান টেমপ্লেটে আপনার ng-includeউপ-দর্শনগুলির জন্য বিভাগ থাকতে পারে , তারপরে প্রধান নিয়ামকটিতে প্রতিটি উপ টেমপ্লেটের জন্য মডেল বৈশিষ্ট্যগুলি সংজ্ঞায়িত করতে হয়। যাতে তারা স্বয়ংক্রিয়ভাবে ng-includeবিভাগগুলিতে আবদ্ধ হয় । এটি একাধিক থাকার সমানng-view

আপনি দেওয়া উদাহরণটি পরীক্ষা করতে পারেন ng-include ডকুমেন্টেশনে

উদাহরণস্বরূপ আপনি যখন ড্রপডাউন তালিকা থেকে টেমপ্লেট পরিবর্তন করেন তখন এটি সামগ্রী পরিবর্তন করে। এখানে ধরে নিন যে আপনার একটি প্রধান রয়েছে ng-viewএবং ড্রপ ডাউন নির্বাচন করে ম্যানুয়ালি সাব কন্টেন্ট নির্বাচন করার পরিবর্তে, আপনি প্রধান ভিউ লোড হওয়ার সময় এটি করেন।

Comments

ইউআই-রাউটারের মতো সমাধানের অভাবে, এনজি-অন্তর্ভুক্ত করা আসলেই একটি কার্যকর বিকল্প, যেমনটি আপনি ব্যাখ্যা করেছেন। এনজি-অন্তর্ভুক্ত যা সম্পাদন করতে পারে না তা হ'ল ইউআরএল (রাষ্ট্র) চালিত একাধিক দর্শন, $ রুটটি বর্তমান ইউআরএলের উপর ভিত্তি করে গতিশীলভাবে বিভিন্ন দর্শন সরবরাহ করতে পারে না। আমরা কৌণিকের বাহুগুলিকে মোচড়াতে পারি এবং এটি ng-include ডকুমেন্টেশনের উদাহরণের মতো নিয়ন্ত্রণকারীর মধ্যে কাস্টম লজিক ব্যবহার করে ঘটতে পারি , তবে এটি পছন্দসই অ্যাপ্লিকেশন আর্কিটেকচার প্যাটার্ন নয়, ইউআই-রাউটারটি সঠিক ধরণের সমাধান।

— ইয়েলিং

ইয়েলিং মন্তব্যের জন্য একটি প্লাস। এনজি-অন্তর্ভুক্ত ব্যবহার করা একান্ত কার্যকরী।

— ফারশিদ সাবেরি

Answer 4

নিয়মিত ব্যবহার ng-view মডিউল আপনার একাধিক গতিশীল টেম্পলেট থাকতে পারে না।

তবে, এই প্রকল্পটি আপনাকে এটি করতে সক্ষম করে (সন্ধান করুন ui-router)।

Comments

কৌণিক-ইউআই ভবিষ্যতে ভাল পছন্দ বলে মনে হচ্ছে তবে এটি উত্পাদন ব্যবহারের জন্য এখনও খুব অস্থির বলে মনে হচ্ছে

— ডেভিড বারেটো

Answer 5

একাধিক বা নেস্টেড মতামত পাওয়া সম্ভব। কিন্তু এনজি-ভিউ দ্বারা নয়।

কৌণিক এ প্রাথমিক রাউটিং মডিউল একাধিক দর্শন সমর্থন করে না। তবে আপনি ইউআই-রাউটার ব্যবহার করতে পারেন। এটি তৃতীয় পক্ষের মডিউল যা আপনি গিথুব, কৌণিক-ইউআই / ইউআই-রাউটার, https://github.com/angular-ui/ui-router এর মাধ্যমে পেতে পারেন । এছাড়াও বর্তমানে এনজিআরটার (এনজিউউউউউটার) এর একটি নতুন সংস্করণ বিকাশ করা হচ্ছে। এই মুহূর্তে এটি স্থিতিশীল নয়। তাই আমি আপনাকে ইউআই-রাউটার সহ একটি সহজ শুরুর উদাহরণ সরবরাহ করি। এটি ব্যবহার করে আপনি দর্শনগুলির নাম রাখতে পারেন এবং নির্দিষ্ট করতে পারেন যে কোন টেম্পলেট এবং নিয়ন্ত্রকগুলি তাদের রেন্ডার করার জন্য ব্যবহার করা উচিত। $ StatePovider ব্যবহার করে আপনার নির্দিষ্ট করে দেওয়া উচিত যে স্থানের স্থানগুলি কীভাবে নির্দিষ্ট রাজ্যের জন্য রেন্ডার করা উচিত।

<body ng-app="main">
    <script type="text/javascript">
    angular.module('main', ['ui.router'])
    .config(['$locationProvider', '$stateProvider', function ($locationProvider, $stateProvider) {
        $stateProvider
        .state('home', {
            url: '/',
            views: {
                'header': {
                    templateUrl: '/app/header.html'
                },
                'content': {
                    templateUrl: '/app/content.html'
                }
            }
        });
    }]);
    </script>
    <a ui-sref="home">home</a>
    <div ui-view="header">header</div>
    <div ui-view="content">content</div>
    <div ui-view="bottom">footer</div>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js">
</body>

আপনার এই নমুনার জন্য অ্যাংুলারজ, এবং কৌণিক- ui.router উল্লেখ করতে হবে।

$ bower install angular-ui-router

Comments

ধন্যবাদ ফারশিদ এই দুর্দান্ত! এটি কৌণিক- ui / ui- রাউটার Github সংগ্রহস্থল github.com/angular-ui/ui-router এ উল্লেখ করা উচিত যেখানে আমি মডিউলটি পেয়েছি

— সম্পূর্ণরূপে

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

— ব্যবহারকারী 441521

উদাহরণস্বরূপ, ফাইলগুলি হোস্ট করা থাকলে এনজি-অন্তর্ভুক্ত কাজ করবে। নোডেজে যদি স্থানীয় ডিরেক্টরিতে কাজ করা হয় তবে এটি ক্রস ডোমেন ত্রুটি নিক্ষেপ করবে।

— সিড

Answer 6

আপনার একাধিক এনজি-ভিউ থাকতে পারে না। নীচে আমার ব্যবহারের ক্ষেত্রে যেখানে আমি আমার প্রয়োজনীয়তা সমাধান করেছি। আমি আমার মডেল কথোপকথনে ট্যাবড আচরণ করতে চাই। হাইপারলিংকযুক্ত ট্যাবগুলিতে ক্লিক করার কারণে আমি সমস্যার মুখোমুখি হয়েছি যা রাউটারের লিঙ্কগুলি ডেকে আনবে। আমি ট্যাবগুলির জন্য বোতাম এবং সিএসএস ব্যবহার করে এটি সমাধান করেছি। ব্যবহারকারী যখন ট্যাবে ক্লিক করেন, এটি আসলে কোনও হাইপারলিংক কল করবে না যা সর্বদা এনজি-রাউটারকে অনুরোধ করবে। ব্যবহারকারীরা যখন ট্যাবে ক্লিক করেন তখন এটি একটি পদ্ধতিতে কল করবে, যেখানে আমি এইচটিএমএল লোড করি illy নীচে ট্যাব ক্লিক ক্লিক করুন

self.submit = function(form) {
                $templateRequest('resources/items/employee/test_template.html').then(function(template){
                var compiledeHTML = $compile(template)($scope);
                $("#d").replaceWith(compiledeHTML);
});

ব্যবহারকারী $ টেমপ্লেট-রিকুয়েস্ট। Test_template.html পৃষ্ঠায় আপনার এইচটিএমএল সামগ্রী যুক্ত করুন। এই এইচটিএমএল সামগ্রীটি আপনার নিয়ামকের সাথে আবদ্ধ হবে।