কীভাবে পৃথক অ্যাঙ্গুলারজেএস নিয়ন্ত্রণকারী ফাইল তৈরি করবেন?

Question

আমার সমস্ত কৌনিক জেএস কন্ট্রোলার একটি ফাইল, কন্ট্রোলার.জেজে রয়েছে s এই ফাইলটি নিম্নরূপে কাঠামোযুক্ত:

angular.module('myApp.controllers', [])
  .controller('Ctrl1', ['$scope', '$http', function($scope, $http) {    
  }])
  .controller('Ctrl2', ['$scope', '$http', function($scope, $http) }
  }])

আমি যা করতে চাই তা হল Ctrl1 এবং Ctrl2 আলাদা ফাইলগুলিতে স্থাপন করা। তারপরে আমি উভয় ফাইলকে আমার সূচক html এ অন্তর্ভুক্ত করব তবে কীভাবে এটি কাঠামোগত করা উচিত? আমি এটির মতো কিছু করার চেষ্টা করেছি এবং এটি ওয়েব ব্রাউজার কনসোলে একটি ত্রুটি ছুঁড়েছে যা বলেছে যে এটি আমার নিয়ামকগুলি খুঁজে পাচ্ছে না। কোন ইঙ্গিত?

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

---

AngularJS: আমি একাধিক ফাইলে কীভাবে কন্ট্রোলার তৈরি করব

Answer 1

ফাইল ফাইল:

angular.module('myApp.controllers', []);

ফাইল দুটি:

angular.module('myApp.controllers').controller('Ctrl1', ['$scope', '$http', function($scope, $http){

}]);

তিনটি ফাইল:

angular.module('myApp.controllers').controller('Ctrl2', ['$scope', '$http', function($scope, $http){

}]);

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

---

ফোল্ডারের কাঠামোর ক্ষেত্রে এই বিষয়ে অনেকগুলি মতামত রয়েছে তবে এই দুটি বেশ ভাল

https://github.com/angular/angular-seed

http://briantford.com/blog/huuuuuge-angular-apps.html

Comments

ওপি যদি কফিস্ক্রিপ্ট সিনট্যাক্স সম্পর্কে বিভ্রান্তির ইঙ্গিত দেয় তবে সম্ভবত আপনার উত্তরে এটি ব্যবহার না করাই ভাল?

— অ্যান্ড্রু

অ্যান্ড্রু ইমো ভবিষ্যতের সহায়তা এবং সমাধানের রেকর্ড তৈরি করে যা হ'ল এক্সটেম্পোরেরিয়াস কি এবং এ নয় really

— ফ্রেশিয়েবল

@ রাস্লানআইসমাগিলভ আপনার appCtrlবিশ্বব্যাপী window.appCtrl। এটি একটি ভাল অনুশীলন নয়।

— ফ্রেশিয়েবল

@ ফ্রেশিয়েবল, এই পদ্ধতির সমস্যা হ'ল সূচক html এ আমদানির ক্রমটি গুরুত্বপূর্ণ, অন্যথায়, কৌণিক নির্গত ত্রুটি।

— Deoxyseia

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

— ফ্রেশিয়েবল

Answer 2

শেষে একটি অ্যারের সাথে কৌণিক.মডিউল এপিআই ব্যবহার করা কৌণিককে একটি নতুন মডিউল তৈরি করতে বলবে:

myApp.js

// It is like saying "create a new module"
angular.module('myApp.controllers', []); // Notice the empty array at the end here

অ্যারে ছাড়া এটি ব্যবহার করা আসলে একটি গিটার ফাংশন। সুতরাং আপনার নিয়ন্ত্রণকারীদের আলাদা করতে, আপনি এটি করতে পারেন:

Ctrl1.js

// It is just like saying "get this module and create a controller"
angular.module('myApp.controllers').controller('Ctrlr1', ['$scope', '$http', function($scope, $http) {}]);

Ctrl2.js

angular.module('myApp.controllers').controller('Ctrlr2', ['$scope', '$http', function($scope, $http) {}]);

