Struktur projek lengkap nota kajian angularjs_AngularJS

Penjelasan utama hari ini termasuk perkara-perkara berikut: 1. Menunjukkan struktur projek yang lengkap 2. Maksud $skop 3. Modularisasi dan suntikan kebergantungan.

1. Tunjukkan struktur projek yang lengkap.

Semua kod di bawah dihasilkan semula daripada guru @大 desertqiongqiu. Saya mencetak semula dan meletakkannya di github Anda boleh pergi ke pautan ini untuk melihat kod sumber. Tonton dan belajar pada masa yang sama, kesan terbaik~~~~

Sekarang mari kita lihat tangkapan skrin ini,

Ini ialah struktur direktori yang perlu ada pada projek angularjs yang lengkap. Biar saya terangkan di bawah maksud setiap folder.

1.css: Tidak perlu dikatakan, letak sahaja beberapa fail gaya css.

2. Rangka Kerja: Berikut biasanya beberapa rangka kerja bahagian hadapan (UI) yang diperlukan oleh pihak ketiga selain angularjs, seperti bootstrap, ueditor, dsb.

3.imgs: Tidak perlu dikatakan, letakkan fail imej.

　4.index.html: Fail utama Sudah tentu, jika terdapat banyak fail projek, anda juga boleh membuat folder berasingan untuk menyimpan halaman.

5.js: Tidak perlu dikatakan, letakkan fail js anda sendiri yang baru dibuat.

6.tls: Nama penuh ialah templat, yang bermaksud templat. Apa yang diletakkan di dalam adalah sebahagian daripada kod html. Digunakan bersama dengan atribut templateUrl dalam arahan arahan angualrjs.

Mari kita lihat cara menggunakan tpls: Terdapat fail test.html di bawah folder tpls di sini, kodnya adalah seperti berikut:

<ul>
  <li>
    第一行test
  </li>
  <li>
    第二行test
  </li><li>
    第三行test
  </li>
</ul>

Kami juga mengatakan di atas bahawa fail di sini hanyalah sebahagian daripada html, sebagai contoh, ini hanyalah sebahagian daripada kod ul. Kemudian ada yang keliru, apa guna tulisan seperti ini, bagaimana saya harus menggunakannya? Jangan risau, biar saya beritahu anda cara menggunakannya:

Sebenarnya, kami menyebutnya dalam kelas terakhir Bagi mereka yang tidak tahu, klik di sini Anda boleh melihat perkara ketiga, kaedah arahan yang saya nyatakan. Maksudnya ialah mentakrifkan teg html, dan kemudian kandungan html yang dikembalikan adalah bahagian ul di sini.

Mari lihat kod penggunaan khusus:

var appModule = angular.module('app', []); //app是html中ng-app指令的名称

 appModule.directive('hello', function() { //定义一个指令，名称叫hello
   return {
     restrict: 'E',
     //template: '<div>Hi there</div>',
     templateUrl:'/tpls/test.html',
     replace: true
   };
 });

Penjelasan kod di atas: Ia mentakrifkan teg helo Apabila menggunakan teg ini, kandungan test.html dikembalikan (sama ada templat atau templatUrl boleh digunakan).

Mengapa kita harus meletakkan kandungan ul di atas ke dalam folder yang berasingan? Adakah anda faham sekarang? ? Sebabnya ialah apabila terdapat banyak kandungan yang dikembalikan, hanya gunakan pautan terus untuk membuat kod kelihatan jelas.

2. Lihat beberapa $skop.

Mari lihat gambar di bawah untuk menerangkan beberapa skop dan cirinya secara mendalam:

Mari kita lihat kod di atas: Pertama, kita mentakrifkan pengawal yang dipanggil HelloCtrl, yang menambahkan ucapan atribut kepada $scope Atribut ucapan ialah objek, dan atribut teks ditambah dengan nilai 'Hello'. Semudah itu. Kemudian anda boleh terus menghubungi greeting.text dalam halaman untuk mendapatkan nilai 'Hello'. Bukankah ia menakjubkan? Jadi apakah sebenarnya $scope? Mengapakah fungsi-fungsi ini boleh dicapai? Berikut adalah ciri-cirinya selepas membacanya, anda mesti mempunyai pemahaman tertentu.

1.$skop ialah skop, yang juga boleh difahami sebagai objek.

　2.$scope menyediakan beberapa alatan dan kaedah, seperti $watch() dan $apply(), dsb.

　3.$skop juga merupakan persekitaran pelaksanaan (skop).

　4. Anak $skop boleh mewarisi sifat dan kaedah ibu bapa $skop.

5. Setiap aplikasi Sudut hanya mempunyai satu $scope ($rootscope, terletak dalam ng-app).

3. Modularisasi dan suntikan kebergantungan

Lihat kod berikut yang mentakrifkan pengawal:

var myApp = angular.module('angularApp', []);

myApp.controller('HelloCtrl', ['$scope',function($scope) {
    $scope.greeting = {
      text: 'Hello'
    };
  }
]);
myApp.controller('ByeCtrl', ['$scope',function($scope) {
    //.....
  }
]);

Adakah anda masih ingat definisi pengawal yang dijelaskan pada mulanya? Gunakan kaedah funciton name(){} secara langsung. Perlahan-lahan kami mendapati bahawa jika terdapat terlalu banyak pengawal, ia akan menjadi sukar untuk diuruskan Untuk merealisasikan pemodulatan angualrjs, kami perlu menukar kepada kaedah penulisan di atas, dan kemudian saya akan menerangkan kepada anda maksud kod ini.

Baris 1: Mula-mula dapatkan nama modul keseluruhan halaman 'myApp',,, angularApp ialah nilai ng-app dalam HTML .

Baris 3: Tentukan pengawal bernama 'HelloCtrl';

Baris 9 adalah sama seperti di atas.

Dengan cara ini, kami telah mencapai modulariti secara tidak sedar! ! !

Di sini kami hanya memanggil kaedah pengawal, dan arahan, penapis dan kaedah lain yang disebut dalam bahagian pertama semuanya harus dipanggil pada myApp untuk mencapai fungsi tindak balas. Kemudian gunakan berbilang modul untuk menyelesaikan projek, dan kami telah mencapai suntikan pergantungan! !

OK, di atas adalah arahan untuk menggunakan tiga modul utama ini. Saya harap ia akan membantu kajian semua orang. . . Jika ada apa-apa yang anda tidak faham tentang nota di atas, tanya saya dan saya pasti akan menjawabnya untuk anda. Saya doakan anda semua hidup bahagia!