আমি একটি পৃষ্ঠায় দুটি কৌণিক অ্যাপস / মডিউল যুক্ত করার চেষ্টা করছি। নীচের ফিডলগুলিতে আপনি দেখতে পাচ্ছেন যে এইচটিএমএল কোডে উল্লেখ করা কেবলমাত্র প্রথম মডিউলটি সঠিকভাবে কাজ করবে, অন্যদিকে কৌণিক দ্বারা স্বীকৃত নয়।
এই ঝাঁকুনিতে আমরা কেবল doSearch2পদ্ধতিটি কার্যকর করতে পারি , তবে এই ফিডলে কেবল doSearchপদ্ধতিটি সঠিকভাবে কাজ করে।
আমি কীভাবে সঠিকভাবে একটি পৃষ্ঠায় দুটি কৌণিক মডিউল রাখার উপায়টি খুঁজছি।
উত্তর:
এইচটিএমএল ডকুমেন্টে কেবলমাত্র একটি অ্যাঙ্গুলারজেএস অ্যাপ্লিকেশনটি স্বয়ংক্রিয়-বুটস্ট্র্যাপড হতে পারে। নথিতে পাওয়া প্রথম এনজিএপ অ্যাপ্লিকেশন হিসাবে অটো-বুটস্ট্র্যাপে মূল উপাদানটি সংজ্ঞায়িত করতে ব্যবহৃত হবে। এইচটিএমএল ডকুমেন্টে একাধিক অ্যাপ্লিকেশন চালানোর জন্য আপনাকে এগুলি পরিবর্তে অ্যাঙ্গুলার.বুটস্ট্র্যাপ ব্যবহার করে ম্যানুয়ালি বুটস্ট্র্যাপ করতে হবে। AngularJS অ্যাপ্লিকেশনগুলি একে অপরের মধ্যে বাসা বাঁধতে পারে না। - http://docs.angularjs.org/api/ng.directive:ngApp
আরো দেখুন
ng-app(কারণ এটি কাজ করবে না)। ng-appশুধুমাত্র এইচটিএমএল ডকুমেন্টে একবার ব্যবহার করা যেতে পারে। পৃষ্ঠায় যদি আপনার কেবল একটি অ্যাপ থাকে তবে এটি সত্যিই একটি শর্ট কাট।
আমি একটি বিকল্প নির্দেশিকা তৈরি করেছি যার ngAppসীমাবদ্ধতা নেই। এটি বলা হয় ngModule। আপনি কোড ব্যবহার করার সময় আপনার কোডটি দেখতে দেখতে দেখতে এটির মতো হবে:
<!DOCTYPE html>
<html>
<head>
<script src="angular.js"></script>
<script src="angular.ng-modules.js"></script>
<script>
var moduleA = angular.module("MyModuleA", []);
moduleA.controller("MyControllerA", function($scope) {
$scope.name = "Bob A";
});
var moduleB = angular.module("MyModuleB", []);
moduleB.controller("MyControllerB", function($scope) {
$scope.name = "Steve B";
});
</script>
</head>
<body>
<div ng-modules="MyModuleA, MyModuleB">
<h1>Module A, B</h1>
<div ng-controller="MyControllerA">
{{name}}
</div>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
<div ng-module="MyModuleB">
<h1>Just Module B</h1>
<div ng-controller="MyControllerB">
{{name}}
</div>
</div>
</body>
</html>আপনি উত্স কোডটি এখানে পেতে পারেন:
http://www.simplygoodcode.com/2014/04/angularjs-getting-around-ngapp-limitations-with-ngmodule/
এটি সীমাবদ্ধতা ছাড়াই মূলত AngularJS দ্বারা অভ্যন্তরীণভাবে ব্যবহৃত একই কোড।
আপনি কেন একাধিক [এনজি-অ্যাপ] ব্যবহার করতে চান? যেহেতু অ্যাঙ্গুলারটি মডিউলগুলি ব্যবহার করে পুনরায় শুরু করা হয়েছে, আপনি এমন অ্যাপ্লিকেশন ব্যবহার করতে পারেন যা একাধিক নির্ভরতা ব্যবহার করে।
javascript:
// setter syntax -> initializing other module for demonstration
angular.module('otherModule', []);
angular.module('app', ['otherModule'])
.controller('AppController', function () {
// ...do something
});
// getter syntax
angular.module('otherModule')
.controller('OtherController', function () {
// ...do something
});এইচটিএমএল:
<div ng-app="app">
<div ng-controller="AppController">...</div>
<div ng-controller="OtherController">...</div>
</div>সম্পাদনা
মনে রাখবেন যে আপনি যদি নিয়ামকের অভ্যন্তরে নিয়ামক ব্যবহার করতে চান তবে আপনাকে নিয়ন্ত্রণকারীর বাক্য গঠনটি ব্যবহার করতে হবে, যেমন:
<div ng-app="app">
<div ng-controller="AppController as app">
<div ng-controller="OtherController as other">...</div>
</div>
</div>আপনি একাধিক কৌণিক অ্যাপ্লিকেশন বুটস্ট্র্যাপ করতে পারেন তবে:
1) আপনাকে সেগুলি ম্যানুয়ালি বুটস্ট্র্যাপ করতে হবে
২) আপনার "ডকুমেন্ট" রুট হিসাবে ব্যবহার করা উচিত নয়, তবে যে নোডটিতে কৌণিক ইন্টারফেস রয়েছে সেগুলি:
var todoRootNode = jQuery('[ng-controller=TodoController]');
angular.bootstrap(todoRootNode, ['TodoApp']);এটি নিরাপদ হবে।
দুটি মডিউলই ম্যানুয়াল বুটস্ট্র্যাপিংয়ের কাজ করবে। এটা দেখ
<!-- IN HTML -->
<div id="dvFirst">
<div ng-controller="FirstController">
<p>1: {{ desc }}</p>
</div>
</div>
<div id="dvSecond">
<div ng-controller="SecondController ">
<p>2: {{ desc }}</p>
</div>
</div>
// IN SCRIPT
var dvFirst = document.getElementById('dvFirst');
var dvSecond = document.getElementById('dvSecond');
angular.element(document).ready(function() {
angular.bootstrap(dvFirst, ['firstApp']);
angular.bootstrap(dvSecond, ['secondApp']);
});এখানে প্লিংকারের লিঙ্কটি http://plnkr.co/edit/1SdZ4QpPfuHtdBjTKJIu?p= পূর্বরূপ দেখুন
দ্রষ্টব্য: এইচটিএমএলে, নেই ng-app। idপরিবর্তে ব্যবহার করা হয়েছে।
আমি একক পৃষ্ঠায় অ্যাপ্লিকেশন নেস্ট সাব অ্যাপ্লিকেশন একাধিক মডিউল এবং রাউটার আউটলেট ব্যবহার করে একটি কৌণিক অ্যাপ্লিকেশন জন্য একটি POC তৈরি। আপনি উত্স কোডটি এখানে পেতে পারেন: https://github.com/AhmedBahet/ng-sub-apps
আশা করি এটি সাহায্য করবে
ng-app="project"এবং বলে যে "এটি আপনাকে পৃষ্ঠার বিভিন্ন অংশে মডিউল দেয় যা" দেয় কিন্তু এনজিএপি ডকটি বলে যে "এইচটিএমএল ডকুমেন্টে কেবল একটি নির্দেশিকা ব্যবহার করা যেতে পারে"।