javascript - tutorial - react js




আংশিক এবং টেমপ্লেট জটিল কমপক্ষে (4)

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

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

আপনি এই নেস্টেড মডেল প্রচুর সঙ্গে একটি মোটামুটি জটিল আবেদন হতে পারে দেখতে পারেন।

অ্যাপ্লিকেশনটি একক পৃষ্ঠা, তাই এটি একটি index.html লোড করে যা ডিওএম-এ ডিভি উপাদানটি ng-view বৈশিষ্ট্য সহ থাকে।

বৃত্ত 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 এর পাশাপাশি তার নিজস্ব টেম্পলেটগুলি লোড করতে হবে।

একে অপরকে আলাদা করে রাখার সময় টেমপ্লেটগুলির এমন জটিল নিস্তেজের সাথে মোকাবিলা করার জন্য একটি AngularJS অ্যাপ্লিকেশন গঠন সম্পর্কে কীভাবে যায়?


আপডেট: github.com/angular-ui/ui-router

উপবিভাগের জন্য এটি এনজি-তে অন্তর্ভুক্ত স্ট্রিংগুলির মতো সহজ:

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

আপনি প্রতিটি আংশিক শীর্ষ স্তরের একটি ng-নিয়ামকও স্থাপন করতে পারেন


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

সম্পাদনা করুন এখানে কিছু উদাহরণ ছদ্ম-কোড যা আপনাকে আমি যা বলছি তার ধারণা দিতে। একটি নিস্তেজ সাব নেভিভিং সঙ্গে।

এখানে প্রধান অ্যাপ্লিকেশন পাতা

<!-- 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.
        }
    };
});

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

http://angular-route-segment.com

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

জাতীয়:

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

আমি খুব Angular মধ্যে nested মতামত সঙ্গে সংগ্রাম ছিল।

একবার আমি github.com/angular-ui/ui-router ধরতে পারলাম জানতাম আমি কখনো কৌণিক ডিফল্ট রুটিং কার্যকারিতা ফিরে যাচ্ছি না।

এখানে একটি উদাহরণ অ্যাপ্লিকেশন যা দৃশ্যগুলির নেস্টিংয়ের একাধিক স্তর ব্যবহার করে

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 টির মতামত রয়েছে।





angularjs