একক পৃষ্ঠা অ্যাপে অ্যাঙ্গুলারজেএস সহ একাধিক নিয়ামক

Question

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

এটি কি কারণ একক পৃষ্ঠার জন্য একাধিক নিয়ামক ব্যবহার করা বুদ্ধিমানের কাজ নয়? নাকি এটা ঠিক সম্ভব নয়?

ধরা যাক আমার কাছে ইতিমধ্যে একটি কিক-গাধা ইমেজ ক্যারোসেল নিয়ামক মূল পৃষ্ঠাতে কাজ করছে, তবে তারপরে আমি কীভাবে মডেলগুলি ব্যবহার করতে পারি (তা বলা যাক) শিখি এবং এর জন্য আমারও নতুন কন্ট্রোলার প্রয়োজন (বা অন্য কোনও জিনিসে আমার একটি নিয়ামক প্রয়োজন)। আমি তখন কি করব?

আমি অন্যান্য প্রশ্নের কিছু উত্তর দেখেছি যেখানে তারা আমার ও লোকেদের প্রায় একই জিনিস সম্পর্কে জিজ্ঞাসা করে "" ওএমজি। আপনি এমনকি কেন এমনটা করবেন কেন, কেবল এটি করুন ... "।

সবচেয়ে ভাল উপায় কী, বা আপনি এটি কীভাবে করেন?

সম্পাদন করা

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

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/main.html",                                               
         controller:'MainCtrl',                                
        })                                                                      
        .otherwise({                      
            template: 'does not exists'   
        });      
});

আমি যদি এটি না করে কেবল এনজি-কন্ট্রোলার ব্যবহার করতে পারি তবে আমাকে কেন এখানে নিয়ামক স্থাপন করতে হবে? এটাই আমাকে বিভ্রান্ত করেছে। (এবং আপনি এইভাবে দুটি নিয়ামক যুক্ত করতে পারবেন না, আমার মনে হয় ...)

Comments

আমি ভাবি না যে আমি একটি একক .html ফাইলের জন্য 2 টি নিয়ন্ত্রক ঘোষণা করতে পারি? এটা কিভাবে হয়? when: /home, controller: MainCtrl। এর চেয়ে আর কোনও যোগ করতে পারে না, বা ডু আপনি কেবল এনজি-কন্ট্রোলারের সাথে এটি কল করতে চান?

@ মোশো, আপনি পদক্ষেপ 1, পদক্ষেপ 2, সম্পন্ন করেছেন, তবে কীভাবে বা কেন তা ব্যাখ্যা করবেন না। যদি এটি সহজ হয়, তবে দয়া করে কীভাবে তা ব্যাখ্যা করুন। এটি AngularJS, সম্পন্ন বলার মতো like আপনি বিস্তারিত / ব্যাখ্যা করতে পারেন? অথবা জুন থেকে হিসাবে, তারা জবাব দিতে পারে না, অন্য কেউ ব্যাখ্যা করতে পারেন?

— redfox05

Answer 1

সমস্যাটা কি? একাধিক কন্ট্রোলার ব্যবহার করতে, একাধিক এনজি কন্ট্রোলার নির্দেশিকা ব্যবহার করুন:

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>

আপনার যথারীতি আপনার অ্যাপ্লিকেশন মডিউলে কন্ট্রোলারগুলি উপলব্ধ থাকতে হবে।

এটি করার সর্বাধিক প্রাথমিক উপায়টি নিয়ামক কার্যকারিতা ঘোষণার মতো সহজ হতে পারে:

function widgetController($scope) {
   // stuff here
}

function menuController($scope) {
   // stuff here
}

Comments

এভাবেই কী হয়? আমি এটি ব্যবহার করছিwhen /home, controller: MainCtrl

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

— কৌনিক

ng-controllerএকাধিক ডিওএম উপাদান ব্যবহার করার ক্ষেত্রে আমি যে সমস্যাটি করেছি তা হ'ল এমন একটি দৃশ্যে বলা যেতে পারে যেখানে আমার কাছে অনেকগুলি আইটেম DOM এর মাধ্যমে মুদ্রণযোগ্য ng-repeat। আসুন যাক এর প্রত্যেকটি কল করে ng-controller="myController। আমি আমার অ্যাপ্লিকেশনটিতে দেখেছি এমন কয়েকটি কনসোল লগগুলি থেকে, myControllerডমটিতে যে প্রতিটি উপাদান রেন্ডার করা হয়েছে তার সাথে পুনরায় সূচনা করে .... এটি সম্ভবত আমার নির্দিষ্ট ব্যবহারে কিছু ভুল করেছে, বা সম্ভবত ওপি'র পরিধি ছাড়িয়েছে maybe প্রশ্ন, তবে কৌতূহলী অন্যরা যদি তা

