পার্টিয়াল এবং টেম্পলেটগুলির জটিল নেস্টিং

Question

আমার প্রশ্নের সাথে অ্যাংুলারজেএস অ্যাপ্লিকেশনটিতে টেমপ্লেটগুলির জটিল বাসা বাঁধতে ( পার্টিয়ালও বলা হয় ) কীভাবে কাজ করা যায় তা জড়িত ।

আমার পরিস্থিতি বর্ণনা করার সর্বোত্তম উপায় হ'ল আমি তৈরি একটি চিত্র দিয়ে:

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

অ্যাপ্লিকেশনটি একক পৃষ্ঠার, সুতরাং এটি একটি সূচক html লোড করে যা ng-viewবৈশিষ্ট্যে DOM এ একটি ডিভ উপাদান রয়েছে ।

চেনাশোনা 1 এর জন্য , আপনি দেখতে পাচ্ছেন যে একটি প্রাথমিক নেভিগেশন রয়েছে যা উপযুক্ত টেমপ্লেটগুলিকে লোড করে ng-view। আমি $routeParamsমূল অ্যাপ্লিকেশন মডিউলটি পেরিয়ে এটি করছি। আমার অ্যাপ্লিকেশনটিতে কী আছে তার একটি উদাহরণ এখানে দেওয়া হয়েছে:

angular.module('myApp', []).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.                     
            when("/job/:jobId/zones/:zoneId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/zone_edit.html' }).
            when("/job/:jobId/initial_inspection", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/initial_inspection.html' }).
            when("/job/:jobId/zones/:zoneId/rooms/:roomId", { controller: JobDetailController, templateUrl: 'assets/job_list_app/templates/room_edit.html' })       

    }]);

চেনাশোনা 2 তে যে টেম্পলেটটি লোড করা হয়েছে ng-viewতাতে অতিরিক্ত উপ-নেভিগেশন রয়েছে । এই উপ-নাভির পরে এটির নীচের অংশে টেমপ্লেটগুলি লোড করা দরকার - তবে যেহেতু এনজি-ভিউ ইতিমধ্যে ব্যবহৃত হচ্ছে, আমি কীভাবে এটি করব সে সম্পর্কে নিশ্চিত নই।

আমি জানি যে আমি 1 ম টেমপ্লেটের মধ্যে অতিরিক্ত টেমপ্লেটগুলি অন্তর্ভুক্ত করতে পারি তবে এই টেমপ্লেটগুলি সমস্ত জটিল হতে চলেছে। অ্যাপ্লিকেশনটিকে আপডেট করা সহজতর করার জন্য এবং তার সন্তানের অ্যাক্সেসের জন্য প্যারেন্ট টেম্পলেটটি লোড করতে হবে তার উপর নির্ভরতা না রাখার জন্য আমি সমস্ত টেম্পলেটগুলি আলাদা রাখতে চাই।

চেনাশোনা 3 এ আপনি জিনিসগুলি আরও জটিল হয়ে উঠতে পারেন। সাব-নেভিগেশন টেমপ্লেটগুলির একটি ২ য় উপ-নেভিগেশন থাকবে এমন সম্ভাবনা রয়েছে যা তার নিজস্ব টেমপ্লেটগুলি পাশাপাশি বৃত্ত 4 এর ক্ষেত্রের মধ্যে লোড করতে হবে will

টেমপ্লেটগুলির এত জটিল বাসা বাঁধতে পেরে একজন এঙ্গুলারজেএস অ্যাপ্লিকেশনটিকে কীভাবে তৈরি করতে যায়, যখন সেগুলি সমস্ত একে অপরের থেকে পৃথক করে রাখে?

Comments

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

— প্রোলোজার

এটা কেমন? bennadel.com/blog/…

— এরিকবায়ে

সবচেয়ে সুন্দর প্রশ্ন আমি একটি দীর্ঘ সময় দেখেছি :)

— মার্ক নাদিগ

রাজি! মকআপের ব্যবহার পছন্দ করুন

— ব্রায়ান হংক

এখানে সরাসরি প্রশ্নে বিকল্পগুলির লিঙ্কগুলি যুক্ত করতে দুর্দান্ত হবে। github.com/angular-ui/ui-router github.com/artch/angular-route-seament github.com/dotJEM/angular-routing

— জেনস

Answer 1

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

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

এখানে মূল অ্যাপ্লিকেশন পৃষ্ঠা

