Dasar -dasar masuk AngularJS

Penulis：Eve Cole Waktu Pembaruan：2025-06-14 16:00:03

Angular

Semua perpustakaan yang digunakan, CDN yang digunakan:

Salinan kode adalah sebagai berikut:

Contoh pengikat data .angular, ini adalah yang paling mendasar, semua cabang dan daun awal sudut dari sini:.

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Hal yang paling kuat tentang sudut adalah pengikatan data

</div>

<div>

app.controller ("bf", function ($ scope) {

$ scope.data = "testData";

// $ scope. $ apply ();

});

</script>

</div>

</body>

</html>

Melalui Angular, tampilkan data yang sesuai dari array;.

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Melalui Angular, tampilkan data yang sesuai dari array;

</div>

<div>

<tyle>

.S{

Warna:#F00;

}

Li {

kursor: pointer;

}

</tyle>

<ul>

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

</li>

</ul>

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

fungsi arrcon ($ scope) {

$ scope.flag = 0;

$ scope.bered = function (i) {

$ scope.flag = i;

};

$ scope.lists = [

{name: "hehe",

Usia: 10},

{

Nama: "xx",

Usia: 20

{

Nama: "YY",

Usia: 2

{

Nama: "JJ",

Umur: 220

}

]

};

</script>

</div>

</body>

</html>

Demo filter data:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Filter data;

</div>

<br>

</div>

filter fungsi ($ scope) {

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

};

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

return function (pt) {

return pt.replace (/(/w)/g, function ($ 0, $ 1) {

return ""+$ 1.tuppercase ();

});

}

});

</script>

</div>

</body>

</html>

. Pabrik Aktor, $ penyedia, layanan, dll. Semuanya sama. Jangan merasa itu sulit. Bahkan, itu hanya untuk melihat model atau instance data;:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Pabrik dalam sudut setara dengan metode instance umum, yang dapat dipahami sebagai fungsi yang dapat digunakan oleh beberapa pengontrol;

</div>

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

kembali {

"Noting": "json"

};

});

app.controller ("factory", function ($ scope, ff) {

$ scope.json = ff;

});

</script>

</div>

<div>

arahan sudut;

</div>

<div>

<Heh> apakah kamu puas? </heh>

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

kembali {

Batasi: "AE",

Ganti: Benar,

Transclude: Benar,

Template: '<div> <tombol ng-transclude> </button> </div>'

};

})

</script>

</div>

</body>

</html>

Penggunaan .ng-switch directive (saya benar-benar ingin template ini, yang merupakan sudut klik umum kami untuk menyembunyikan dan menampilkan plug-in tab pertama) ::

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Penggunaan Ng-Switch

</div>

<li ng-switch-default> lainnya </li>

</ul>

</div>

<div>

</div>

app.controller ("sw", function ($ scope) {

});

</script>

</div>

</body>

</html>

NG-SRC dan NG-HREF;

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Penggunaan NG-SRC dan NG-HREF (jika Anda menggunakan SRC atau HREF, HTML akan dimuat saat menginisialisasi, yang jelas tidak mungkin)

</div>

</a>

</div>

app.controller ("srccon", function ($ scope) {

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

});

</script>

</div>

</body>

</html>

Cara mengoperasikan gaya halaman, cukup ubah model data terikat secara langsung:

Salinan kode adalah sebagai berikut:

<div>

Angular beroperasi pada gaya; (JQ adalah untuk secara manual memilih elemen untuk beroperasi pada gaya elemen. Angular memberikan metode yang lebih banyak untuk menetapkan atribut elemen ke variabel, Anda hanya perlu mengubah variabel ini)

</div>

<div>

hehe-o (^^) o wow;

</hehe>

</div>

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

function compile () {

};

kembali {

Link: function ($ scope, $ element) {

var obj = angular.element ($ elemen);

//obj.find tidak mudah digunakan;

var add = obj [0] .geteLementsByClassName ("add") [0];

var reduksi = obj [0] .getElementsbyclassName ("reduping") [0];

angular.element (add) .bind ("klik", function () {

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

menerapkan();

})

angular.element (redukir) .bind ("klik", function () {

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

menerapkan();

});

fungsi apply () {

$ scope. $ apply ();

}

kembalikan kompilasi;

controller: function ($ scope) {

$ scope.w = 200;

$ scope.h = 50;

// $ scope. $ apply ();

Batasi: 'AE',

Ganti: Benar,

Lingkup: "= NG-style",

Transclude: Benar,

Template: '<div> <v Ng-Transclude> </div> <button>+</button> <button>-</button> </div>'

}

})

</script>

</div>

Bagaimana cara menggunakan template dalam sudut? Ini perlu digunakan dengan router:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Menggunakan template

</div>

<! --- Jenis ini harus dinyatakan secara akurat->

</script>

<! --- tpl adalah nilai tetap, bukan variabel, dan variabel harus didefinisikan dalam ruang lingkup --->

<div>

</div>

app.controller ("ngtpl", function ($ scope) {

fungsi hehe (str) {

str = _.shuffle (str);

return str.join ("")

};

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

$ scope.chan = function () {

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

};

});