— কোনওভাবেই অনুভব

Answer 2

আমি মনে করি আপনি "একক পৃষ্ঠার অ্যাপ" অর্থ মিস করছেন missing

এর অর্থ এই নয় যে আপনার শারীরিকভাবে একটি .html থাকবে, পরিবর্তে আপনার একটি প্রধান index.htmlএবং বেশ কয়েকটি NESTED .html ফাইল থাকবে। তাহলে একক পৃষ্ঠার অ্যাপ? কারণ এইভাবে আপনি পৃষ্ঠাগুলিকে স্ট্যান্ডার্ড উপায়ে লোড করবেন না (যেমন ব্রাউজার কল যা পুরো পৃষ্ঠাটিকে পুরোপুরি রিফ্রেশ করে) তবে আপনি কেবল কৌনিক / অ্যাজাক্স ব্যবহার করে সামগ্রীর অংশটি লোড করেন। আপনি যেহেতু পৃষ্ঠা পরিবর্তনগুলির মধ্যে ঝলকানি দেখতে পাচ্ছেন না, তাই আপনার ধারণা রয়েছে যে আপনি পৃষ্ঠাটি থেকে সরে যান নি। সুতরাং, আপনি মনে করছেন যে আপনি একক পৃষ্ঠায় রয়েছেন।

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

• index.html: শিরোনাম <ng-view>এবং পাদচরণ অন্তর্ভুক্ত
• contacts.html: যোগাযোগ ফর্ম রয়েছে (কোনও শিরোনাম নেই, পাদচরণ নেই)
• portfolio.html: এতে পোর্টফোলিও ডেটা রয়েছে (কোনও শিরোনাম নেই ফুটার)
• store.html: স্টোর রয়েছে, কোনও শিরোনাম নেই ফুটার।

আপনি সূচকে আছেন, আপনি "পরিচিতি" নামক মেনুতে ক্লিক করেন এবং কী ঘটে? কৌণিক কোডের <ng-view>সাথে ট্যাগটি প্রতিস্থাপন করেcontacts.html

আপনি যে কিভাবে অর্জন করবেন? সাথে ngRoute, আপনি যেমন করছেন, আপনার এমন কিছু হবে:

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/', {                                            
         templateUrl: "templates/index.html",                                               
         controller:'MainCtrl',                                
        })
        .when('/contacts', {                                            
         templateUrl: "templates/contacts.html",                                               
         controller:'ContactsCtrl',                                
        })                                                                 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

এটি ডান এইচটিএমএলকে ডান কন্ট্রোলারটির কাছে পাঠিয়ে ফোন করবে (দয়া করে নোট করুন: আপনি যদি রুটগুলি ব্যবহার করছেন তবে নির্দেশিকা নির্দিষ্ট করবেন নাng-controllercontacts.html )

তারপরে, অবশ্যই, আপনি আপনার পরিচিতিগুলি html পৃষ্ঠায় অনেকগুলি এনজি-কন্ট্রোলার নির্দেশিকা ঘোষণা করতে পারেন। তারাই হবে শিশু নিয়ামক ContactCtrl(সুতরাং এটির উত্তরাধিকারসূত্রে)। তবে একক রুটের জন্য, এর অভ্যন্তরে routeProvider, আপনি এমন একক নিয়ামক ঘোষণা করতে পারেন যা "আংশিক দৃষ্টিভঙ্গির ফাদার নিয়ন্ত্রক" হিসাবে কাজ করবে।

সম্পাদনা করুন নিম্নলিখিত টেমপ্লেট / কন্টাক্টস html কল্পনা করুন

<div>
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

উপরে routeProviderআপনার ধারণকারী DIV সেটিকে একটি নিয়ামক উদ্বুদ্ধ হবে। মূলত উপরের এইচটিএমএল স্বয়ংক্রিয়ভাবে পরিণত হয়:

<div ng-controller="ContactsCtrl">
    <h3>Contacts</h3>
    <p>This is contacts page...</p>
</div>

যখন আমি বলি যে আপনি অন্যদেরকে নিয়ন্ত্রক রাখতে পারেন, তার মানে আপনি নিম্নরূপে অভ্যন্তরীণ ডিওএম উপাদানগুলিতে নিয়ন্ত্রণকারীকে প্লাগ করতে পারেন:

<div>
    <h3>Contacts</h3>
    <p ng-controller="anotherCtrl">Hello {{name}}! This is contacts page...     
    </p>
</div>

আমি আশা করি এটি কিছুটা স্পষ্ট করবে।

একজন

Comments

