javascript
（一个）AngularJS获取贴纸Hello World
一旦項(xiàng)目使用JQuery原創(chuàng)javascript，最近參加了一個(gè)項(xiàng)目，需要使用AngularJS、RequireJS比較框架，如汰漬。這里寫一些博客，記錄自己的學(xué)習(xí)過程，雖然冠以原來的名字，實(shí)際上都是指一些信息網(wǎng)上。的一些實(shí)踐和理解。再?zèng)]有熟悉AngularJS之前，預(yù)計(jì)也不出什么高質(zhì)量的文章。僅僅能算是學(xué)習(xí)筆記和備忘錄。練習(xí)使用的版本號(hào)是當(dāng)前最新的穩(wěn)定版本號(hào)1.2.25。
演示樣例代碼例如以下：
<!doctype html> <html lang="en" ng-app><head><meta charset="utf-8"><title>Hello,World!</title><script src="angular1.2.25.js"></script></head><body><input type="text" ng-model="yourName"><h1>Hello, {{yourName}}</h1></body> </html>用瀏覽器打開這個(gè)網(wǎng)頁，在文本框進(jìn)行輸入。發(fā)現(xiàn)界面會(huì)自己主動(dòng)實(shí)時(shí)顯示。假設(shè)用javascript或jquery，完畢這么一個(gè)小功能，我們組要注冊(cè)監(jiān)聽事件，獲取text控件的值，然后將值塞入<h1>中顯示。而使用AngularJS，我們須要做的事情是：加入ng-app，加入ng-model。使用{{yourName}}顯示。非常顯然，使用AngularJS要簡(jiǎn)單的多，并且代碼更緊湊。以下我們簡(jiǎn)單看下這3個(gè)東西的意思：
1、ng-app：它能夠放在不論什么dom節(jié)點(diǎn)上，代表該結(jié)點(diǎn)以及它的全部子節(jié)點(diǎn)都在AngularJS的管理范圍之內(nèi)；假設(shè)去掉這個(gè)標(biāo)記。發(fā)現(xiàn)AngularJS框架不會(huì)起效果。
<!doctype html> <html lang="en"><head><meta charset="utf-8"><title>Hello,World!</title><script src="angular1.2.25.js"></script></head><body><div ng-app><input type="text" ng-model="yourName"><h1>Hello, {{yourName}}</h1></div><h1>Hello, {{yourName}}</h1></body> </html>這次我們把ng-app放到了<div>上。能夠看到div內(nèi)部的<h1>能夠?qū)崟r(shí)顯示輸入的數(shù)據(jù)，而外部的<h1>沒有效果。能夠看到。一個(gè)html頁面能夠所有交予AngularJS來管理。也能夠僅僅讓AngularJS管理頁面的一部分。我們能夠按需加入ng-app所在的dom節(jié)點(diǎn)。
2、ng-model：這個(gè)是AngularJS數(shù)據(jù)的雙向綁定特性。
簡(jiǎn)單點(diǎn)理解：告訴AngularJS這是個(gè)數(shù)據(jù)模型，你幫我存到內(nèi)存中。界面上改動(dòng)數(shù)據(jù)。內(nèi)存中數(shù)據(jù)也會(huì)自己主動(dòng)改動(dòng)；改動(dòng)內(nèi)存中的變量值。界面顯示也會(huì)自己主動(dòng)更改。
這個(gè)特性顯然非常方便，可以保持?jǐn)?shù)據(jù)的一致性，避免我們自己加代碼來完畢這個(gè)功能。
3、{{yourName}}：這個(gè)是框架提供的表達(dá)式語法，可以顯示內(nèi)存中數(shù)據(jù)模型的值。這個(gè)跟struts2的<s:property>、<s:text>類似，就是用來顯示數(shù)據(jù)的。
這樣的僅僅是AngularJS定義的語法格式，跟JSP頁面中的EL表達(dá)式，struts2的OGNL非常類似。就是一種數(shù)據(jù)的獲取機(jī)制。
版權(quán)聲明：本文博客原創(chuàng)文章，博客，未經(jīng)同意，不得轉(zhuǎn)載。
轉(zhuǎn)載于:https://www.cnblogs.com/blfshiye/p/4713772.html
總結(jié)
以上是生活随笔為你收集整理的（一个）AngularJS获取贴纸Hello World的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL性能调优与架构设计——第4章
- 下一篇： 记一个简单的保护if 的sh脚本