<!-- primary nav -->
<a href="#/page/1">Page 1</a>
<a href="#/page/2">Page 2</a>
<a href="#/page/3">Page 3</a>

<!-- display the view -->
<div ng-view>
</div>

সাব নেভিগেশন জন্য নির্দেশিকা

app.directive('mySubNav', function(){
    return {
        restrict: 'E',
        scope: {
           current: '=current'
        },
        templateUrl: 'mySubNav.html',
        controller: function($scope) {
        }
    };
});

সাব নেভিগেশন জন্য টেমপ্লেট

<a href="#/page/1/sub/1">Sub Item 1</a>
<a href="#/page/1/sub/2">Sub Item 2</a>
<a href="#/page/1/sub/3">Sub Item 3</a>

একটি প্রধান পৃষ্ঠার জন্য টেমপ্লেট (প্রাথমিক ন্যাভ থেকে)

<my-sub-nav current="sub"></my-sub-nav>

<ng-switch on="sub">
  <div ng-switch-when="1">
      <my-sub-area1></my-sub-area>
  </div>
  <div ng-switch-when="2">
      <my-sub-area2></my-sub-area>
  </div>
  <div ng-switch-when="3">
      <my-sub-area3></my-sub-area>
  </div>
</ng-switch>

একটি প্রধান পৃষ্ঠার জন্য নিয়ামক। (প্রাথমিক নাভি থেকে)

app.controller('page1Ctrl', function($scope, $routeParams) {
     $scope.sub = $routeParams.sub;
});

একটি সাব এরিয়া জন্য নির্দেশিকা

app.directive('mySubArea1', function(){
    return {
        restrict: 'E',
        templateUrl: 'mySubArea1.html',
        controller: function($scope) {
            //controller for your sub area.
        }
    };
});

Comments

আমি প্রোলেসারের সমাধান আরও ভাল পছন্দ করি, আমরা আমাদের অ্যাপে এর মতো কিছু করি এবং এটি দুর্দান্ত কাজ করেছে। ব্লেশের সমাধানের সাথে সমস্যাটি হ'ল নির্দেশকের মধ্যে থাকা কন্ট্রোলার কোড। সাধারণত আপনি যে নির্দেশককে একটি নির্দেশিকায় নির্দিষ্ট করে থাকেন তা হ'ল প্রাক্তন: এনজিএমডেলসিটিএল নির্দেশের সাথে নিবিড়ভাবে কাজ করে যা ইনপুট এবং অন্যান্য নির্দেশের সাথে ঘনিষ্ঠভাবে কাজ করে। আপনার ক্ষেত্রে কন্ট্রোলার কোডকে কোনও নির্দেশের মধ্যে রাখা কোডের গন্ধ হবে, এটি আসলে একটি স্বতন্ত্র নিয়ামক।

— ক্রিসঅডনি

@ ব্লেশ, দুর্দান্ত! এটি সত্যই ভাল ব্যাখ্যা হয়েছে বলে মনে হচ্ছে তবে একজন ভাল জেএস প্রোগ্রামার এবং অ্যাঙ্গুলারজেএস-এর শিক্ষানবিশ হিসাবে আমি এটি ভালভাবে ধরতে পারি না ... আমি এবং সম্প্রদায়টি সেই পদ্ধতির সাহায্যে একটি কার্যকরী নমুনার জেএসফিডাল লিঙ্কটি উপভোগ করবে। চারপাশে এটি খনন করা সহজ হবে! :) ধন্যবাদ

— রজার ব্যারেটো

আমি মনে করি যে কোনও ধরণের 'নেস্টেড ভিউ কাজ করে না' এই প্রশ্নের সমাধান প্রথম প্রশ্নের উত্তর হওয়া উচিত। কেবল এটি ইউআই-রাউটার এবং ইত্যাদি ব্যবহার না করে কৌণিক আদর্শের আরও অনেক কাছাকাছি কারণ ধন্যবাদ।

— সের্গেই পানফিলভ

তাহলে উত্তরটি কি নির্দেশনা?

— মার্ক এম।

সাব- নাভ আইটেমগুলি হাইলাইট করার জন্য আপনি এটি ব্যবহার করতে পারেন: coder1.com/articles/angularjs-managing-active-nav- উপাদানগুলি কি এটি করার একটি ভাল উপায়?

— ২৩

Answer 2

আপডেট: অ্যাঙ্গুলারআইআইয়ের নতুন প্রকল্পটি দেখুন এই সমস্যাটির সমাধান করতে

