javascript $scope - كيفية إنشاء ملفات تحكم AngularJS منفصلة؟




in services (6)

على الرغم من أن كلا الإجابتين صحيحة من الناحية الفنية ، إلا أنني أريد تقديم خيار بناء جملة مختلف لهذه الإجابة. هذا imho يجعل من السهل قراءة ما يجري مع الحقن ، والتفريق بين الخ

الملف الأول

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

لدي كل من وحدات التحكم 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 ، لكن كيف يجب أن يتم هيكلة ذلك؟ حاولت القيام بشيء من هذا القبيل ، وأنه يرمي خطأ في وحدة تحكم مستعرض ويب قائلا أنه لا يمكن العثور على وحدات التحكم الخاصة بي. أي تلميحات؟

لقد بحثت في ووجدت هذا السؤال نفسه - ومع ذلك ، فإن هذه البنية تستخدم إطارًا مختلفًا (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 ولكن قبل أي وحدات تحكم / خدمات / إلخ ... وإلا فلن يكون الزاوي قادرا على تهيئة وحدات التحكم الخاصة بك.


ماذا عن هذا الحل؟ الوحدات النمطية ووحدات التحكم في الملفات (في نهاية الصفحة) إنها تعمل مع وحدات تحكم متعددة وتوجيهات وما إلى ذلك:

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 في مجلد واحد ، ولكن على سبيل المثال جميع الملفات لتسجيل الدخول (أتش تي أم أل ، CSS ، app.js ، controller.js وهلم جرا). لذلك إذا كنت أعمل على وحدة نمطية ، فمن الأسهل العثور على جميع التوجيهات.


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

الملف الأول:

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


طريقة أخرى ، في رأيي هي أنظف بكثير ، هي تقديم طلب Ajax متزامن بدلاً من استخدام علامة <script> . وهو أيضًا كيفية Node.js مقابض Node.js

إليك مثال على ذلك باستخدام jQuery:

function require(script) {
    $.ajax({
        url: script,
        dataType: "script",
        async: false,           // <-- This is the key
        success: function () {
            // all good...
        },
        error: function () {
            throw new Error("Could not load script " + script);
        }
    });
}

يمكنك بعد ذلك استخدامه في شفرتك نظرًا لأنك تستخدم عادةً ما يلي:

require("/scripts/subscript.js");

وتكون قادرًا على استدعاء وظيفة من النص المطلوب في السطر التالي:

subscript.doSomethingCool(); 




javascript angularjs controller