সুতরাং আপনি যদি এমন <div ng-controller="FancyStuffController">কোনও বডি ট্যাগের ভিতরে কোনও কন্ট্রোলার ইতিমধ্যে প্রয়োগ করে থাকেন তবে এটি <body ng-controller="BodyController">কাজ করবে? $apply already in progressআমি যখন এটি করি তখন আমি ত্রুটিগুলি পাচ্ছি তবে আমি মনে করি এটি ডিপিডি.জেএস সম্পর্কিত related এতে getোকার জন্য নয়, আমি মনে করি এটি কেবল দু'বার বা কিছু লোড হচ্ছে, কীভাবে নিশ্চিত তা নয়, তবে আমার নিয়ামকের ব্যবহার এটি পুনরায় লোড করার চেষ্টা করছে।

— 8:48

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

— অধরা

Answer 3

আমি বর্তমানে একটি একক পৃষ্ঠা অ্যাপ্লিকেশন তৈরির প্রক্রিয়াধীন। আমি এখানে এতদূর যা জানি আমার বিশ্বাস আপনার প্রশ্নের উত্তর দিবে। আমার একটি বেস টেমপ্লেট রয়েছে (বেস.html) যা এতে ng-viewনির্দেশের সাথে একটি ডিভ আছে । এই নির্দেশিকাটি কৌণিককে বলেছে যে নতুন সামগ্রীটি কোথায় রাখা উচিত Note মনে রাখবেন যে আমি নিজেই কৌণিকভাবে নতুন আছি তাই আমি কোনওভাবেই বলছি না এটি করার সর্বোত্তম উপায়।

app = angular.module('myApp', []);                                                                             

app.config(function($routeProvider, $locationProvider) {                        
  $routeProvider                                                                
       .when('/home/', {                                            
         templateUrl: "templates/home.html",                                               
         controller:'homeController',                                
        })                                                                      
        .when('/about/', {                                       
            templateUrl: "templates/about.html",     
            controller: 'aboutController',  
        }) 
        .otherwise({                      
            template: 'does not exists'   
        });      
});

app.controller('homeController', [              
    '$scope',                              
    function homeController($scope,) {        
        $scope.message = 'HOME PAGE';                  
    }                                                
]);                                                  

app.controller('aboutController', [                  
    '$scope',                               
    function aboutController($scope) {        
        $scope.about = 'WE LOVE CODE';                       
    }                                                
]); 

base.html

<html>
<body>

    <div id="sideMenu">
        <!-- MENU CONTENT -->
    </div>

    <div id="content" ng-view="">
        <!-- Angular view would show here -->
    </div>

<body>
</html>

Comments

প্রকৃতপক্ষে, আমি এনজিও-ভিউও ব্যবহার করছি যাতে আমি আমার ইনডেক্স.ইচটিএমএলে একটি মেইন এইচটিএমএল ব্যবহার করতে পারি। তবে আপনার কাছে / বাড়ির এবং / প্রায় এবং দু'জন নিয়ামক প্রত্যেকের জন্য। আমার কেবলমাত্র আমার প্রধান এইচটিএমএল-তে এনজি-ভিউ সহ সূচক। Html আছে। আপনি যেমন করেছেন মেইন এইচটিটিএমএলের জন্য আমি দুটি কন্ট্রোলার সেট করতে পারি নাwhen /home

এই পোস্ট থেকে প্রথম উত্তরটি একবার দেখুন: stackoverflow.com/questions/17354568/…

— অস্টিন

ভাল, আমি জানি কীভাবে আরও বেশি সেট করা যায় when। আমি একটি একক টেম্পলেট জন্য দুটি নিয়ামক চাই। বা মাবি, আপনি আমাকে যা বলতে চাইছেন তা আমি ভুল বুঝেছি?

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

— অস্টিন

Answer 4

<div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
</div>

<div class="menu" ng-controller="menuController">
    <p>Other stuff here</p>
</div>
///////////////// OR ////////////


  <div class="widget" ng-controller="widgetController">
    <p>Stuff here</p>
    <div class="menu" ng-controller="menuController">
        <p>Other stuff here</p>
    </div>
</div>

মেনু বিভাগের জন্য মেনু কনট্রোলারের অ্যাক্সেস রয়েছে। এবং উইজেটকন্ট্রোলারের উভয়ের অ্যাক্সেস রয়েছে।

Comments

এটি সোজা মনে হলেও এগুলির কোনও উন্নতি নেই। এটি কি সেরা অনুশীলন, না খারাপ?

— redfox05

আপনি কি করবেন, যদি আপনার অনেক পৃষ্ঠা 100+ নিয়ামক থাকে! ... অস্পষ্ট অভ্যাস।

— আরিফ মুস্তফা

Answer 5

