Saya sudah lama tidak menulis apa pun, dan saya merasa tidak tahu di mana harus mulai menulis sesuatu. Sekarang saya lebih baik menulis sesuatu yang teknis dulu. Angularjs, saudaraku menyebutnya "saudaraku js"
1. Unduh
Salinan kode adalah sebagai berikut:
官方网址：https://angularjs.org/
CDN：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2. Pengantar singkat untuk menggunakan 1.NG-App
Menentukan ruang lingkup AngularJS, Anda dapat menggunakannya sebagai berikut
Salinan kode adalah sebagai berikut:
<html ng-app>
...
</html>
Biarkan AngularJS membuat seluruh halaman, Anda juga dapat menggunakannya
Salinan kode adalah sebagai berikut:
<Div ng-app = 'myapp'>
...
</div>
untuk membuat sebagian dari itu.
2.NG-model
NG-Model, Ketika model data Anda diubah, misalnya ng-model = 'test', nilai tes ini diubah, nilai {{test}} juga akan berubah, yaitu, tes yang terhubung ke NG-model juga akan berubah, sebagai berikut
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<title> Learning Argularjs-Widuu </title>
</head>
<Body ng-app>
<input ng-model = 'test'> {{test}}
</body>
</html>
3.angular.module
Ini terutama digunakan untuk mendaftar, membuat dan mengindeks modul. Misalnya, jika kita ingin mendaftarkan ini sebagai layanan, kita perlu menggunakannya ketika kita merujuk untuk mengindeks modul. Kita juga perlu menggunakannya saat kita merujuk ke indeks.
Salinan kode adalah sebagai berikut:
angular.module (name, [membutuhkan], [configFn]);
#name nama modul pencarian yang dibuat oleh tipe string
#equires Pemahaman sederhana adalah modul penggunaan yang perlu Anda sertakan, seperti Modul Routing NGROUTE
#configfn Modul fungsi opsional, fungsinya mirip dengan Module.config
4.Controller
pengontrol adalah pengontrol metode (nama, konstruktor); Di mana nama adalah nama controller, konstruktor adalah konstruktor pengontrol, kami menggunakan sepotong kode untuk diilustrasikan
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', []);
app.controller ('mytest', function ($ scope) {
$ scope.test = "hello word";
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</body>
</html>
5. Nilai
Nilai juga merupakan nilai metode (nama, objek); Di mana nama adalah nama layanan dan objek adalah objek instance server. Saat ini, kita dapat memodifikasi kode di atas untuk diperbaiki seperti ini
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', [])
.value ('testValue', 'word');
app.controller ('mytest', function ($ scope, testValue) {
$ scope.test = "hello"+ testValue;
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</body>
</html>
5.Factory
Pabrik juga merupakan metode pabrik (nama, penyedia fungsi) ;; Di mana nama adalah nama Layanan, ProviderFunction adalah fungsi yang digunakan untuk membuat objek server baru. Saat ini, kita dapat memodifikasi kode di atas untuk diperbaiki seperti ini
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', [])
.value ('testValue', 'widuu')
.factory ('testfactory', function (testValue) {
kembali{
lable: function () {
return "Ini output: Halo"+ testValue;
}
}
});
app.controller ('mytest', function ($ scope, testValue, testfactory) {
$ scope.test = "hello"+ testValue;
$ scope.output = testfactory.lable ();
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</p>
{{keluaran}}
</body>
</html>
6. penyangga
Penyedia juga merupakan penyedia metode dalam penyedia Angular.module (Nama, ProviderType); Di mana nama adalah nama Layanan, dan ProviderFunction adalah fungsi yang digunakan untuk membuat objek server baru. Ini mirip dengan pabrik. Kami sekarang menulis ulang dengan penyedia.
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', [])
.value ('testValue', 'widuu')
.provider ('testprovider',
fungsi(){
this.lable = "Ini akan output: halo widuu";
ini. $ get = function () {
kembalikan ini;
}
}
);
app.controller ('mytest', function ($ scope, testValue, testprovider) {
$ scope.test = "hello"+ testValue;
$ scope.output = testprovider.lable;
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</p>
{{keluaran}}
</body>
</html>
7.Slervice
Layanan juga merupakan layanan metode (nama, konstruktor); Di mana nama adalah nama layanan, konstruktor adalah konstruktor yang akan dipakai. Ini mirip dengan pabrik. Kami sekarang menulis ulang dengan layanan
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', [])
.value ('testValue', 'widuu')
.service ('testservice',
fungsi (testValue) {
this.lable = function () {
kembalikan "Ini akan output: halo"+testValue;
}
}
);
app.controller ('mytest', function ($ scope, testValue, testservice) {
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable ();
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</p>
{{keluaran}}
</body>
</html>
8. konstan
Konstanta juga merupakan metode konstan (nama, objek); Di mana nama adalah nama konstan, dan objek adalah nilai konstan, kita dapat menulisnya seperti ini
Salinan kode adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<skrip src = "angular.min.js" type = "text/javascript"> </script>
<type skrip = "Teks/JavaScript">
var app = angular.module ('myapp', [])
.value ('testValue', 'widuu')
.constant ('Count', 23)
.service ('testservice',
fungsi (testValue, count) {
this.lable = function () {
kembalikan "Ini akan output: halo"+testValue+", usia adalah"+hitung;
}
}
);
app.controller ('mytest', function ($ scope, testValue, testservice) {
$ scope.test = "hello"+ testValue;
$ scope.output = testservice.lable ();
});
</script>
<title> Learning Argularjs-Widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<input ng-model = 'test'> {{test}}
</p>
{{keluaran}}
</body>
</html>
Itu semua hari ini dan terus melakukannya nanti.