আপনার জাভাস্ক্রিপ্ট আমদানির সময়, নিশ্চিত করুন যে myApp.js AngularJS এর ​​পরে রয়েছে তবে কোনও নিয়ামক / পরিষেবা / ইত্যাদির আগে ... অন্যথায় কৌণিক আপনার নিয়ন্ত্রককে আরম্ভ করতে সক্ষম হবে না।

Comments

আমার নির্ভরতা কোথায় লিখতে হবে? var myapp = কৌণিক.মডিউল ('ডেমো', ['এনজিআরউট', 'এনজিকুকিজ', 'ui.bootstrap', 'nvd3ChartDirectives', 'ui-rangeSlider', 'textAngular', 'AngularTreeview']);

— ভিপিন

আপনি যা লিখেছেন ঠিক তেমনই ভিপিন, তবে এটি কোনও নিয়ন্ত্রণকারী, পরিষেবা ইত্যাদির aboveর্ধ্বে রয়েছে তা নিশ্চিত করুন Techn কারণ কৌণিক এটি আপনার জন্য সংরক্ষণ করবে।

— জিমি আউ

@ জিমিআউ পৃষ্ঠাটি এটি ব্যবহার করতে যাতে Ctrl1.js এবং Ctrl2.js কোথায় লোড হয়? আমি আমার অ্যাপ্লিকেশন.জেগুলি ঠিক কৌণিকের পরে লোড করেছি তবে পৃষ্ঠাটি নিয়ন্ত্রণকারীদের খুঁজে পাচ্ছে না। এটির প্রয়োজনীয় দৃষ্টিভঙ্গিতে কি আমাকে স্পষ্টভাবে স্ক্রিপ্ট হিসাবে যুক্ত করতে হবে? বা আমি কি এখনও প্রতিটি পৃষ্ঠায় প্রতিটি নিয়ামক ফাইল অন্তর্ভুক্ত করতে হবে?

— সিনাইস্টেটিক

কেন কেবল প্রথম কলটির প্রয়োজন তা পরিষ্কার করার জন্য ধন্যবাদ []।

— জিম বি।

Answer 3

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

ফাইল এক

// Create the module that deals with controllers
angular.module('myApp.controllers', []);

ফাইল দুটি

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl1
// to the module we got in the line above
.controller('Ctrl1', Ctrl1);

// Inject my dependencies
Ctrl1.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl1($scope, $http) {
  // Logic here
}

ফাইল তিন

// Here we get the module we created in file one
angular.module('myApp.controllers')

// We are adding a function called Ctrl2
// to the module we got in the line above
.controller('Ctrl2', Ctrl2);

// Inject my dependencies
Ctrl2.$inject = ['$scope', '$http'];

// Now create our controller function with all necessary logic
function Ctrl2($scope, $http) {
  // Logic here
}

Comments

আকর্ষণীয়, এটি আমাকে নিয়ামক নিবন্ধ করতে একাধিক ফাইলগুলিতে যেতে বাধা দেয়

— mrwaim

আমি এরকম প্রচুর কোডিং দেখছি। সুবিধা কী? ইনজেকশন এবং একটি ফাংশন পৃথক করা of

— Alaksandar যীশু জিন

আমি বিশ্বাস করি এটি কোড পড়তে সহজ করে তোলে। আমি জানি ঠিক কী ইনজেকশন দেওয়া হচ্ছে। লাইন বাই লাইন ভিত্তিতে এটিকে "উদ্বেগের বিচ্ছেদ" হিসাবে ভাবেন।

— জেসন 328

এর মতো কোডগুলি কেবলমাত্র বেশি পঠনযোগ্য কোড তৈরি করে না, ডিবাগ করা অনেক সহজ এবং নেস্টেড কলব্যাক কোডের পরিমাণ হ্রাস করে ( github.com/johnpapa/angular-styleguide/blob/master/a1/… দেখুন )

— rfornal

আমি যদি এই 1000 বার +1 করতে পারতাম - ব্র্যাভো!

— ড্যান চেজ

Answer 4

এই সমাধান সম্পর্কে কি? ফাইলগুলিতে মডিউল এবং নিয়ন্ত্রক (পৃষ্ঠার শেষে) এটি একাধিক কন্ট্রোলার, নির্দেশাবলী এবং এর সাথে কাজ করে:

app.js

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

myCtrl.js

app.controller("myCtrl", function($scope) { ..});

এইচটিএমএল

<script src="app.js"></script>
<script src="myCtrl.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

গুগলের অ্যাংুলার অ্যাপ স্ট্রাকচারের জন্য আমিও সেরা প্র্যাকটিস সুপারিশ রেখেছি সত্যই আমি প্রসঙ্গে দলবদ্ধ করতে চাই। একটি ফোল্ডারে সমস্ত এইচটিএমএল নয়, উদাহরণস্বরূপ লগইন করার জন্য সমস্ত ফাইল (এইচটিএমএল, সিএসএস, অ্যাপ.জেএস, কন্ট্রোল.আরজেজ এবং অন্যান্য)। সুতরাং আমি যদি কোনও মডিউলে কাজ করি তবে সমস্ত নির্দেশিকা সন্ধান করা আরও সহজ।

Answer 5

বংশবৃদ্ধির জন্য, এখানে একটি ES2015 নমুনা রয়েছে যা বৈশ্বিক চলকগুলিতে নির্ভর করে না

// controllers/example-controller.js

export const ExampleControllerName = "ExampleController"
export const ExampleController = ($scope) => {
  // something... 
}

// controllers/another-controller.js

export const AnotherControllerName = "AnotherController"
export const AnotherController = ($scope) => {
  // functionality... 
}

// app.js

import angular from "angular";

import {
  ExampleControllerName,
  ExampleController
} = "./controllers/example-controller";

import {
  AnotherControllerName,
  AnotherController
} = "./controllers/another-controller";

angular.module("myApp", [/* deps */])
  .controller(ExampleControllerName, ExampleController)
  .controller(AnotherControllerName, AnotherController)

Comments

আপনি টাইপিংয়ের বেশ কিছুটা সংরক্ষণ করতে পারেন যদি আপনি নামযুক্ত ফাংশনগুলি ব্যবহার করেন .. তাদের হাতে সম্পত্তি আছে name.. সুতরাং আপনি ExampleCtrl.nameদ্বৈত পরিবর্তে কেবল ব্যবহার করতে পারেন .. এটি ত্রিভুজি করে।

— আন্তি পিহলাজা

Answer 6

তেমন করুণাময় নয়, তবে বাস্তবায়ন সমাধানে খুব সহজ - বৈশ্বিক ভেরিয়েবল ব্যবহার করে।

"প্রথম" ফাইলটিতে:

window.myApp = angular.module("myApp", [])
....

"দ্বিতীয়", "তৃতীয়" ইত্যাদিতে:

myApp.controller('MyController', function($scope) {
    .... 
    }); 

Comments

আমি এই কোডটি ব্যবহার করি কিন্তু এখনও আমার নিয়ামকটি লোড করতে পারি না? এটি ত্রুটি ছুঁড়ে ফেলেছে: ত্রুটি: [এনজি: আরকিউ] আর্গুমেন্ট 'প্রোডাক্ট সিআরটিএল' কোনও ফাংশন নয়, অপরিশোধিত হয়েছে।

— কিউভিট

এটি আসলেই খারাপ অভ্যাস

— ব্রেন্ডন

@ কিম জং উন আপনি যদি ত্রুটিটি দেখতে পাবেন তবে আপনি যে মডিউলটি তৈরি করেছেন তাতে কন্ট্রোলার যুক্ত / সংযুক্ত না করেন। সুতরাং যদি আপনি নিম্নলিখিত বাক্য angular.module('myApp').controller('ProductCtrl', ['$scope', '$http', function($scope, $http){ //Your ProductCtrl code goes here }]);

— গঠনটি

@ ব্রেন্ডন, কেবল উল্লেখ করে যে কিছু খারাপ অভ্যাস তা কোনও কিছুর চেয়ে ভাল - তবে বেশি নয়। আমাদের বলুন কেন এটি খারাপ অনুশীলন অন্যকে সহায়তা করবে।

— মাওগ বলছেন মনিকা