angular:庫、框架!
是一個mvc的框架!
衍生出來好多其他名稱:mvp mvvm mv*...
現階段比較火!------谷歌一直在推用!
angular不僅僅是因為谷歌在推它使用它,它才火的,是因為它本身有很大的優點!
為什么angular叫mvc框架呢?
m-----model ?數據
v-----view ? 視圖
c-----conteroller ?控制器
****用控制器把數據展示(視圖)出來
操作數據!----靠譜的框架!(減少了很多dom操作)
以后大家寫angular項目的時候最好放在服務器里面!
學習一個庫最最最最簡單的了解就是擼它的官網對吧:進入官網:https://angularjs.org/
目的:1.為了下載這個庫 ? ?2.為了查看它的手冊
說一下angular版本
1.2.x 之前的版本---有很大問題!
1.3.x 之后版本
1.3.10---現在公司大多都用這個!
1.4.2
2.x.x? 全新版本。完全是一個新庫!里面用法大改!
怎么玩這東西?
1.引入咱angular----專門來pc端的!
***只要一引入框架,那么就可以使用angular的基本功能!
2.開始使用里面一些基本功能用法:
angular.bind(this的指向,函數)
function show(){alert(this);}
//show.call(12);
var c=angular.bind(12,show);
c();
angular.copy(克隆誰,克隆到哪里去);
***同類型!
angular.equals(a,b)----比較倆個東西是否相等!
里面都是NaN的是true!
angular.forEach() ------用來循環的!
angular.forEach(循環對象,function(值,k){//value,key
//console.log(v);
console.log(k);
})
可以循環json arr 普通!
angular.isArray()? ? 判斷它是否是一個數組!
--------------------------------------------------
angular.isDate()? ? ? 判斷是否是一個日期!
--------------------------------------------------
angular.lowecase()? ? 轉小寫!
-------------------------------------------------
angular.module()? ? -----模塊化開發!!!
***重點內容,后面主要會說!
--------------------------------------------------
基本用法:
angular開發采用的機制:命名空間機制!
比如:
? ? ? ? css:
? ? ? ? .css-red{}
? ? ? ?.css-blue{}
? ? js:
? ? ? ? ? var web={}
? ? ? ? ? web.add={}
? ? ? ? ? ?web.add={}
模板:
{$name}
主要以數據為主!
ng-model="a" -----定義一條數據!
<span>{{a}}</span>? {{a}}{{a}}---展示數據!
給他們父級添加: ng-app----開啟angular的應用模式:或者說是一個管轄范圍!?
***注意:
1.ng-app頁面中只能有一個!(第一管用后面的不管用!)
2.建議大家把它放在html標簽里面!一下是倆種數據展示方式:
<input type="text" ng-model="a"><br/>
<span>{{a}}</span>---建議用這個
<span ng-bind="a"></span>---綁定一個數據展示
=====================================================
ng-name 統一稱為:指令
指令(directive)作用:
? ? ? ? ? ? ? ? ? ? ?擴展html語法
學了幾個指令:
? ? ? ? ? ? ? ng-app
? ? ? ? ? ? ? ng-model="" 定義一個數據!
? ? ? ? ? ? ? ng-bing="" 綁定一個數據展示出!
------------------------------------------------------------------
讓一個div消失!
ng-show="true/false"
ng-hide="true/false"
=================================================
點擊按鈕讓一個塊元素顯示隱藏:
<div ng-init="a=false">//定義一個初始數據(變量a=false)
? ? ? <input type="button" value="按鈕" ng-click="a=!a"/><br/>(點擊按鈕時改變a的值)
? ? ? <div id="box" ng-show="a"></div>(最后把這個值給ng-show)
</div>
事件:
ng-click="a=!a"
ng-mouseover="a=!a"
ng-mouseout="a=!a"
.................................
-------------------------------------------------------------------------------------
介紹一個比較重量級的指令:
? ? ? 指令里面也有一個東西也是做循環的!
ng-repeat="" ?循環!
<div ng-init="arr=['智能社','淘寶網','百度一下','阿里巴巴','京東網']">
? ? ? ? ? <ul>
? ? ? ? ? ? ? ? <li ?ng-repeat="value in arr"></li>
? ? ? ? ?</ul>
</div>
======================================================
以上的代碼少點東西:(上面一直在講m和v)
? ? ? ? ? ? ?其實是少C---控制器!
-----------------------------------------------------------------------------------------
angular控制器---稍微有點繁瑣!
步驟:
1.首先就是定義一個控制器!
function show($scope){//在這個里面叫定義控制器!
? ? ? ? ?//$scope全局對象 有點類似于window
? ? ? ? ?$scope.a=12;
}
<div>{{a}}</div>
-------------------------------------------------------------------
$scope
屬于angular特色:
雙向數據綁定、依賴注入!
依賴注入:$scope是固定的,寫死! 跟順序無關!
function show(b,a){} ----->show(12,34)
======================================
1.3.10版本沒有上面定義控制器的方法!!!
新方法:(修改上面1.0以前定義控制器方法)
****采用了:模塊化的開發!
注意:定義控制器改變了,展示數據的時候沒變!
//angular.module(模塊名,[依賴模塊],配置函數);
var mk=angular.module(模塊名,[])
***angular.module里面必須默認保持有兩項!
===============================================
1.先創建一個模塊:
var app=angular.module('app',[])
2.把模塊名字給ng-app
3.在模塊里面定義一個控制器:
app,controller('show',function($scope)){
$scope.a=12;
}
4.展示控制器里面的數據:
<div ng-controller="show">{{a}}</div>