</script>

</div>

</body>

</html>

Cara menggunakan $ scope. $ Watch untuk mengubah template antarmuka mengikat secara real time:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

<span> Pembaruan </span> Pembaruan data pemberitahuan sudut dalam tiga cara $ scope. $ digest (), $ scope. $ apply (), dan pembaruan melalui $ scope. $ watch listening;

</div>

<div>

Nilai yang ditetapkan oleh $ scope. $ watch == >> {{wat}}

</div>

<br>

menerapkan;

</tombol>

</div>

app.controller ("apply", function ($ scope) {

$ scope.hehe = "lll________xxx";

$ scope.m0 = 1;

ss = $ scope;

$ scope.up = function () {

$ scope.hehe = $ scope.m0;

// Ya, tetapi kesalahan dilaporkan ketika prompt diberikan. Siapa yang tahu kenapa?

// $ scope. $ apply ();

$ scope. $ digest ();

};

// Berikan variabel $ scope.m0 menjadi tidak valid;

$ scope. $ watch ("m0", function (va) {

$ scope.wat = va;

})

});

</script>

</div>

</body>

</html>

Metode Alat yang Anda definisikan dalam Angular

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Daftar Metode Alat dalam Angular

</div>

<div>

<ul>

<Li Role = "Presentasi"> <a href = "###"> Angular.Bind </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.Bootstrap </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.Copy </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.element </a> </li>

<li role = "presentasi"> <a href = "###"> Angular.Equals </a> </li>

<li role = "presentasi"> <a href = "###"> Angular.Extend </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.foreach </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.Fromjson </a> </li>

<li role = "presentasi"> <a href = "###"> Angular.Identity </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.Injector </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isArray </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isdate </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isdefined </a> </li>

<li role = "presentasi"> <a href = "###"> Angular.iselement </a> </li>

<Li Role = "Presentation"> <a href = "###"> Angular.ISFUNTION </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isnumber </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isObject </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.isstring </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.Isundefined </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.LowerCase </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.module </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.noop </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.ReloadWithDebuginfo </a> </li>

<Li Role = "Presentasi"> <a href = "###"> Angular.toJson </a> </li>

<li role = "presentasi"> <a href = "###"> Angular.uppercase </a> </li>

</ul>

<div>

Alat dan metode ini mirip dengan perpustakaan lain;

Angular.Element adalah JQ kecil untuk elemen pemilihan Anguarlite;

<br>

Angular.module adalah metode elemen modul;

</div>

</body>

</html>

Penggunaan NG-Transclude (ini adalah kasus resmi), kodenya adalah sebagai berikut:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Penggunaan NG-Transclude (ini adalah kasus resmi):

</div>

<div>

</div>

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

kembali {

Batasi: 'e',

Transclude: Benar,

Lingkup: {title: '@'},

Template: '<Div style = "Border: 1px solid black;">' +

'<div style = "latar belakang-color: grey"> {{title}} </div>' +

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

'</div>'

};

})

.controller ('exampleController', ['$ scope', function ($ scope) {

$ scope.title = 'lorem ipsum';

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

}]);

</script>

</div>

</body>

</html>

Berikut adalah contoh memverifikasi keakuratan kotak surat:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

Ngpaste, ngmouseup, ngkeyup, ngmodeloptions, dll., Lihat penggunaan resmi, cukup gunakan API cek, (pejabat membutuhkan FQ;)

</div>

Jika Anda tidak menggunakan komponen NG-Message, prompt kesalahan adalah sebagai berikut;

<div>

<Label untuk = "EmailAddress"> Masukkan alamat email Anda: </label>

<!-Barang ini terlalu rumit->

Anda lupa memasukkan alamat email Anda ...

</div>

<Div ng-if = "! UserForm.emailAddress. $ error.required &&

userform.emailaddress. $ error.email ">

Anda tidak memasukkan alamat email Anda dengan benar ...

</div>

</form>

<br>

<a href = "https://yearofmoo.github.io/ngmessages/"> demo yang ditulis oleh orang asing </a>

</div>

app.controller ("fromVaild", function ($ scope) {

//$scope.myfield.$error = {MinLength: true, wajib: false};

})

</script>

</div>

</body>

</html>

SetTimeout dan SetInterval keduanya dibungkus dengan sudut, dan mengembalikan instance dari objek yang tertunda:

Salinan kode adalah sebagai berikut:

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

<head>

<title> Angular </iteme>

</head>

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

</script>

<div>

$ timeout dan $ interval, dua layanan ini;

</div>

<div>

<h4> setInterval </h4>

<p>

$ interval (fn, keterlambatan, [hitung], [InvokeApply]);

</p>

</a>

<h4> batas waktu </h4>

<p>

$ timeout (fn, [delay], [InvokeApply]);

</p>

</a>

</div>

<div>

</div>

awal

</tombol>

</div>

app.controller ("st", function ($ scope, $ element, $ interval) {

var $ el = $ ($ elemen [0]). find (". progress-bar");

console.log (argumen);

// Gunakan elemen yang dipilih oleh Angular.Element untuk menemukan sesuatu tanpa menemukan;

$ 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>