cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang modul dalam AngularJS_AngularJS

Penjelasan terperinci tentang modul dalam AngularJS_AngularJS

WBOY
WBOYasal
2016-05-16 16:17:16931semak imbas

Sebelum bercakap tentang modul angularjs, mari kita mula-mula memperkenalkan beberapa titik pengetahuan sudut:

AngularJS ialah teknologi sisi pelanggan tulen, ditulis sepenuhnya dalam Javascript. Ia menggunakan teknologi konvensional untuk pembangunan web (HTML, CSS, Javascript) untuk menjadikan pembangunan aplikasi web lebih pantas dan mudah.

Cara penting AngularJS memudahkan pembangunan aplikasi adalah dengan membungkus beberapa operasi pembangunan peringkat rendah biasa dan menyediakannya kepada pembangun. AngularJS secara automatik akan mengendalikan operasi peringkat rendah ini. Ia termasuk:

Kendalian 1.DOM
2. Sediakan pemantauan acara
3. Pengesahan input, kerana AngularJS akan mengendalikan kebanyakan operasi ini, pembangun boleh lebih menumpukan pada logik perniagaan aplikasi dan kurang menulis kod berulang, mudah ralat dan tahap rendah.

Walaupun AngularJS memudahkan pembangunan, ia juga membawa beberapa teknologi hebat kepada pelanggan, termasuk:

1. Pemisahan data, logik perniagaan dan pandangan
2. Pengikatan automatik data dan pandangan
3. Perkhidmatan am
4. Suntikan kebergantungan (terutamanya digunakan untuk perkhidmatan pengagregatan)
5. Pengkompil HTML yang boleh diperluaskan (ditulis sepenuhnya dalam JavaScript)
6. Mudah diuji
7. Permintaan pelanggan terhadap teknologi ini sebenarnya telah wujud sejak sekian lama.

Pada masa yang sama, anda juga boleh menggunakan AngularJS untuk membangunkan aplikasi satu halaman atau berbilang halaman, tetapi ia digunakan terutamanya untuk membangunkan aplikasi satu halaman. AngularJS menyokong operasi sejarah penyemak imbas, butang ke hadapan dan ke belakang, dan operasi pengumpulan dalam aplikasi satu halaman.

Seterusnya, mari jelaskan modul angularJS secara terperinci.

Kebanyakan aplikasi mempunyai kaedah utama yang digunakan untuk membuat seketika, menyusun dan memulakan aplikasi. Aplikasi AngularJS tidak mempunyai kaedah utama, sebaliknya menggunakan modul untuk mengisytiharkan cara aplikasi harus dimulakan. Kaedah ini mempunyai kelebihan berikut:

1. Proses permulaan adalah deklaratif, jadi lebih mudah difahami.
2. Tidak perlu memuatkan semua modul dalam ujian unit, jadi kaedah ini berguna untuk menulis ujian unit.
3. Modul tambahan boleh ditambah pada ujian dalam keadaan tertentu Modul ini boleh menukar konfigurasi dan membantu dengan ujian hujung ke hujung.
4. Kod pihak ketiga boleh dibungkus ke dalam modul boleh guna semula.
5. Modul boleh dimuatkan dalam sebarang susunan berurutan atau selari (kerana pelaksanaan modul itu sendiri tertangguh).

Contohnya: 

<!doctype html>
<html ng-app="myApp">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script>
      var myAppModule = angular.module('myApp', []);
　　　　　　// configure the module.
　　　　　　// in this example we will create a greeting filter
　　　　　　myAppModule.filter('greet', function() {
 　　　　　　　　return function(name) {
  　　　　　　　　　　return 'Hello, ' + name + '!';
 　　　　　　　　};
　　　　　　});
  </script>
 </head>
 <body>
  <div>
   {{ 'World' | greet }}
  </div>
 </body>
</html>

Dalam contoh di atas, kami menggunakan modul myApp untuk memulakan aplikasi dengan menyatakannya dalam 8f08cb147f69d67da71d45acc046f462.

Contoh di atas sangat mudah untuk ditulis, tetapi tidak sesuai untuk menggunakan kaedah penulisan yang sama untuk menulis aplikasi yang besar. Kami mengesyorkan agar aplikasi anda dibahagikan kepada modul berikut:

1. Modul perkhidmatan yang digunakan untuk membuat pengisytiharan perkhidmatan.
2. Modul arahan, digunakan untuk mengisytiharkan arahan.
3. Modul penapis, digunakan untuk membuat pengisytiharan penapis.
4. Modul peringkat aplikasi yang bergantung pada modul di atas dan mengandungi kod permulaan.

Contohnya: 

<!doctype html>
<html ng-app="xmpl">
 <head>
  <script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
  <script src="script.js"></script>
 </head>
 <body>
  <div ng-controller="XmplController">
   {{ greeting }}!
  </div>
 </body>
</html>
[/code]

script.js:

