javascript - services - filter angularjs




كيفية إنشاء ملفات تحكم AngularJS منفصلة؟ (4)

الملف الأول:

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

لدي كل من وحدات التحكم AngularJS في ملف واحد ، و controllers.js. يتم تنظيم هذا الملف على النحو التالي:

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

ما أريد فعله هو وضع Ctrl1 و Ctrl2 في ملفات منفصلة. بعد ذلك ، سأقوم بتضمين كلا الملفين في ملفي index.html ، لكن كيف يجب أن يتم هيكلة ذلك؟ حاولت القيام بشيء من هذا القبيل ، وأنه يرمي خطأ في وحدة تحكم مستعرض ويب قائلا أنه لا يمكن العثور على وحدات التحكم الخاصة بي. أي تلميحات؟

لقد بحثت في StackOverflow ووجدت هذا السؤال نفسه - ومع ذلك ، فإن هذه البنية تستخدم إطارًا مختلفًا (CoffeeScript) أعلى Angular ، ولذا لم أتمكن من متابعته.

AngularJS: كيف يمكنني إنشاء وحدات تحكم في ملفات متعددة


سيؤدي استخدام واجهة برمجة التطبيقات angular.module مع مصفوفة في النهاية إلى توضيح زاوية لإنشاء وحدة نمطية جديدة:

myApp.js

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

استخدامه بدون المصفوفة هو في الواقع وظيفة getter. لذا ، لفصل وحدات التحكم الخاصة بك ، يمكنك القيام بما يلي:

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 ولكن قبل أي وحدات تحكم / خدمات / إلخ ... وإلا فلن يكون الزاوي قادرا على تهيئة وحدات التحكم الخاصة بك.


للإيجاز ، إليك نموذج 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)

ليس رشيقا ، ولكن بسيطة جدا في حل التنفيذ - باستخدام المتغير العالمي.

في الملف "الأول":


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

في "الثانية" ، "الثالثة" ، إلخ:


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




controller