Menggunakan keperluan yang memerlukan dalam aplikasi AngularJS

mata teras

memerlukanJS adalah perpustakaan JavaScript yang memudahkan kebergantungan JavaScript memuat dan meningkatkan pemeliharaan asas kod. Ia amat berguna dalam projek besar, kerana kebergantungan pengesanan dalam projek besar boleh mencabar.
sistem suntikan pergantungan Angular dan pengurusan ketergantungan memerlukan fungsi yang berbeza. AngularJS mengendalikan objek yang diperlukan dalam komponen, manakala memerlukan modul atau fail JavaScript.
Komponen AngularJS boleh ditakrifkan sebagai modul yang memerlukan dan boleh dibuang secara manual kerana fail skrip yang diperlukan perlu dimuatkan secara asynchronously.
• Alat seperti
grunt boleh digunakan untuk menggabungkan dan memampatkan modul memerlukan modul untuk penggunaan, dengan itu mengoptimumkan kelajuan muat turun fail skrip. Proses ini boleh automatik dan boleh dikonfigurasi secara berbeza untuk setiap fasa penggunaan.

Salah satu cara paling mudah untuk menulis aplikasi JavaScript yang besar adalah untuk memecah asas kod ke dalam pelbagai fail. Melakukannya dapat meningkatkan pemeliharaan kod anda, tetapi dapat meningkatkan kemungkinan tag skrip yang hilang atau salah dalam dokumen HTML utama. Oleh kerana bilangan fail meningkat, kebergantungan pengesanan menjadi sukar. Masalah ini juga wujud dalam aplikasi AngularJS yang besar. Kami sudah mempunyai banyak alat untuk mengendalikan pemuatan kebergantungan dalam aplikasi kami. Dalam artikel ini, kita akan belajar bagaimana menggunakan memerlukan dengan AngularJS untuk memudahkan kerja pemuatan kebergantungan. Kami juga akan melihat cara menggunakan Grunt untuk menghasilkan fail combo yang mengandungi modul memerlukan.

Pengenalan kepada keperluan memerlukanJS adalah perpustakaan JavaScript yang membantu melambatkan memuatkan ketergantungan JavaScript. Modul ini hanya mengandungi beberapa fail JavaScript yang memerlukan gula sintaks JS. MemerlukanJS melaksanakan modul asynchronous yang ditentukan oleh Commonjs. MemerlukanJS menyediakan API mudah untuk membuat dan modul rujukan. MemerlukanJS memerlukan fail utama yang mengandungi data konfigurasi asas, seperti laluan ke modul dan shims. Coretan kod berikut menunjukkan rangka fail main.js:

Semua modul dalam aplikasi tidak perlu ditentukan dalam bahagian Paths. Modul lain boleh dimuatkan menggunakan laluan relatif mereka. Untuk menentukan modul, kita perlu menggunakan blok menentukan ().

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Modul

mungkin mempunyai beberapa modul yang bergantung. Biasanya, objek dikembalikan pada akhir modul, tetapi ini bukan keperluan wajib.

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

suntikan ketergantungan sudut dan memerlukan pengurusan ketergantungan

Persoalan umum yang saya dengar dari pemaju sudut adalah mengenai perbezaan antara pengurusan ketergantungan Angular dan pengurusan ketergantungan yang memerlukan. Adalah penting untuk diingat bahawa tujuan kedua -dua perpustakaan ini sama sekali berbeza. Suntikan ketergantungan terbina dalam AngularJS memerlukan objek yang diperlukan dalam komponen pemprosesan sistem; Apabila memerlukanJS cuba memuatkan modul, ia memeriksa semua modul bergantung dan memuatkannya terlebih dahulu. Objek modul yang dimuatkan di -cache dan disediakan apabila modul yang sama diminta semula. Sebaliknya, AngularJS mengekalkan penyuntik yang mengandungi senarai nama dan objek yang sepadan. Apabila komponen dibuat, entri itu ditambah kepada penyuntik dan disediakan apabila objek dirujuk dengan nama berdaftar.

gabungan keperluan dan angularjs

Kod yang boleh dimuat turun dengan artikel ini adalah aplikasi mudah dengan dua halaman. Ia mempunyai kebergantungan luaran berikut:

• memerlukan
• jQuery
• AngularJS
• laluan sudut
• Sumber sudut
• angular ui nggrid

Fail -fail ini hendaklah dimuatkan terus ke halaman dalam pesanan yang disenaraikan di sini. Kami mempunyai lima fail skrip tersuai yang mengandungi kod untuk komponen AngularJS yang diperlukan. Mari lihat bagaimana fail -fail ini ditakrifkan.

Tentukan komponen AngularJS sebagai modul memerlukan

Mana -mana komponen AngularJS mengandungi:

• Definisi fungsi
• Suntikan Ketergantungan
• Daftar dengan modul sudut

Dalam tiga tugas di atas, kami akan melaksanakan dua tugas pertama dalam setiap modul, dan tugas ketiga akan dilakukan dalam modul berasingan yang bertanggungjawab untuk mewujudkan modul AngularJS. Pertama, mari kita tentukan blok konfigurasi. Blok konfigurasi tidak bergantung kepada mana -mana blok lain dan mengembalikan fungsi konfigurasi pada akhir. Walau bagaimanapun, sebelum kita memuatkan modul konfigurasi di dalam modul lain, kita perlu memuat semua yang kita perlukan untuk mengkonfigurasi blok. config.js mengandungi kod berikut:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Sila ambil perhatian bahawa suntikan ketergantungan berada dalam coretan kod di atas. Saya menggunakan $inject untuk menyuntik kebergantungan kerana fungsi konfigurasi yang ditakrifkan di atas adalah fungsi JavaScript biasa. Sebelum menutup modul, kami mengembalikan fungsi konfigurasi supaya ia boleh dihantar ke modul bergantung untuk kegunaan selanjutnya. Kami juga mengambil pendekatan yang sama untuk menentukan apa-apa jenis komponen sudut lain, kerana tidak ada kod khusus komponen dalam fail ini. Coretan kod berikut menunjukkan definisi pengawal:

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

Modul sudut aplikasi bergantung pada setiap modul yang ditakrifkan setakat ini. Fail ini mengambil objek dari semua fail lain dan cangkuknya ke modul AngularJS. Fail ini mungkin atau tidak boleh mengembalikan apa -apa, kerana modul sudut fail ini boleh dirujuk dari mana -mana sahaja menggunakan angular.module(). Blok kod berikut mentakrifkan modul sudut:

require.config({
    map: {
        //映射
    },
    paths: {
        //模块的别名和路径
    },
    shim: {
        //模块及其依赖模块
    }
});

Kerana fail skrip yang diperlukan dimuatkan secara asynchronously, adalah mustahil untuk boot aplikasi sudut menggunakan arahan NG-app. Cara yang betul di sini ialah menggunakan boot manual. Ini mesti dilakukan dalam fail khas yang dipanggil main.js. Ini memerlukan pemuatan fail pertama yang mentakrifkan modul sudut. Kod untuk fail ini ditunjukkan di bawah.

define([
    //依赖项
], function (
    //依赖项对象
) {

    function myModule() {
        //可以使用上面接收到的依赖项对象
    }

    return myModule;
});

Konfigurasi Grunt untuk menggabungkan modul memerlukan

Apabila menggunakan aplikasi JavaScript-heavy, fail skrip harus digabungkan dan dimampatkan untuk mengoptimumkan kelajuan muat turun fail skrip. Alat seperti Grunt boleh mengautomasikan tugas -tugas ini dengan mudah. Ia mentakrifkan banyak tugas, menjadikan sebarang proses penyebaran depan lebih mudah. Ia mempunyai tugas, grunt-contrib-requirejs, untuk menggabungkan modul fail memerlukan dalam urutan yang betul, dan kemudian memampatkan fail hasil. Seperti mana -mana tugas yang lain, ia boleh dikonfigurasikan untuk berkelakuan berbeza untuk setiap peringkat penempatan. Konfigurasi berikut boleh digunakan untuk aplikasi demonstrasi:

define([], function () {
    function config($routeProvider) {
        $routeProvider.when('/home', {templateUrl: 'templates/home.html', controller: 'ideasHomeController'})
            .when('/details/:id', {templateUrl: 'templates/ideaDetails.html', controller: 'ideaDetailsController'})
            .otherwise({redirectTo: '/home'});
    }
    config.$inject = ['$routeProvider'];

    return config;
});

Konfigurasi ini akan menjana fail yang tidak dikompresi apabila berjalan mengerang dengan pilihan dev dan menjana fail termampat apabila menjalankan Grunt dengan pilihan pelepasan.

Kesimpulan

Menguruskan kebergantungan boleh menjadi mencabar apabila saiz permohonan melebihi jumlah fail tertentu. Perpustakaan seperti memerlukanJS menjadikannya lebih mudah untuk menentukan kebergantungan tanpa perlu risau tentang pesanan pemuatan fail. Pengurusan pergantungan menjadi sebahagian daripada aplikasi JavaScript. AngularJS 2.0 akan menyokong AMD dalam terbina dalam.

(bahagian FAQ telah ditinggalkan kerana terlalu lama dan tidak sepadan dengan matlamat asal pseudo.

Atas ialah kandungan terperinci Menggunakan keperluan yang memerlukan dalam aplikasi AngularJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!