---

সাব-বিভাগের জন্য এটি এনজি-অন্তর্ভুক্তের স্ট্রিংগুলির সুবিধা দেওয়ার মতোই সহজ:

<ul id="subNav">
  <li><a ng-click="subPage='section1/subpage1.htm'">Sub Page 1</a></li>
  <li><a ng-click="subPage='section1/subpage2.htm'">Sub Page 2</a></li>
  <li><a ng-click="subPage='section1/subpage3.htm'">Sub Page 3</a></li>
</ul>
<ng-include src="subPage"></ng-include>

অথবা আপনি সমস্ত জায়গা জুড়ে সাব পৃষ্ঠাগুলির লিঙ্ক আছে ক্ষেত্রে আপনি একটি অবজেক্ট তৈরি করতে পারেন:

$scope.pages = { page1: 'section1/subpage1.htm', ... };

<ul id="subNav">
  <li><a ng-click="subPage='page1'">Sub Page 1</a></li>
  <li><a ng-click="subPage='page2'">Sub Page 2</a></li>
  <li><a ng-click="subPage='page3'">Sub Page 3</a></li>
</ul>
<ng-include src="pages[subPage]"></ng-include>

অথবা আপনি এমনকি ব্যবহার করতে পারেন $routeParams

$routeProvider.when('/home', ...);
$routeProvider.when('/home/:tab', ...);
$scope.params = $routeParams;

<ul id="subNav">
  <li><a href="#/home/tab1">Sub Page 1</a></li>
  <li><a href="#/home/tab2">Sub Page 2</a></li>
  <li><a href="#/home/tab3">Sub Page 3</a></li>
</ul>
<ng-include src=" '/home/' + tab + '.html' "></ng-include>

আপনি প্রতিটি আংশিক শীর্ষ-স্তরে কোনও এনজি-কন্ট্রোলারও রাখতে পারেন

Comments

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

— Gleeb

@ প্রলুজার সম্ভবত আপনি এই লিঙ্কটি বোঝাতে চেয়েছিলেন github.com/angular-ui/ui-router ... আপনি যে পেস্ট করেছেন সেটি ভেঙে গেছে

— সাইমন সি

আমি ওপি হিসাবে একই নকশা সমস্যা আছে। কেউ কি AngularUI রাষ্ট্র ব্যবস্থার চেষ্টা করেছে? আমি আরও একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করতে বেশ অনিচ্ছুক এবং আমি বরং AngularJS 'জিনিসগুলি করার পদ্ধতি "এর সাথে লেগে থাকি। তবে অন্যদিকে, রাউটিং সিস্টেমটি মনে হচ্ছে তার অ্যাকিলিসের হিল ... @ ফিলিপক্রিগ, এই পরিস্থিতিটি সমাধান করার জন্য আপনি কী শেষ করেছেন?

— স্যাম

<div ng-include="'/home/' + tab + '.html'" ng-controller="SubCtrl"></div>উপ-টেম্পলেটটির জন্য পৃথক নিয়ামক / সুযোগ ব্যবহার করার জন্য আপনি নির্দিষ্ট করতে পারেন। অথবা ngControllerপ্রতিটি আংশিকর জন্য আলাদা আলাদা নিয়ামক ব্যবহার করতে আপনার সাব-টেম্পলেট (গুলি) এর মধ্যে যে কোনও জায়গায় কেবল নির্দেশ নির্দিষ্ট করুন ।

— কল্লিন

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

— ProLoser

Answer 3

আপনি একই উদ্দেশ্যে এই লাইব্রেরিটি চেকআউট করতে পারেন:

http://angular-route-segment.com

দেখে মনে হচ্ছে আপনি যা খুঁজছেন তা ইউআই-রাউটারের তুলনায় এটি ব্যবহার করা অনেক সহজ। থেকে ডেমো সাইট :

জাতীয়:

$routeSegmentProvider.

when('/section1',          's1.home').
when('/section1/:id',      's1.itemInfo.overview').
when('/section2',          's2').

segment('s1', {
    templateUrl: 'templates/section1.html',
    controller: MainCtrl}).
within().
    segment('home', {
        templateUrl: 'templates/section1/home.html'}).
    segment('itemInfo', {
        templateUrl: 'templates/section1/item.html',
        controller: Section1ItemCtrl,
        dependencies: ['id']}).
    within().
        segment('overview', {
            templateUrl: 'templates/section1/item/overview.html'}).

