ฉันไม่ได้เขียนอะไรมานานและฉันรู้สึกว่าฉันไม่รู้ว่าจะเริ่มเขียนอะไร ตอนนี้ฉันควรเขียนอะไรก่อน Angularjs พี่ชายของฉันเรียกมันว่า "พี่ชายของฉัน JS"
1. ดาวน์โหลด
การคัดลอกรหัสมีดังนี้:
官方网址：https://angularjs.org/
CDN：https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js
2. การแนะนำสั้น ๆ เกี่ยวกับการใช้ 1.NG-APP
กำหนดขอบเขตของ AngularJs คุณสามารถใช้ได้ดังนี้
การคัดลอกรหัสมีดังนี้:
<html ng-app>
-
</html>
ปล่อยให้ Angularjs แสดงทั้งหน้าคุณสามารถใช้มันได้
การคัดลอกรหัสมีดังนี้:
<div ng-app = 'myApp'>
-
</div>
เพื่อให้ส่วนหนึ่งของมัน
2. โมเดล NG
NG-Model เมื่อโมเดลข้อมูลของคุณเปลี่ยนไปตัวอย่างเช่น ng-model = 'test' ค่าของการทดสอบนี้มีการเปลี่ยนแปลงค่าของ {{test}} จะเปลี่ยนไปเช่นกันนั่นคือการทดสอบที่เชื่อมต่อกับ Ng-model จะเปลี่ยนไปดังนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app>
<อินพุต ng-model = 'test'> {{test}}
</body>
</html>
3.Angular.module
สิ่งนี้ใช้เป็นหลักในการลงทะเบียนสร้างและดัชนีโมดูล ตัวอย่างเช่นหากเราต้องการลงทะเบียนเป็นบริการเราจำเป็นต้องใช้มันเมื่อเราอ้างถึงดัชนีโมดูล เราต้องใช้มันเมื่อเราอ้างถึงดัชนี
การคัดลอกรหัสมีดังนี้:
Angular.module (ชื่อ, [ต้องการ], [configfn]);
#name ชื่อของโมดูลการค้นหาที่สร้างโดยประเภทสตริง
#ความเข้าใจที่เรียบง่ายคือโมดูลการใช้งานที่คุณต้องรวมเช่นโมดูลการกำหนดเส้นทาง ngroute
#configfn โมดูลฟังก์ชันเสริมฟังก์ชั่นคล้ายกับ module.config
4. เครื่องควบคุม
คอนโทรลเลอร์เป็นตัวควบคุมเมธอด (ชื่อตัวสร้าง); ชื่อคือชื่อของคอนโทรลเลอร์คอนสตรัคเตอร์คือคอนโทรลเลอร์คอนสตรัคเตอร์เราใช้รหัสชิ้นหนึ่งเพื่อแสดงให้เห็น
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', []);
app.controller ('mytest', ฟังก์ชั่น ($ scope) {
$ scope.test = "Hello Word";
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</body>
</html>
5. ค่า
ค่ายังเป็นค่าเมธอด (ชื่อวัตถุ); ชื่อคือชื่อของบริการและวัตถุคือวัตถุอินสแตนซ์เซิร์ฟเวอร์ ในเวลานี้เราสามารถแก้ไขรหัสด้านบนเพื่อแก้ไขได้เช่นนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', [])
.Value ('testValue', 'word');
app.controller ('mytest', ฟังก์ชั่น ($ scope, testValue) {
$ scope.test = "hello"+ testValue;
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</body>
</html>
5. การผลิต
โรงงานยังเป็นวิธีการโรงงาน (ชื่อผู้ให้บริการ Function) ;; ในกรณีที่ชื่อคือชื่อของบริการ ProviderFunction เป็นฟังก์ชั่นที่ใช้ในการสร้างวัตถุเซิร์ฟเวอร์ใหม่ ในเวลานี้เราสามารถแก้ไขรหัสด้านบนเพื่อแก้ไขได้เช่นนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', [])
.Value ('testValue', 'widuu')
.Factory ('TestFactory', function (testValue) {
กลับ{
lable: function () {
ส่งคืน "สิ่งนี้สามารถส่งออก: Hello"+ TestValue;
-
-
-
app.controller ('mytest', ฟังก์ชั่น ($ scope, testValue, testFactory) {
$ scope.test = "hello"+ testValue;
$ scope.output = testFactory.lable ();
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</p>
{{output}}
</body>
</html>
6. ผู้ขับขี่
ผู้ให้บริการยังเป็นผู้ให้บริการวิธีการใน Angular.module ผู้ให้บริการ (ชื่อ, ProviderType); ชื่อคือชื่อของบริการและ ProviderFunction เป็นฟังก์ชั่นที่ใช้ในการสร้างวัตถุเซิร์ฟเวอร์ใหม่ สิ่งนี้คล้ายกับโรงงาน ตอนนี้เรากำลังเขียนใหม่กับผู้ให้บริการ
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', [])
.Value ('testValue', 'widuu')
.Provider ('TestProvider',
การทำงาน(){
this.lable = "สิ่งนี้จะส่งออก: สวัสดี widuu";
นี่. $ get = function () {
คืนสิ่งนี้;
-
-
-
app.controller ('mytest', ฟังก์ชั่น ($ scope, testValue, testProvider) {
$ scope.test = "hello"+ testValue;
$ scope.output = testProvider.Lable;
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</p>
{{output}}
</body>
</html>
7. บริการ
บริการยังเป็นบริการวิธีการ (ชื่อตัวสร้าง); ชื่อคือชื่อของบริการตัวสร้างเป็นตัวสร้างที่จะได้รับการสร้างอินสแตนซ์ สิ่งนี้คล้ายกับโรงงาน ตอนนี้เรากำลังเขียนใหม่ด้วยบริการ
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', [])
.Value ('testValue', 'widuu')
.Service ('TestService',
ฟังก์ชั่น (testValue) {
this.lable = function () {
ส่งคืน "สิ่งนี้จะส่งออก: Hello"+TestValue;
-
-
-
app.controller ('mytest', ฟังก์ชั่น ($ scope, testValue, testService) {
$ scope.test = "hello"+ testValue;
$ scope.output = testService.Lable ();
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</p>
{{output}}
</body>
</html>
8. อย่างต่อเนื่อง
ค่าคงที่ก็เป็นวิธีการที่ค่าคงที่ (ชื่อวัตถุ); ชื่อคือชื่อของค่าคงที่และวัตถุเป็นค่าของค่าคงที่เราสามารถเขียนได้เช่นนี้
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<script src = "angular.min.js" type = "text/javascript"> </script>
<script type = "text/javascript">
var app = angular.module ('myapp', [])
.Value ('testValue', 'widuu')
.Constant ('count', 23)
.Service ('TestService',
ฟังก์ชั่น (testValue, นับ) {
this.lable = function () {
ส่งคืน "สิ่งนี้จะเอาท์พุท: Hello"+TestValue+"อายุคือ"+count;
-
-
-
app.controller ('mytest', ฟังก์ชั่น ($ scope, testValue, testService) {
$ scope.test = "hello"+ testValue;
$ scope.output = testService.Lable ();
-
</script>
<title> Learing argularjs-widuu </title>
</head>
<body ng-app = 'myapp' ng-controller = 'mytest'>
<อินพุต ng-model = 'test'> {{test}}
</p>
{{output}}
</body>
</html>
นั่นคือทั้งหมดวันนี้และดำเนินการต่อในภายหลัง