AngularJs "নিয়ন্ত্রক হিসাবে" সিনট্যাক্স

121

আমি অ্যাঙ্গুলার জেএস সম্পর্কিত নতুন সিনট্যাক্স সম্পর্কে পড়েছিcontroller as xxx

বাক্য InvoiceController as invoiceগঠনটি কৌনিকটিকে নিয়ামককে তাত্পর্যপূর্ণ করতে এবং বর্তমান স্কোপে পরিবর্তনশীল চালানে এটি সংরক্ষণ করতে বলে।

ভিজ্যুয়ালাইজেশন:

এখানে চিত্র বর্ণনা লিখুন

ঠিক আছে, সুতরাং $scopeআমার কন্ট্রোলারে আমার প্যারামিটারটি থাকবে না এবং কোডারটিতে কোডটি অনেক ক্লিনার হবে।

কিন্তু

আমি অন্য ওরফে উল্লেখ করতে হবে দৃশ্য

এখন অবধি আমি করতে পারলাম:

<input type="number" ng-model="qty"  />

....controller('InvoiceController', function($scope) {
   // do something with $scope.qty <--notice

এবং এখন আমি করতে পারি:

 <input type="number" ng-model="invoic.qty"  /> <-- notice 

  ....controller('InvoiceController', function() {
       // do something with  this.qty  <--notice

প্রশ্ন

এটি করার লক্ষ্য কী? এক জায়গা থেকে সরিয়ে অন্য জায়গায় যুক্ত করবেন?

আমি কী মিস করছি তা দেখে আমি আনন্দিত হব।

javascript angularjs

— রই নমির
সূত্র

8

এই ভিডিওটি এটি খুব ভালভাবে ব্যাখ্যা করেছে। youtube.com/watch?v=tTihyXaz4Bo আমার মনে হয় এটি এইচটিএমএলে ক্লিনার কোডের জন্য ব্যবহৃত হয়।

— ফিজার খান 22'14

1

নির্মলতা. আমি কন্ট্রোলারে $ স্কোপ.এক্স বনাম এই.এক্স ব্যবহার সম্পর্কে বিরক্ত নই, তবে আমার মতে {{চালান.এক্স} to এর সাথে আবদ্ধ আমাকে কেবল {{x}} (imho) এর চেয়ে আরও বেশি কিছু বলে। এছাড়াও, আমি ভাবছি যে এটি কৌণিকের ক্ষেত্রে শুনেছি এমন কোনও সমস্যার সমাধান করে যেখানে কন্ট্রোলারের অ-অবজেক্টগুলিতে সমস্যা রয়েছে (সুতরাং things.x ভাল হবে, তবে x একটি সমস্যা সৃষ্টি করবে)।

— ম্যাট রবার্টস

1

@ ম্যাটরবার্টস আপনার শেষ মন্তব্যটি সম্বোধন করার জন্য - আপনি যে অ-অবজেক্ট ইস্যুটি উল্লেখ করেছেন সেটি জাভাস্ক্রিপ্ট প্রোটোটাইপিকাল উত্তরাধিকারের সত্য হিসাবে কৌনিক সমস্যা নয়। কেন এটি এখানে কৌণিক হয় কেন (কেন controller asএটি ঠিক করে দেয়) এর একটি ভাল ব্যাখ্যা রয়েছে ।

— রাশ ম্যাটনি

আমি কীভাবে "স্কোপ।" সম্প্রচার করব? এই নতুন ক্ষেত্রে কারণ আমার এটি $ সম্প্রচারটি কাজ করছে বলে মনে হচ্ছে না

— গৌরব

1

@ গৌরব আপনি এখনও কিছু নিয়ন্ত্রক, পদ্ধতি ইত্যাদির জন্য সিনট্যাক্স হিসাবে নিয়ামক হিসাবে ব্যবহার করলেও আপনি আপনার নিয়ামকটিতে $ স্কোপ পরিষেবাটি ইনজেকশন করতে পারবেন

— ডেরেক

163

এটি সম্পর্কে বেশ কয়েকটি বিষয় রয়েছে।

কিছু লোক $scopeসিনট্যাক্স পছন্দ করে না (আমাকে জিজ্ঞাসা করবেন না কেন)। তারা বলে যে তারা কেবল ব্যবহার করতে পারে this। এটি ছিল একটি লক্ষ্য।

কোথা থেকে কোনও সম্পত্তি আসে তা পরিষ্কার করে দেওয়া সত্যিই দরকারী।

আপনি বাসা নিয়ন্ত্রন করতে পারেন এবং এইচটিএমএল পড়ার সময় প্রতিটি সম্পত্তি যেখানে আসে তা বেশ স্পষ্ট।

আপনি ডট রুলের কিছু সমস্যা এড়াতে পারেন ।

উদাহরণস্বরূপ, একই নাম 'নাম' সহ দুটি নিয়ামক থাকা, আপনি এটি করতে পারেন:

<body ng-controller="ParentCtrl">
    <input ng-model="name" /> {{name}}

    <div ng-controller="ChildCtrl">
        <input ng-model="name" /> {{name}} - {{$parent.name}}
    </div>
</body>

আপনি পিতা-মাতা এবং শিশু উভয়কেই সংশোধন করতে পারেন, এটি নিয়ে কোনও সমস্যা নেই। তবে আপনার $parentপিতামাতার নাম দেখতে আপনাকে ব্যবহার করতে হবে, কারণ আপনি এটি আপনার সন্তানের নিয়ামককে ছায়া দিয়েছেন। বিশাল এইচটিএমএল কোডে $parentসমস্যা হতে পারে, আপনি জানেন না যে নামটি এসেছে comes

আপনি যা controller asকরতে পারেন তা সহ:

<body ng-controller="ParentCtrl as parent">
    <input ng-model="parent.name" /> {{parent.name}}

    <div ng-controller="ChildCtrl as child">
      <input ng-model="child.name" /> {{child.name}} - {{parent.name}}
    </div>
</body>

একই উদাহরণ, তবে এটি পড়া অনেক বেশি পরিষ্কার cle

— যিশু রদ্রিগেজ
সূত্র

10

এছাড়াও কেন এই পদ্ধতির কারওর

— জুলিয়ান হলম্যান

আপনি বাসা নিয়ন্ত্রকদের যখন এটি খুব সহায়ক!

— সি_জে

1

আপনার উত্তরের অনুরূপ বাস্তবায়নে আমার সমস্যা হচ্ছে, দয়া করে stackoverflow.com/questions/38315538 দেখুন

— কোডি

এটি আপনাকে আপনার নিয়ামক হিসাবে একটি এস class শ্রেণি ব্যবহার করতে এবং এইচটিএমএলের পদ্ধতিগুলি রেফারেন্স করার অনুমতি দেয়। foo() { ... }তুলনায় উপায় পরিষ্কার $scope.foo = function() { ... }।

— ব্রায়ান ম্যাকচ্যাটন

17

controller asসিনট্যাক্সের সাথে আমি যে প্রধান সুবিধাটি দেখি তা হ'ল আপনি কন্ট্রোলারদের সাথে ক্লাস হিসাবে কাজ করতে পারেন, কেবল কিছু $ স্কোপ-সাজানোর ফাংশন নয় এবং উত্তরাধিকারের সুযোগ নিতে পারেন। আমি প্রায়শই এমন পরিস্থিতিতে চলে আসি যখন কোনও কার্যকারিতা থাকে যা বেশ কয়েকটি নিয়ামকের সাথে খুব একই রকম হয় এবং সবচেয়ে স্পষ্টতই কাজটি হল একটি BaseControllerশ্রেণি তৈরি করা এবং এটির উত্তরাধিকারী হওয়া।

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

এখানে প্রদর্শনের জন্য একটি বেহুদা: http://jsfiddle.net/HB7LU/5796/

— রোমান কোলপাক
সূত্র

1

এটি আরও বেশি উত্সাহ পাওয়া উচিত, যেহেতু ফ্রিডল সত্যিই সহায়ক

— মওগ বলেছেন মনিকা পুনরুদ্ধার করুন

13

আমি বিশ্বাস করি যে আপনি যখন স্কোপগুলি নেস্ট করেছেন তখন একটি বিশেষ সুবিধা স্পষ্ট। সম্পত্তি রেফারেন্সটি কী সুযোগ থেকে আসে তা এখন সম্পূর্ণ পরিষ্কার হয়ে যাবে।

— ডেভিড এম কারার
সূত্র

7

উৎস

সিনট্যাক্স এবং ভিএম ব্যবহার করে $scope objectএবং নিয়ামক তৈরির মধ্যে পার্থক্য“controller as”

$ স্কোপ অবজেক্টটি ব্যবহার করে একটি নিয়ামক তৈরি করা হচ্ছে

সাধারণত আমরা নীচের তালিকার মতো $ স্কোপ অবজেক্টটি ব্যবহার করে একটি নিয়ামক তৈরি করি:

myApp.controller("AddController", function ($scope) {



    $scope.number1;

    $scope.number2;

    $scope.result;

    $scope.add = function () {

        $scope.result = $scope.number1 + $scope.number2;

    }

});

উপরে আমরা তিনটি ভেরিয়েবল এবং একটি আচরণ সহ অ্যাডকন্ট্রোলার তৈরি করছি, স্কোপ অবজেক্ট নিয়ামক এবং দর্শন ব্যবহার করে, যা একে অপরের সাথে কথা বলে। $ স্কোপ অবজেক্টটি ডেটা এবং আচরণের সাথে দেখার জন্য ব্যবহার করা হয়। এটি এক সাথে ভিউ এবং নিয়ামককে আঠালো করে।

মূলত $ স্কোপ অবজেক্টটি নিম্নলিখিত কার্য সম্পাদন করে:

নিয়ামক থেকে ভিউতে ডেটা পাস করুন
কন্ট্রোলার থেকে দর্শনে আচরণ পাস করুন
নিয়ামককে অভিভূত করে এবং একসাথে দেখুন
যখন ভিউ পরিবর্তন হয় এবং $ স্কোপ অবজেক্টের বৈশিষ্ট্য পরিবর্তিত হয় তখন and স্কোপ অবজেক্টটি পরিবর্তিত হয়

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

"নিয়ামক হিসাবে" সিনট্যাক্স এবং ভিএম ব্যবহার করে

নীচের তালিকাতে প্রদর্শিত কন্ট্রোলারটিকে সিনট্যাক্স এবং ভিএম ভেরিয়েবল হিসাবে ব্যবহার করে আমরা উপরের কন্ট্রোলারটিকে আবার লিখতে পারি:

myApp.controller("AddVMController", function () {

    var vm = this;

    vm.number1 = undefined;

    vm.number2=undefined;

    vm.result =undefined;

    vm.add = function () {

        vm.result = vm.number1 + vm.number2;

    }

});

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

<div ng-controller="AddVMController as vm">

            <input ng-model="vm.number1" type="number" />

            <input ng-model="vm.number2" type="number" />

            <button class="btn btn-default" ng-click="vm.add()">Add</button>

            <h3>{{vm.result}}</h3>

  </div>

অবশ্যই আমরা সিন্টেক্স হিসাবে নিয়ামকটিতে "ভিএম" এর চেয়ে অন্য নামটি ব্যবহার করতে পারি। ফণা অধীনে, AngularJS $ সুযোগ বস্তু তৈরি করে এবং বৈশিষ্ট্য এবং আচরণ সংযুক্ত করে। তবে নিয়ামকটিকে সিনট্যাক্স হিসাবে ব্যবহার করে, নিয়ামকটিতে কোডটি খুব পরিষ্কার এবং কেবলমাত্র উলের নামটি ভিউতে দৃশ্যমান।

নিয়ামকটিকে সিনট্যাক্স হিসাবে ব্যবহার করার জন্য এখানে কয়েকটি পদক্ষেপ রয়েছে:

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

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

$ স্কোপ অবজেক্ট পদ্ধতির নেস্টেড কন্ট্রোলার

নীচের তালিকায় প্রদর্শিত হিসাবে আমাদের দুটি নিয়ামক রয়েছে:

myApp.controller("ParentController", function ($scope) {



    $scope.name = "DJ";

    $scope.age = 32;

});

myApp.controller("ChildController", function ($scope) {



    $scope.age = 22;

    $scope.country = "India";



});

সম্পত্তি "বয়স" উভয় নিয়ামকের ভিতরে রয়েছে এবং নীচের তালিকায় এই দুটি নিয়ামককে বাসা বাঁধতে পারে:

<div ng-controller="ParentController">



            <h2>Name :{{name}} </h2>

            <h3>Age:{{age}}</h3>



             <div ng-controller="ChildController">

                    <h2>Parent Name :{{name}} </h2>

                    <h3>Parent Age:{{$parent.age}}</h3>

                    <h3>Child Age:{{age}}</h3>

                    <h3>Country:{{country}}</h3>

             </div>

        </div>

আপনি যেমন দেখেন যে প্যারেন্ট কন্ট্রোলারের বয়সের সম্পত্তি অ্যাক্সেস করতে আমরা $ প্যারেন্ট.এজ ব্যবহার করছি। প্রসঙ্গ বিচ্ছেদ এখানে খুব পরিষ্কার নয়। তবে নিয়ামকটিকে সিনট্যাক্স হিসাবে ব্যবহার করে, আমরা নেস্টেড কন্ট্রোলারগুলির সাথে আরও মার্জিত উপায়ে কাজ করতে পারি। ধরে নেওয়া যাক নীচের তালিকায় প্রদর্শিত আমাদের মতো কন্ট্রোলার রয়েছে:

myApp.controller("ParentVMController", function () {

    var vm = this;

    vm.name = "DJ";

    vm.age = 32;

});

myApp.controller("ChildVMController", function () {

    var vm = this;

    vm.age = 22;

    vm.country = "India";



});

ভিউতে এই দুটি নিয়ামক নীচের তালিকায় দেখানো হিসাবে বাসা বাঁধতে পারে:

<div ng-controller="ParentVMController as parent">



            <h2>Name :{{parent.name}} </h2>

            <h3>Age:{{parent.age}}</h3>



            <div ng-controller="ChildVMController as child">

                <h2>Parent Name :{{parent.name}} </h2>

                <h3>Parent Age:{{parent.age}}</h3>

                <h3>Child Age:{{child.age}}</h3>

                <h3>Country:{{child.country}}</h3>

            </div>

 </div>

সিনট্যাক্স হিসাবে নিয়ামক হিসাবে, আমাদের আরও পঠনযোগ্য কোড রয়েছে এবং $ প্যারেন্ট সিনট্যাক্স ব্যবহার না করে প্যারেন্ট কন্ট্রোলারের উপনাম নামটি ব্যবহার করে প্যারেন্ট সম্পত্তিটি অ্যাক্সেস করা যায়।

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

— ShibinRagh
সূত্র

4

আমি খুঁজে পাই যে প্রধান সুবিধাটি আরও স্বজ্ঞাত এপিআই যেহেতু পদ্ধতি / বৈশিষ্ট্যগুলি সরাসরি নিয়ামকের সাথে সম্পর্কিত হয় স্কোপ অবজেক্টের সাথে নয়। মূলত, পুরানো পদ্ধতির সাথে, নিয়ামক স্কোপ অবজেক্টটি তৈরির জন্য কেবল একটি সাজসজ্জা হয়ে যায়।

এখানে এই আরো কিছু তথ্য দেওয়া হল: http://www.syntaxsuccess.com/viewarticle/551798f20c5f3f3c0ffcc9ff

— TGH
সূত্র

3

আমি যা পড়েছি তা থেকে, $ স্কোপটি কৌনিক 2.0 তে সরানো হবে, বা কমপক্ষে কীভাবে আমরা $ সুযোগের ব্যবহার দেখব। 2.0 কাছাকাছি রিলিজ হিসাবে কন্ট্রোলার ব্যবহার শুরু করা ভাল হতে পারে।

এটিতে আরও আলোচনার জন্য এখানে ভিডিও লিঙ্ক ।

— jason328
সূত্র

AngularJs "নিয়ন্ত্রক হিসাবে" সিনট্যাক্স - ব্যাখ্যা?