พื้นฐานรายการ AngularJS

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-06-14 16:00:03

เชิงมุม

ไลบรารีทั้งหมดที่ใช้ CDNs ใช้:

การคัดลอกรหัสมีดังนี้:

อินสแตนซ์ข้อมูลที่มีผลผูกพันของข้อมูลของ Anangular นี่คือพื้นฐานที่สุดสาขาและใบไม้ทั้งหมดของการเริ่มต้นเชิงมุมจากที่นี่:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

สิ่งที่ทรงพลังที่สุดเกี่ยวกับ Angular คือการเชื่อมโยงข้อมูล

</div>

<div>

app.controller ("bf", ฟังก์ชั่น ($ scope) {

$ scope.data = "testData";

// $ scope. $ appl ();

</script>

</div>

</body>

</html>

ผ่านเชิงมุมแสดงข้อมูลที่สอดคล้องกันของอาร์เรย์;

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

ผ่านเชิงมุมแสดงข้อมูลที่สอดคล้องกันของอาร์เรย์

</div>

<div>

<style>

.S {

สี:#f00;

หลี่ {

เคอร์เซอร์: ตัวชี้;

</style>

<ul>

{{i.name}} ---- {{i.age}}

</li>

</ul>

//angular.module("arr-app ", []);

ฟังก์ชั่น arron ($ scope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

$ scope.lists = [

{ชื่อ: "ฮิฮิ",

อายุ: 10}

ชื่อ: "xx",

อายุ: 20

ชื่อ: "yy",

อายุ: 2

ชื่อ: "JJ",

อายุ: 220

</script>

</div>

</body>

</html>

การสาธิตตัวกรองข้อมูล:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

ตัวกรองข้อมูล

</div>

<br>

</div>

ตัวกรองฟังก์ชั่น ($ scope) {

$ scope.sourcode = "hehe lala dudu oo zz";

app.filter ("up", function () {

ฟังก์ชั่น return (ipt) {

return ipt.replace (/(/w)/g, ฟังก์ชั่น ($ 0, $ 1) {

ส่งคืน ""+$ 1.Touppercase ();

</script>

</div>

</body>

</html>

.Factory Factory, $ ผู้ให้บริการ, ฯลฯ เหมือนกันทั้งหมด อย่ารู้สึกว่ามันยาก อันที่จริงแล้วมันเป็นเพียงการดูรูปแบบข้อมูลหรืออินสแตนซ์

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

โรงงานใน Angular นั้นเทียบเท่ากับวิธีการอินสแตนซ์ทั่วไปซึ่งสามารถเข้าใจได้ว่าเป็นฟังก์ชั่นที่สามารถใช้งานได้โดยตัวควบคุมหลายตัว

</div>

app.factory ("ff", function () {

กลับ {

"สังเกต": "JSON"

app.controller ("โรงงาน", ฟังก์ชั่น ($ scope, ff) {

$ scope.json = ff;

</script>

</div>

<div>

คำสั่งเชิงมุม;

</div>

<div>

<heh> คุณพอใจหรือไม่ </heh>

app.directive ("heh", function () {

กลับ {

จำกัด : "AE",

แทนที่: จริง

transclude: จริง

เทมเพลต: '<div> <ปุ่ม ng-transclude> </putton> </div>'

</script>

</div>

</body>

</html>

การใช้คำสั่ง. ng-switch (ฉันต้องการเทมเพลตนี้ซึ่งเป็นเชิงมุมของการคลิกทั่วไปของเราเพื่อซ่อนและแสดงปลั๊กอินแท็บก่อน) ::

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

การใช้ NG-switch

</div>

</ul>

</div>

<div>

<button ng-click = "A = 1"> ทดสอบ </button>

<button ng-click = "A = 2"> ทดสอบ </button>

<button ng-click = "A = 3"> ทดสอบ </button>

</div>

App.Controller ("SW", ฟังก์ชั่น ($ scope) {

</script>

</div>

</body>

</html>

NG-SRC และ NG-HREF;

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

การใช้ NG-SRC และ NG-HREF (ถ้าคุณใช้ SRC หรือ HREF HTML จะถูกโหลดเมื่อเริ่มต้นมันซึ่งเป็นไปไม่ได้อย่างแน่นอน)

</div>

</a>

</div>

app.controller ("srccon", ฟังก์ชั่น ($ scope) {

$ scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

</script>

</div>

</body>

</html>

วิธีการใช้งานสไตล์หน้าเพียงเปลี่ยนรูปแบบข้อมูลที่ถูกผูกไว้โดยตรง:

การคัดลอกรหัสมีดังนี้:

<div>

Angular ทำงานกับสไตล์; (JQ คือการเลือกองค์ประกอบด้วยตนเองเพื่อใช้งานในรูปแบบองค์ประกอบ Angular ให้วิธีการเพิ่มเติมในการกำหนดแอตทริบิวต์ขององค์ประกอบให้กับตัวแปรคุณเพียงแค่ต้องเปลี่ยนตัวแปรนี้)

</div>

<div>

ฮิฮิ-โอ (^^) โอว้าว;

</hehe>

</div>

app.directive ("hehe", function () {

ฟังก์ชั่นคอมไพล์ () {

กลับ {

ลิงค์: ฟังก์ชั่น ($ scope, $ element) {

var obj = angular.element ($ element);

//obj.find ไม่ใช่เรื่องง่ายที่จะใช้

var add = obj [0] .getElementsByClassName ("เพิ่ม") [0];

var ลด = obj [0] .getElementsByClassName ("ลด") [0];

Angular.element (เพิ่ม). -bind ("คลิก", function () {

$ scope.h = $ scope.h+10;

นำมาใช้();

Angular.element (ลด). -bind ("คลิก", function () {

$ scope.h = $ scope.h-10;

นำมาใช้();

ฟังก์ชั่นใช้งาน () {

$ Scope. $ appl ();

กลับมาคอมไพล์;

คอนโทรลเลอร์: ฟังก์ชั่น ($ scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ appl ();

จำกัด : 'ae',

แทนที่: จริง

ขอบเขต: "= ng-style",

transclude: จริง

เทมเพลต: '<div> <div ng-transclude> </div> <button>+</button> <button>-</button> </div>'

</script>

</div>

วิธีใช้เทมเพลตใน Angular? สิ่งนี้จะต้องใช้กับเราเตอร์:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

ใช้เทมเพลต

</div>

<! --- ประเภทนี้จะต้องประกาศอย่างถูกต้อง->

</script>

<! --- TPL เป็นค่าคงที่ไม่ใช่ตัวแปรและควรกำหนดตัวแปรในขอบเขต --->

<div>

</div>

app.controller ("ngtpl", ฟังก์ชั่น ($ scope) {

ฟังก์ชั่น hehe (str) {

str = _.shuffle (str);

return str.join ("")

$ scope.ver = "var-ver ---hehe";

$ scope.chan = function () {

$ scope.ver = hehe ($ scope.ver);

</script>

</div>

</body>

</html>

วิธีใช้ $ SCOPE. $ ดูเพื่อเปลี่ยนเทมเพลตของอินเทอร์เฟซการเชื่อมโยงแบบเรียลไทม์:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

<span> อัปเดต </span> การอัปเดตข้อมูลการแจ้งเตือนเชิงมุมในสามวิธี $ scope. $ digest (), $ scope. $ appli () และอัปเดตผ่าน $ SCOPE. $ ดูการฟัง;

</div>

<div>

ค่าที่กำหนดโดย $ scope. $ watch == >> {{wat}}

</div>

<br>

<ปุ่ม ng-click = "up ()">

นำมาใช้;

</kout>

</div>

app.controller ("ใช้", ฟังก์ชั่น ($ scope) {

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

SS = $ SCOPE;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// ใช่ แต่มีการรายงานข้อผิดพลาดเมื่อได้รับพรอมต์ ใครจะรู้ว่าทำไม?

// $ scope. $ appl ();

$ SCOPE. $ DIGEST ();

// ให้ตัวแปร $ scope.m0 ไม่ถูกต้อง

$ SCOPE. $ WATCH ("M0", FUNCTION (VA) {

$ scope.wat = va;

</script>

</div>

</body>

</html>

วิธีการเครื่องมือที่คุณกำหนดตัวเองในเชิงมุม

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

รายการวิธีการเครื่องมือในเชิงมุม

</div>

<div>

<ul>

<li role = "การนำเสนอ"> <a href = "###"> angular.bind </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.bootstrap </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.copy </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.element </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.equals </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.extend </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.foreach </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.fromjson </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.identity </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.injector </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isarray </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isdate </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isdefined </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.iselement </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isfunction </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isnumber </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isobject </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isstring </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.isundefined </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.lowercase </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.module </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.noop </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.reloadwithdebuginfo </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.tojson </a> </li>

<li role = "การนำเสนอ"> <a href = "###"> angular.uppercase </a> </li>

</ul>

<div>

เครื่องมือและวิธีการเหล่านี้คล้ายกับห้องสมุดอื่น ๆ

Angular.Element เป็น JQ ขนาดเล็กสำหรับองค์ประกอบการเลือก anguarlite;

<br>

Angular.Module เป็นวิธีการขององค์ประกอบโมดูล

</div>

</body>

</html>

การใช้ NG-Transclude (นี่เป็นกรณีอย่างเป็นทางการ) รหัสมีดังนี้:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

การใช้ ng-transclude (นี่เป็นกรณีอย่างเป็นทางการ):

</div>

<div>

<อินพุต ng-model = "title"> <br>

</div>

app.directive ('Pane', function () {

กลับ {

จำกัด : 'e',

transclude: จริง

ขอบเขต: {title: '@'}

เทมเพลต: '<div style = "border: 1px solid black;">' +

'<div style = "พื้นหลังสี: สีเทา"> {{title}} </div>' +

'<ng-transclude> </ng-transclude>' +

'</div>'

.Controller ('ExampleController', ['$ scope', ฟังก์ชั่น ($ scope) {

$ scope.title = 'lorem ipsum';

$ scope.text = 'nequ porno quisquam est qui dolorem ipsum quia dolor ... ';

</script>

</div>

</body>

</html>

นี่คือตัวอย่างของการตรวจสอบความถูกต้องของกล่องจดหมาย:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

ngpaste, ngmouseup, ngkeyup, ngmodeloptions ฯลฯ อ้างถึงการใช้อย่างเป็นทางการเพียงใช้ Check API (ความต้องการอย่างเป็นทางการ FQ;)

</div>

หากคุณไม่ได้ใช้ส่วนประกอบ NG-message พรอมต์ข้อผิดพลาดมีดังนี้

<div>

<label for = "emailaddress"> ป้อนที่อยู่อีเมลของคุณ: </lable>

<!-สิ่งนี้ซับซ้อนเกินไป->

คุณลืมป้อนที่อยู่อีเมลของคุณ ...

</div>

<div ng-if = "! userform.emailaddress. $ error.resquired &&

userform.emailaddress. $ error.email ">

คุณไม่ได้ป้อนที่อยู่อีเมลของคุณอย่างถูกต้อง ...

</div>

<อินพุต type = "ส่ง" />

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/"> ตัวอย่างที่เขียนโดยชาวต่างชาติ </a>

</div>

app.controller ("fromvaild", ฟังก์ชั่น ($ scope) {

//$scope.myfield.$error = {minlength: จริงจำเป็นต้องใช้: false};

</script>

</div>

</body>

</html>

Settimeout และ SetInterval ถูกห่อหุ้มด้วยเชิงมุมและส่งคืนอินสแตนซ์ของวัตถุที่ล่าช้า:

การคัดลอกรหัสมีดังนี้:

<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"

<head>

<title> Angular </title>

</head>

var app = angular.module ("app", []);

</script>

<div>

$ timeout และ $ Interval, บริการทั้งสองนี้;

</div>

<div>

<H4> setInterval </h4>

<p>

$ Interval (fn, delay, [count], [invokeapply]);

</p>

</a>

<H4> หมดเวลา </h4>

<p>

$ timeout (fn, [ล่าช้า], [invokeapply]);

</p>

</a>

</div>

<div>

</div>

<ปุ่ม ng-click = "prog ()">

เริ่ม

</kout>

</div>

App.Controller ("ST", ฟังก์ชั่น ($ SCOPE, $ Element, $ Interval) {

var $ el = $ ($ element [0]) ค้นหา (". progress-bar");

console.log (อาร์กิวเมนต์);

// ใช้องค์ประกอบที่เลือกโดย Angular.element เพื่อค้นหาบางสิ่งบางอย่างโดยไม่ต้องค้นหา

$ scope.prog = function () {

var df = $ Interval (function () {

var val = parseInt ($ el.html ())+4;

if (val> = 104) $ Interval.cancel (df);

$ el.html (val+"%") .width (val+"%");

}, 100);

console.log (df)

//console.log(aa = $ Interval)

</script>

</div>

</body>

</html>