當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
AngularJS学习笔记一:简单入门
生活随笔
收集整理的這篇文章主要介紹了
AngularJS学习笔记一:简单入门
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
阿里云網站的前端是AngularJS實現的。
先下載AngularJS的開發工具包,我下載的angular-1.4.0。
在合適位置引入js文件:
<script src="angular-1.4.0/angular.min.js"></script>1. AngularJS 入門指令:
ng-app 指令告訴 AngularJS，<div> 元素是 AngularJS 應用程序 的"所有者"。
ng-model 指令把輸入域的值綁定到應用程序變量 name。
ng-bind 指令把應用程序變量 name 綁定到某個段落的 innerHTML。
ng-init 指令初始化 AngularJS 應用程序變量。
案例如下:
<!DOCTYPE html> <html> <body><div ng-app=""><p>在輸入框中嘗試輸入:</p> <p>姓名: <input type="text" ng-model="name" ng-init="name='json'"></p> <p ng-bind="name"></p></div><script src="angular-1.4.0/angular.min.js"></script></body> </html>2. AngularJS 表達式:
AngularJS 表達式寫在雙大括號內：{{ expression }}。
AngularJS 表達式把數據綁定到 HTML，這與 ng-bind 指令有異曲同工之妙。
AngularJS 將在表達式書寫的位置"輸出"數據。
AngularJS 表達式 很像 JavaScript 表達式：它們可以包含文字、運算符和變量。
案例入下:
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="quantity=1;cost=5"> <p>總價是:{{quantity*cost}}</p></div><script src="angular-1.4.0/angular.min.js"></script></body> </html>使用 ng-bind進行相同的實現：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="quantity=1;cost=5"> 總價是:<p ng-bind="quantity*cost"></p> </div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>3. AngularJS 字符串
AngularJS 字符串就像 JavaScript 字符串：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： {{ firstName + " " + lastName }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>使用 ng-bind進行相同的實現：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="firstName='John';lastName='Doe'"><p>姓名： <span ng-bind="firstName + ' ' + lastName"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>4.AngularJS 對象
AngularJS 對象就像 JavaScript 對象：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓為 {{ person.lastName }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>使用 ng-bind進行相同的實現：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}"><p>姓為 <span ng-bind="person.lastName"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>5.AngularJS 數組
AngularJS 數組就像 JavaScript 數組：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三個值為 {{ points[2] }}</p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>使用 ng-bind進行相同的實現：
<!DOCTYPE html> <html> <body><div ng-app="" ng-init="points=[1,15,19,2,40]"><p>第三個值為 <span ng-bind="points[2]"></span></p></div> <script src="angular-1.4.0/angular.min.js"></script></body> </html>?
?
?
轉載于:https://www.cnblogs.com/longshiyVip/p/4582922.html
總結
以上是生活随笔為你收集整理的AngularJS学习笔记一:简单入门的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： word保存时标题变成黑框（mac版本）
- 下一篇： 给定一个数值，输出符合中国人习惯的读法-