buka kembali dan tambahkan dependensi ke aplikasi yang sudah di-bootstrap

Question 1

Apakah ada cara untuk memasukkan ketergantungan terlambat ke modul sudut yang sudah di-bootstrap? Inilah yang saya maksud:

Misalnya saya memiliki aplikasi sudut lebar situs, yang didefinisikan sebagai:

// in app.js
var App = angular.module("App", []);

Dan di setiap halaman:

<html ng-app="App">

Nanti, saya membuka kembali aplikasi untuk menambahkan logika berdasarkan kebutuhan halaman saat ini:

// in reports.js
var App = angular.module("App")
App.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

Sekarang, mengatakan bahwa salah satu dari mereka on-demand bit logika juga membutuhkan dependensi mereka sendiri (seperti ngTouch, ngAnimate, ngResource, dll). Bagaimana saya bisa melampirkannya ke Aplikasi dasar? Ini sepertinya tidak berhasil:

// in reports.js
var App = angular.module("App", ['ui.event', 'ngResource']); // <-- raise error when App was already bootstrapped

Saya menyadari bahwa saya dapat melakukan segalanya sebelumnya, yaitu -

// in app.js
var App = angular.module("App", ['ui.event', 'ngResource', 'ngAnimate', ...]);

Atau tentukan sendiri setiap modul, lalu masukkan semuanya ke dalam aplikasi utama ( lihat di sini untuk lebih lanjut ):

// in reports.js
angular.module("Reports", ['ui.event', 'ngResource'])
.controller("ReportsController", ['$scope', function($scope) {
  // .. reports controller code
}])

// in home.js
angular.module("Home", ['ngAnimate'])
.controller("HomeController", ['$scope', '$http', function($scope, $http){
  // ...
}])

// in app.js, loaded last into the page (different for every page that varies in dependencies)
var App = angular.module("App", ['Reports', 'Home'])

Tapi ini akan mengharuskan saya menginisialisasi App setiap saat dengan dependensi halaman saat ini.

Saya lebih suka untuk menyertakan dasar app.jsdi setiap halaman dan hanya memperkenalkan ekstensi yang dibutuhkan untuk setiap halaman ( reports.js, home.js, dll), tanpa harus merevisi bootstrap logika setiap kali saya menambahkan atau menghapus sesuatu.

Adakah cara untuk memperkenalkan dependensi saat Aplikasi sudah di-bootstrap? Apa yang dianggap sebagai cara (atau cara) idiomatik untuk melakukan ini? Saya condong ke solusi yang terakhir, tetapi ingin melihat apakah cara yang saya jelaskan juga dapat dilakukan. Terima kasih.

Question 2

Saya menyelesaikannya seperti ini:

referensi aplikasi lagi:

var app = angular.module('app');

lalu dorong persyaratan baru Anda ke larik persyaratan:

app.requires.push('newDependency');

Question 3

Sederhana ... Dapatkan contoh modul menggunakan getter seperti ini: var app = angular.module ("App");

Kemudian tambahkan ke koleksi "memerlukan" seperti ini: app.requires [app.requires.length] = "ngResource";

Bagaimanapun, ini berhasil untuk saya. SEMOGA BERHASIL!

Question 4

Menurut proposal ini di grup google Angular JS, fungsi ini tidak ada untuk saat ini. Mudah-mudahan tim inti memutuskan untuk menambahkan fungsi ini, bisa menggunakannya sendiri.

Question 5

Jika Anda ingin menambahkan beberapa dependensi sekaligus, Anda dapat meneruskannya dalam push seperti berikut:

<script>
    var app = angular.module('appName');
    app.requires.push('dependencyCtrl1', 'dependencyService1');
</script>

Question 6

Saya menyadari bahwa ini adalah pertanyaan lama, namun, belum ada jawaban yang berfungsi, jadi saya memutuskan untuk membagikan bagaimana saya menyelesaikannya.

Solusinya membutuhkan forking Angular, jadi Anda tidak bisa menggunakan CDN lagi. Namun modifikasinya sangat kecil, jadi saya heran kenapa fitur ini tidak ada di Angular.

Saya mengikuti tautan ke grup google yang disediakan di salah satu jawaban lain untuk pertanyaan ini. Di sana saya menemukan kode berikut, yang memecahkan masalah:

instanceInjector.loadNewModules = function (mods) {
  forEach(loadModules(mods), function(fn) { instanceInjector.invoke(fn || noop); });
};

Ketika saya menambahkan kode ini ke baris 4414 di kode sumber 1.5.0 sudut (di dalam createInjectorfungsi, sebelum return instanceInjector;pernyataan), itu memungkinkan saya untuk menambahkan dependensi setelah bootstrap seperti ini $injector.loadNewModules(['ngCookies']);.

Question 7

Sejak versi 1.6.7 sekarang dimungkinkan untuk memuat modul secara lambat setelah aplikasi di-bootstrap menggunakan $injector.loadNewModules([modules]). Di bawah ini adalah contoh yang diambil dari dokumentasi AngularJS:

app.factory('loadModule', function($injector) {
   return function loadModule(moduleName, bundleUrl) {
     return getScript(bundleUrl).then(function() { $injector.loadNewModules([moduleName]); });
   };
})

Silakan baca dokumentasi lengkap tentang loadNewModules karena ada beberapa masalah di sekitarnya.

Ada juga aplikasi contoh yang sangat bagus dengan omkadiri yang menggunakannya dengan ui-router.