Bagaimana untuk menulis hello world menggunakan JavaScript AngularJS library

Bagaimana untuk menulis hello world menggunakan JavaScript AngularJS library_AngularJS

WBOY

Lepaskan： 2016-05-16 15:53:26

asal

1155 orang telah melayarinya

Artikel ini menunjukkan contoh kod hello world yang dilaksanakan oleh rangka kerja AngularJS.

Berikut ialah beberapa aspek yang perlu anda fokuskan apabila melihat contoh Hello World dan contoh kod berikut.

arahan ng-app, ng-controller, ng-model
Templat dengan dua pendakap

Langkah 1: Sertakan Javascript Sudut

dalam bahagian

Sertakan kod berikut ke dalam untuk mengimport fail javascript Angularjs Anda boleh menggunakan kaedah penulisan berikut untuk mendapatkan kod terkini daripada pustaka yang diuruskan oleh Google.

<script
src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>

Salin selepas log masuk

Langkah 2: Gunakan arahan ng-app pada elemen Gunakan arahan ng-app pada elemen Secara pilihan, ia boleh ditulis sebagai ia sebagai Elemen html elemen akar aplikasi ini memberi pembangun aplikasi kebebasan untuk memberitahu Angular bahawa keseluruhan halaman html, atau hanya sebahagian daripadanya, harus dianggap sebagai aplikasi Angular

<html ng-app="helloApp">

Salin selepas log masuk

Langkah 3: Gunakan arahan pengawal ng pada elemen

Gunakan arahan pengawal ng pada elemen Dalam kod di bawah, "HelloCtrl" ialah nama pengawal dan boleh dirujuk oleh kod pengawal yang diletakkan dalam elemen

Langkah 4: Gunakan arahan model ng pada elemen input

<body ng-controller="HelloCtrl">

Salin selepas log masuk

Anda boleh menggunakan arahan model-ng untuk mengikat input kepada model.

Langkah 5: Tulis kod templat

<input type="text" name="name" ng-model="name"/>

Salin selepas log masuk

Berikut ialah kod templat yang memaparkan nilai model model bernama "nama".

Langkah 6: Buat kod pengawal dalam

Hello {{name}}! How are you doing today&#63;

Salin selepas log masuk

Buat kod pengawal dalam elemen skrip seperti yang ditunjukkan di bawah, "helloApp" ialah nama modul yang ditakrifkan menggunakan arahan ng-app dalam Buat pengawal dengan nama "HelloCtrl" yang ditakrifkan menggunakan arahan ng-pengawal dalam elemen $scope Objek berkaitan

Sila lihat kod lengkap
di sini

<script>
  var helloApp = angular.module("helloApp", []);
  helloApp.controller("HelloCtrl", function($scope) {
  $scope.name = "Calvin Hobbes";
  });
</script>

Salin selepas log masuk