[code]
angular.module('xmpl.service', []).   //服务模块
 value('greeter', {    //自定义greeter对象
  salutation: 'Hello',
  localize: function(localization) {
    this.salutation = localization.salutation;
  },
  greet: function(name) {
    return this.salutation + ' ' + name + '!';
  }
 }).
 value('user', {   //自定义user对象
  load: function(name) {
    this.name = name;
  }
 });
angular.module('xmpl.directive', []);  //指令模块
angular.module('xmpl.filter', []);   //过滤器模块
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter']).  //模块xmpl依赖于数组中的模块
 run(function(greeter, user) {
  // 初始化代码，应用启动时，会自动执行
  greeter.localize({
    salutation: 'Bonjour'
  });
  user.load('World');
 })
// A Controller for your app
var XmplController = function($scope, greeter, user) {
   $scope.greeting = greeter.greet(user.name);
}

Sebab pemisahan ini ialah anda sering perlu mengabaikan kod permulaan dalam ujian anda kerana kod ini lebih sukar untuk diuji. Dengan memecahkannya, anda boleh mengabaikannya dengan mudah semasa ujian. Ujian juga boleh dibuat lebih khusus dengan memuatkan hanya modul yang berkaitan dengan ujian semasa. Di atas hanyalah cadangan, anda boleh menyesuaikannya mengikut situasi khusus anda.

Modul ialah koleksi konfigurasi dan blok kod yang dilampirkan pada aplikasi semasa fasa permulaan. Modul paling ringkas terdiri daripada dua jenis koleksi blok kod:

Blok kod konfigurasi - dilaksanakan semasa suntikan pembekal suntikan dan fasa konfigurasi. Hanya pembekal suntikan dan pemalar boleh disuntik ke dalam blok konfigurasi. Ini adalah untuk mengelakkan perkhidmatan daripada dimulakan lebih awal sebelum ia dikonfigurasikan.
Jalankan blok kod - dilaksanakan selepas penyuntik dicipta dan digunakan untuk memulakan aplikasi. Hanya contoh dan pemalar boleh disuntik ke dalam blok larian. Ini adalah untuk mengelakkan konfigurasi sistem daripada berlaku selepas berjalan.

Pelaksanaan kod: 

angular.module('myModule', []).  
　　config(function(injectables) { // provider-injector      配置代码块
　　　　// This is an example of config block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject Providers (not instances)
　　　　// into the config blocks.
　　}). run(function(injectables) { // instance-injector      运行代码块
　　　　// This is an example of a run block.
　　　　// You can have as many of these as you want.
　　　　// You can only inject instances (not Providers)
　　　　// into the run blocks
　　});

Modul juga mempunyai beberapa kaedah yang mudah untuk konfigurasi, menggunakannya adalah bersamaan dengan menggunakan blok kod. Contohnya: 

angular.module('myModule', []).
 value('a', 123).
 factory('a', function() { return 123; }).
 directive('directiveName', ...).
 filter('filterName', ...);
// is same as
angular.module('myModule', []).
 config(function($provide, $compileProvider, $filterProvider) {
  $provide.value('a', 123)
  $provide.factory('a', function() { return 123; })
  $compileProvider.directive('directiveName', ...).
  $filterProvider.register('filterName', ...);
 });

Blok konfigurasi akan digunakan dalam susunan pendaftaran $provide, $compileProvider, $filterProvider. Satu-satunya pengecualian ialah definisi pemalar, yang harus sentiasa diletakkan pada permulaan blok konfigurasi.

Blok larian ialah perkara yang paling seperti kaedah utama dalam AngularJS. Blok larian ialah sekeping kod yang digunakan untuk memulakan aplikasi. Ia dilaksanakan selepas semua perkhidmatan telah dikonfigurasikan dan semua penyuntik telah dibuat. Blok jalankan selalunya mengandungi kod yang sukar untuk diuji, jadi ia harus ditulis dalam modul berasingan supaya ia boleh diabaikan semasa ujian unit.

Sesuatu modul boleh menyenaraikan modul lain sebagai kebergantungannya. "Bergantung pada modul" bermakna modul bergantung perlu dimuatkan sebelum modul ini. Dalam erti kata lain, blok konfigurasi modul bergantung akan dilaksanakan sebelum blok konfigurasi modul ini. Perkara yang sama berlaku untuk blok larian. Mana-mana modul hanya boleh dimuatkan sekali, walaupun ia bergantung kepada berbilang modul.

Modul ialah kaedah yang digunakan untuk mengurus konfigurasi $injector dan tiada kaitan dengan pemuatan skrip. Terdapat banyak perpustakaan di Internet yang mengawal pemuatan modul, dan ia boleh digunakan dengan AngularJS. Kerana modul tidak melakukan apa-apa semasa pemuatan, ia boleh dimuatkan dalam sebarang susunan atau selari

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Pengenalan kepada sudut dan pengenalan kepada ciri-cirinya_AngularJSArtikel seterusnya：Pengenalan kepada sudut dan pengenalan kepada ciri-cirinya_AngularJS

Artikel berkaitan

Lihat lagi