আমরা একই মডিউলে কেবল একাধিক নিয়ামক ঘোষণা করতে পারি। এখানে একটি উদাহরণ:

  <!DOCTYPE html>
    <html>

    <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
       </script>
      <title> New Page </title>


    </head> 
    <body ng-app="mainApp"> <!-- if we remove ng-app the add book button [show/hide] will has no effect --> 
      <h2> Books </h2>

    <!-- <input type="checkbox" ng-model="hideShow" ng-init="hideShow = false"></input> -->
    <input type = "button" value = "Add Book"ng-click="hideShow=(hideShow ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "bookController" ng-if="hideShow">
             Enter book name: <input type = "text" ng-model = "book.name"><br>
             Enter book category: <input type = "text" ng-model = "book.category"><br>
             Enter book price: <input type = "text" ng-model = "book.price"><br>
             Enter book author: <input type = "text" ng-model = "book.author"><br>


             You are entering book: {{book.bookDetails()}}
     </div>

    <script>
             var mainApp = angular.module("mainApp", []);

             mainApp.controller('bookController', function($scope) {
                $scope.book = {
                   name: "",
                   category: "",
                   price:"",
                   author: "",


                   bookDetails: function() {
                      var bookObject;
                      bookObject = $scope.book;
                      return "Book name: " + bookObject.name +  '\n' + "Book category: " + bookObject.category + "  \n" + "Book price: " + bookObject.price + "  \n" + "Book Author: " + bookObject.author;
                   }

                };
             });
    </script>

    <h2> Albums </h2>
    <input type = "button" value = "Add Album"ng-click="hideShow2=(hideShow2 ? false : true)"> </input>
     <div ng-app = "mainApp" ng-controller = "albumController" ng-if="hideShow2">
             Enter Album name: <input type = "text" ng-model = "album.name"><br>
             Enter Album category: <input type = "text" ng-model = "album.category"><br>
             Enter Album price: <input type = "text" ng-model = "album.price"><br>
             Enter Album singer: <input type = "text" ng-model = "album.singer"><br>


             You are entering Album: {{album.albumDetails()}}
     </div>

    <script>
             //no need to declare this again ;)
             //var mainApp = angular.module("mainApp", []);

             mainApp.controller('albumController', function($scope) {
                $scope.album = {
                   name: "",
                   category: "",
                   price:"",
                   singer: "",

                   albumDetails: function() {
                      var albumObject;
                      albumObject = $scope.album;
                      return "Album name: " + albumObject.name +  '\n' + "album category: " + albumObject.category + "\n" + "Book price: " + albumObject.price + "\n" + "Album Singer: " + albumObject.singer;
                   }
                };
             });
    </script>

    </body>
    </html>

Answer 6

আমি কেবল অ্যাপটির একটি সাধারণ ঘোষণা রেখেছি

var app = angular.module("app", ["xeditable"]);

তারপরে আমি একটি পরিষেবা এবং দুটি নিয়ামক তৈরি করেছি

প্রতিটি নিয়ামকের জন্য আমার জেএসে একটি লাইন ছিল

app.controller('EditableRowCtrl', function ($scope, CRUD_OperService) {

এবং এইচটিএমএলে আমি অ্যাপটি স্কোপটিকে আশেপাশের ডিভিতে ঘোষণা করেছিলাম

<div ng-app="app">

এবং প্রতিটি কন্ট্রোলার সুযোগ আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা ভাগ

<div ng-controller="EditableRowCtrl">

এটি ভাল কাজ করে

Answer 7

আপনি সমস্ত টেম্পলেট ভিউগুলি আপনার মূল এইচটিএমএল ফাইলটিতে এম্বেড করতে পারেন। উদাহরণ স্বরূপ:

<body ng-app="testApp">
  <h1>Test App</h1>
  <div ng-view></div>
  <script type = "text/ng-template" id = "index.html">
    <h1>Index Page</h1>
    <p>{{message}}</p>
  </script>
  <script type = "text/ng-template" id = "home.html">
    <h1>Home Page</h1>
    <p>{{message}}</p>
  </script>
</body>

এইভাবে যদি প্রতিটি টেমপ্লেটের জন্য আলাদা কন্ট্রোলার প্রয়োজন হয় তবে আপনি এখনও কৌণিক-রাউটার ব্যবহার করতে পারেন। একটি কার্যকারী উদাহরণের জন্য এই প্লঙ্কটি দেখুন http://plnkr.co/edit/9X0fT0Q9MlXtHVVQLhgr?p=preview

এইভাবে একবার সার্ভার থেকে আপনার ক্লায়েন্টের কাছে অ্যাপ্লিকেশনটি প্রেরণ করা হয়ে গেলে এটি সম্পূর্ণরূপে স্বতন্ত্র থাকে যে ধরে নেওয়া যায় যে এটির কোনও ডেটা অনুরোধ করার দরকার নেই, ইত্যাদি etc.