當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
[AngularJS学习笔记] 基础学习01
生活随笔
收集整理的這篇文章主要介紹了
[AngularJS学习笔记] 基础学习01
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2016-06-06開始學習AngularJS
?AngularJS是會extend HTML的
?
ng-directives
先學習了四個
- ng-app：定義AngularJS Application的指令
- ng-model：綁定HTML控件數據的指令
- ng-bind：綁定數據到HTML view的指令
- ng-init: 初始化AngularJS application的變量
示例：
<!DOCTYPE html> <html> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body><div ng-app="" ng-init="lastName='Guo'"><p>Name: <input type="text" ng-model="name"></p><p ng-bind="name"></p><p>The name is <span ng-bind="lastName"></span></p> </div></body> </html>以上的示例里，
ng-app指令，作用是告訴AngularJS<div>這個元素是一個AngularJS application的“擁有者”。
ng-model指令，把輸入框的value綁定到了application的一個變量名下
ng-bind指令，把<p>元素的innerHTML綁定到了application的某一個變量名下
ng-init指令，是初始化某些application變量
?
AngularJS Expressions
表達式在AngularJS里面用雙花括號表示 {{ expression }}
表達式也可以寫在指令里，例如：ng-bind="expression"
表達式可以包括對變量的綁定和運算，例如：
?
1 <div ng-app="" ng-init="myCol='lightblue'"> 2 3 <input style="background-color:{{myCol}}" ng-model="myCol" value="{{myCol}}"> 4 5 </div>?
這個順序應是這樣的：
基本上是要是JS的表達式，Angular都可以放在{{}}中或者是ng-bind中
包括JS對象，JS數組等等
例如：
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}; points=[1,15,19,2,40]"><p>The name is <span ng-bind="person.lastName"></span></p><p>The third result is {{ points[2] }}</p></div>AngularJS表達式和JavaScript表達式的比較：
- 兩者都可以包含literals, operators, variables。
- AngularJS的表達式可以直接放在HTML里，但是JavaScript不行，必須跟HTML分離開。
- AngularJS的表達式不支持if else，loops和exceptions，但是JavaScript可以。
- AngularJS的表達式支持filter，JavaScript沒有。
?
轉載于:https://www.cnblogs.com/marshallguo/p/5566220.html
總結
以上是生活随笔為你收集整理的[AngularJS学习笔记] 基础学习01的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Objective-C] Copy 和
- 下一篇： 关于offsetTop offsetHe