अलग AngularJS कंट्रोलर फाइल कैसे बनायें?

Question

मेरे पास एक फाइल, नियंत्रकों.जेएस में मेरे सभी अंगुलरजेएस नियंत्रक हैं। यह फ़ाइल इस प्रकार संरचित है:

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

मैं क्या करना चाहूंगा Ctrl1 और Ctrl2 को अलग-अलग फाइलों में डाल दिया गया है। मैं तब अपने index.html में दोनों फ़ाइलों को शामिल करूंगा, लेकिन यह कैसे संरचित होना चाहिए? मैंने ऐसा कुछ करने की कोशिश की और यह वेब ब्राउज़र कंसोल में एक त्रुटि कहती है कि यह मेरे नियंत्रकों को नहीं मिल सकता है। कोई संकेत?

मैंने StackOverflow की खोज की और यह इसी तरह का प्रश्न पाया - हालांकि, यह वाक्यविन्यास कोणीय के शीर्ष पर एक अलग फ्रेमवर्क (कॉफीस्क्रिप्ट) का उपयोग कर रहा है, और इसलिए मैं इसका पालन नहीं कर पाया।

---

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

यदि ओपी ने कॉफीस्क्रिप्ट सिंटैक्स के बारे में भ्रम का संकेत दिया, तो शायद आपके उत्तर में इसका उपयोग नहीं करना सबसे अच्छा होगा?

— एंड्रयू

@Andrew imho भविष्य में मदद करने और समाधान का एक रिकॉर्ड बनाने के लिए जो वास्तव में है, वह सभी के बारे में है, न कि विजातीय q और a।

— Fresheyeball

@RuslanIsmagilov आपका appCtrlवैश्विक है window.appCtrl। यह एक अच्छा अभ्यास नहीं है।

— Fresheyeball

@Fresheyeball, इस दृष्टिकोण की समस्या यह है कि index.html में आयात का क्रम महत्वपूर्ण है, अन्यथा, कोणीय त्रुटि।

— डीऑक्सीज़िया

@hendryau, अच्छी तरह से मैं ओपी में मौजूद मॉड्यूल नाम के साथ काम कर रहा था। उन्होंने कहा कि कुछ को लगता है कि इसका बेहतर संगठनात्मक रूप से केंद्रीय ऐप मॉड्यूल के बजाय कई नाम-स्थान वाले मॉड्यूल हैं।

— Fresheyeball

Answer 2

अंत में एक सरणी के साथ angular.module एपीआई का उपयोग करना एक नया मॉड्यूल बनाने के लिए कोणीय बताएगा:

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 = angular.module ('डेमो', ['ngRoute', 'ngCookies', 'ui.bootstrap', 'nvd3ChartDirectives', 'ui-rangeSlider', 'textAngular', 'angularTreeview')];

— विपिन

@vipin जैसा आपने टाइप किया है, लेकिन सुनिश्चित करें कि यह किसी भी कंट्रोलर, सेवाओं आदि से ऊपर है। तकनीकी रूप से आपको var myapp = घोषित करने की आवश्यकता नहीं है ...; क्योंकि कोणीय इसे आपके लिए संग्रहीत करेगा।

— जिमी एयू

@JimmyAu Ctrl1.js और Ctrl2.js कहां से लोड किए गए हैं ताकि पृष्ठ इसका उपयोग कर सके? मेरे पास myApp.js को कोणीय के ठीक बाद लोड किया गया है, लेकिन पेज नियंत्रकों को नहीं पा सकता है। क्या मुझे स्पष्ट रूप से उन्हें उस दृश्य पर एक स्क्रिप्ट के रूप में जोड़ना होगा जो इसकी आवश्यकता है? या क्या मुझे अभी भी हर पृष्ठ पर प्रत्येक नियंत्रक फ़ाइल को शामिल करना है?

— सिनास्टैटिक

यह स्पष्ट करने के लिए धन्यवाद कि केवल पहली कॉल की आवश्यकता क्यों है []।

— जिम बी।

Answer 3

यद्यपि दोनों उत्तर तकनीकी रूप से सही हैं, मैं इस उत्तर के लिए एक अलग वाक्यविन्यास विकल्प प्रस्तुत करना चाहता हूं। यह इम्हो पढ़ने में आसान बनाता है कि इंजेक्शन के साथ क्या हो रहा है, इसके बीच अंतर करें आदि।

फ़ाइल एक

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

मुझे इस तरह की बहुत सी कोडिंग दिखाई देती हैं। फायदा क्या है? $ इंजेक्शन और एक समारोह अलग होने की।

— अलकसंदार जीसस जीन

मेरा मानना ​​है कि यह कोड को पढ़ना आसान बनाता है। मुझे पता है कि वास्तव में क्या इंजेक्शन लगाया जा रहा है। इसे लाइन-बाय-लाइन आधार पर "चिंताओं को अलग करने" के रूप में सोचें।

— jason328

कोड की तरह इस न केवल अधिक पठनीय कोड पैदा करता है, ज्यादा डिबग करने के लिए आसान है, और नेस्टेड कॉलबैक कोड की राशि (देखें कम कर देता है github.com/johnpapa/angular-styleguide/blob/master/a1/... )

— rfornal

अगर मैं इस 1000 बार +1 करता तो मैं कर सकता था - ब्रावो!

— दान चेस २ Dan ’

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

Google के पास कोणीय ऐप संरचना के लिए एक सर्वोत्तम अभ्यास सिफारिशें भी हैं जिन्हें मैं वास्तव में संदर्भ के आधार पर समूह बनाना चाहता हूं। सभी HTML एक फ़ोल्डर में नहीं है, लेकिन उदाहरण के लिए लॉगिन (html, css, app.js, कंट्रोलर.जेएस और इतने पर) के लिए सभी फाइलें। इसलिए यदि मैं एक मॉड्यूल पर काम करता हूं, तो सभी निर्देशों को ढूंढना आसान है।

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

मैं इस कोड का उपयोग करता हूं, लेकिन फिर भी अपने नियंत्रक को लोड नहीं कर सकता? यह त्रुटि फेंक: त्रुटि: [एनजी: areq] तर्क 'ProductCtrl' एक फ़ंक्शन नहीं है, अपरिभाषित हो गया।

— QViet

यह वास्तव में बुरा अभ्यास है

— ब्रेंडन

@ किम जोंग उन आपको उस त्रुटि को देखेंगे, यदि आपने नियंत्रक को आपके द्वारा बनाए गए मॉड्यूल से नहीं जोड़ा है। तो यह काम करेगा अगर आप निम्नलिखित वाक्यविन्यास का उपयोग करते हैं:angular.module('myApp').controller('ProductCtrl', ['$scope', '$http', function($scope, $http){ //Your ProductCtrl code goes here }]);

— Devner

@ ब्रेंडन, केवल यह कहते हुए कि कुछ बुरा अभ्यास है, कुछ नहीं से बेहतर है - लेकिन ज्यादा नहीं। हमें बताएं कि यह बुरा अभ्यास क्यों दूसरों की मदद करेगा।

— मावग का कहना है कि