শীর্ষ স্তরের এইচটিএমএল:

<ul>
    <li ng-class="{active: $routeSegment.startsWith('s1')}">
        <a href="/section1">Section 1</a>
    </li>
    <li ng-class="{active: $routeSegment.startsWith('s2')}">
        <a href="/section2">Section 2</a>
    </li>
</ul>
<div id="contents" app-view-segment="0"></div>

নেস্টেড এইচটিএমএল:

<h4>Section 1</h4>
Section 1 contents.
<div app-view-segment="1"></div>

Comments

আর্টেম, আমি এখন অবধি খুঁজে পাওয়া সেরা সমাধান! আমি সত্যটি পছন্দ করি যে আপনি কৌণিক রুটটি কৌণিক ইউআইয়ের মতো প্রতিস্থাপনের পরিবর্তে কৌণিক রুট প্রসারিত করুন।

— সর্বশেষতম ট্রাইবুনাল

Answer 4

আমিও অ্যাঙ্গুলারে নেস্টেড ভিউ নিয়ে লড়াই করছিলাম।

একবার আমি ইউআই-রাউটারের হোল্ড পেয়েছিলাম আমি জানতাম যে আমি কখনই কৌনিক ডিফল্ট রাউটিং কার্যকারিতাটিতে ফিরে যাব না।

এখানে একটি উদাহরণ অ্যাপ্লিকেশন যা নীড়ের একাধিক স্তরের ভিউ ব্যবহার করে

app.config(function ($stateProvider, $urlRouterProvider,$httpProvider) {
// navigate to view1 view by default
$urlRouterProvider.otherwise("/view1");

$stateProvider
    .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html',
        controller: 'view1.MainController'
    })
    .state('view1.nestedViews', {
        url: '/view1',
        views: {
            'childView1': { templateUrl: 'partials/view1.childView1.html' , controller: 'childView1Ctrl'},
            'childView2': { templateUrl: 'partials/view1.childView2.html', controller: 'childView2Ctrl' },
            'childView3': { templateUrl: 'partials/view1.childView3.html', controller: 'childView3Ctrl' }
        }
    })

    .state('view2', {
        url: '/view2',
    })

    .state('view3', {
        url: '/view3',
    })

    .state('view4', {
        url: '/view4',
    });
});

এটি দেখা যায় যে এখানে 4 টি প্রধান মতামত (ভিউ 1, ভিউ 2, ভিউ 3, ভিউ 4) এবং ভিউ 1 এর 3 টি শিশু দর্শন রয়েছে।

Comments

ইনজেকশনের উদ্দেশ্য কী $httpProvider? আমি এটি কোথাও ব্যবহৃত দেখতে পাচ্ছি না।

— অ্যারন

@ অ্যারন অ্যাপকনফাইগ এই কোডের টুকরোয় শেষ হবে না এবং হতে পারে $ এইচটিপিপ্রাইডার অন্য কোথাও ব্যবহৃত হয়

— ভ্লাদ

Answer 5

নেস্টেড এনজি-ভিউ ব্যবহার এড়াতে আপনি এনজি-অন্তর্ভুক্ত ব্যবহার করতে পারেন।

http://docs.angularjs.org/api/ng/directive/ngInclude
http://plnkr.co/edit/ngdoc:example-example39@snapshot?p= পূর্বরূপ

আমার সূচি পৃষ্ঠাটি আমি এনজি-ভিউ ব্যবহার করি। তারপরে আমার সাব পৃষ্ঠাগুলিতে যা আমার নেস্টেড ফ্রেমগুলি থাকা দরকার। আমি এনজি-অন্তর্ভুক্ত ব্যবহার করি। ডেমোটি একটি ড্রপডাউন দেখায়। আমি আমার লিঙ্ক এনজি-ক্লিকের সাথে প্রতিস্থাপন করেছি। ফাংশনে আমি $ সুযোগ.টিম্পলেট = $ স্কোপ.টিম্পলেট [0] রাখব; বা $ স্কোপ.টেম্পলেট = $ স্কোপ.টেমলেটগুলি [1];

$scope.clickToSomePage= function(){
  $scope.template = $scope.templates[0];
};

Answer 6

কৌণিক ইউআই-রাউটার নেস্টেড ভিউগুলিকে সমর্থন করে। আমি এখনও এটি ব্যবহার করি নি তবে দেখতে খুব আশাব্যঞ্জক।

http://angular-ui.github.io/ui-router/