angular是什么？？
查看 angular簡介請訪問：點此處訪問
怎么下載源文件
下載地址：點擊下載
怎么講？
我打算以實例為導(dǎo)向，講解各個指令，最后合并所有，做出來一個簡單的單頁面應(yīng)用
今天的實例是一個簡單的登錄功能
先看看運行效果
QQ截圖20160923111404.png
接下來開始
準(zhǔn)備結(jié)構(gòu)
//頁面頭部設(shè)置
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Expires" content="0" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<head>
<title>第一個angular頁面</title>
//body 部分代碼
<div>
<div >
<h1>登錄</h1>
<form>
<p><input type="text" placeholder="用戶名"/></p>
<p><input type="password" placeholder="密碼"/></p>
<p><input type="button" value="登錄" /></p>
</form>
<div class="text">
<p>你輸入的用戶名:</p>
<p>密碼：</p>
</div>
</div>
樣式
<style>
*{
padding:0px;
margin:0px;
font-size:10px;
font-family:Arial, 'Microsoft YaHei', Helvetica, 'Hiragino Sans GB';
}
input{
font-size:1.4rem;
border:1px solid #ededed;
padding:5px 10px;
width:100%;
box-sizing:border-box;
}
form{
padding:20px 10px;
}
h1{
font-size:1.8rem;
text-align:center;
padding:30px;
color:#ff4354;
}
form p{
padding:5px 0px;
}
form input[type=button]{
padding:10px 0px;
border:1px solid #ff4354;
background-color: #ff4354;
color: #ffffff;
border-radius: 5px;
}
.text p{
font-size: 1.4rem;
padding: 5px 10px;
}
</style>
引入 angularJS
<script src="angular-1.3.0.js"></script>
告訴 angular 他的作用域是什么
什么是作用域？就是告訴它，讓它只在某個區(qū)域起作用
怎么告訴？ 用指令 ng-app
<!--示例代碼-->
<div ng-app="" ng-init="text='World'">
<div>angular運行的時候會編譯這部分</div>
<div>Hello {{text}}</div>
</div>
<div class="ignore">
angular不會管這部分Hello {{text}}
</div>
<!--運行結(jié)果-->
<div ng-app="" ng-init="text='World'" class="ng-scope">
<div>angular運行的時候會編譯這部分</div>
<div class="ng-binding">Hello World</div>
</div>
<div class="ignore">
angular不會管這部分Hello {{text}}
</div>
//說明：
1. ng-app功能： 告訴angular 它的作用域
2. ng-app作用域： 都知道div是雙標(biāo)簽，很明顯 ng-app 的作用域從節(jié)點開始到節(jié)點結(jié)束，.ignore 沒在ng-app 里面所以angular 不管
3、ng-app 適用標(biāo)簽， html div p 等等都是可以的，因為我們有時候需要整個頁面都被angular編譯，有時候只是需要局部是
4、ng-init 功能 定義這個作用域里面初始時候的數(shù)據(jù) 例如例子中 初始的時候設(shè)置 *text='World'*，就是在作用域里面定義了一個變量text值得World
5、怎么調(diào)用變量？ 用插件表達(dá)式來調(diào)用，實例見上邊代碼 {{text}}，即雙大括號里面寫入變量名。
6、我想在變量前面加上某個字符串怎么辦？你可以這么寫 {{"嘿嘿"+text}}；這么寫 {{1+2}} ; 這不就是js表達(dá)式嗎？ Binggo ！！！
7、還有另外一種調(diào)用方式，不過這種調(diào)用方式依賴標(biāo)簽，如【即ng-bind 指令 的 =號后面寫上要綁定的變量名】
<span ng-bind="text"></span>
那么我們現(xiàn)在就告訴angular他的作用域
代碼如下
<div ng-app="">
<div >
<h1>登錄</h1>
<form>
<p><input type="text" placeholder="用戶名"/></p>
<p><input type="password" placeholder="密碼"/></p>
<p><input type="button" value="登錄" /></p>
</form>
<div class="text">
<p>你輸入的用戶名:</p>
<p>密碼：</p>
</div>
</div>
既然頁面已經(jīng)做好了，我們就來處理用戶的輸入，完成功能吧
代碼如下：
<div ng-app="">
<div ng-controller="myFirstCtrl">
<h1>登錄</h1>
<form>
<p><input type="text" ng-model="username" placeholder="用戶名"/></p>
<p><input type="password" ng-model="userpwd" placeholder="密碼"/></p>
<p><input type="button" ng-click="login()" value="登錄" /></p>
</form>
<div class="text">
<p>你輸入的用戶名:{{username}}</p>
<p>密碼：{{userpwd}}</p>
</div>
</div>
相關(guān) JS
<script>
function myFirstCtrl($scope){
$scope.username="";
$scope.userpwd="";
$scope.login=function(){
if($scope.username==""||$scope.userpwd==""){
alert("信息未輸入完整");
}else{
console.log("去登陸");
}
}
}
</script>
//說明
1、ng-controller 是做什么？ ng-controller 是控制的某個作用域部分的
2、他跟ng-app什么關(guān)系？ ng-app是控制整個app的，整個app可以由多個ng-controller組成
3、怎么創(chuàng)建一個控制器？ 寫一個 function 即可 函數(shù)名就是控制器名
4、$scope是個什么鬼？ $scope是作用域?qū)ο?5、$scope做什么用？ 你還記得 ng-init中定義的 text 變量嗎？它實際上就是定義在$scope底下，
這樣控制器的作用域里面就可以通過插件表達(dá)式調(diào)用到它，
實際上就相當(dāng)于 $scope.text="World";
6、$scope 下邊可以寫方法嗎？ 當(dāng)然可以，你直接就像平常寫js哪樣，直接給$scope這個對象屬性賦值為函數(shù)即可
$scope.func=function(){
console.log("我是個函數(shù)");
}
7、定義函數(shù)我怎么調(diào)用啊？ 用事件綁定指令！ng-[我是事件名字]
實例：給元素增加單擊事件
ng-click="func()"
8、ng-model 是啥？ 這個指令告訴Angular 等號后邊的這個變量需要雙向同步
9、什么是雙向同步？ 我的理解是你再輸入框里面輸入的時候，
你輸入什么angular就把這個值取到更新到$scope的對應(yīng)屬性上去；同樣你再程序里面改動這個屬性的時候也會直接反映到頁面上。
OK 大功告成！！！
