angular第二天
羊群效應(yīng)
依賴注入
復(fù)習(xí)
對(duì)象與對(duì)象之間是不會(huì)出現(xiàn)相同的，
localStroage最疆，復(fù)習(xí)；
localStroage.clear()清除
localStroage.BDSUGSTORED,查看頁面緩存蚤告，例如百度搜索的頁面努酸，大小是4M；
track by,在遍歷時(shí)記得加上
src直接請(qǐng)求杜恰，angular處理是加ng-src,等待angular加載获诈，就不會(huì)出現(xiàn)百分號(hào)；
MVVM設(shè)計(jì)模式
- 模塊
創(chuàng)建模塊
<body>
<script src=""></scripe>
<script>
//創(chuàng)建模塊
//(var app=angular.module('myApp',[])();自執(zhí)行函數(shù)需要用到尋找模塊來尋找對(duì)應(yīng)的模塊心褐；
var app=angular.module('myApp',[]);
var app2=angular.module('myApp',[]);
//即便名字相同烙荷，也是FALSE滴；即app比較app2為FALSE檬寂；
//尋找模塊终抽，通過模塊的名字
var app3=angular.module('myApp');//在操作的時(shí)候需要將app2先注釋；
</scripe>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<!--只能有一個(gè)ng-app-->
<body ng-app="myApp1" ng-controller="myCtrl1">
{{text}}
<div ng-controller="myCtrl2">
{{text}}
</div>
<!--引入angular-->
<script src="./angular-1.5.8/angular.js"></script>
<script>
//將myApp2存放到app1的注入數(shù)組中，
var app1=angular.module('myApp1',['myApp2']);
app1.controller('myCtrl1',function($scope){
$scope.text="1";
});
var app2=angular.module('myApp2',[]);
app2.controller('myCtrl2',function($scope){
$scope.text="2";
});
</script>
</body>
</html>
ng-app需要用到就近原則昼伴，它也是需要費(fèi)時(shí)間去找ng-app的匾旭；哪里需要用哪里
主模塊和子模塊，控制器名字不同圃郊，模塊名字不同价涝，主模塊引入子模塊
頁面中ng-app只能有一個(gè),控制器可以多個(gè)
angular會(huì)將頁面滴東西加載一遍，如果沒有使用控制器時(shí)持舆，子模塊不會(huì)被調(diào)用,同時(shí)子模塊放在主模塊是一個(gè)字符串來滴
主模塊和子模塊名字不要一樣
3.不常用的方法
<div id="my1" ng-controller="myCtrl2">
{{text}}
</div>
<div id="my2" ng-controller="myCtrl2">
{{text}}
</div>
<!--引入angular-->
<script src="./angular-1.5.8/angular.js"></script>
<script>
//將myApp2存放到app1的注入數(shù)組中色瘩，
var app1=angular.module('myApp1',['myApp2']);
app1.controller('myCtrl1',function($scope){
$scope.text="1";
});
var app2=angular.module('myApp2',[]);
app2.controller('myCtrl2',function($scope){
$scope.text="2";
});
angular.bootstrap(document.getElementById('my1'),['myApp1']);
angular.bootstrap(document.getElementById('my2'),['myApp2']);
</script>
不常用模塊使用
ng-app可以多次使用
angular.bootstrap()手動(dòng)注冊(cè)ng-app
尋找ng-app，沒有就可以使用angular.bootstrap手動(dòng)注冊(cè)逸寓，可以使用這個(gè)分段加載模塊居兆，用的相對(duì)少，作為了解
常用模塊使用
主模塊與配合子模塊使用
- 控制器的使用
**這段代碼未完善**
多個(gè)控制器使用
<body>
<div ng-app="myApp" ng-init=" text='hello'">
{{text}}
<div ng-controller="myCtrl">
{{text}}
<div ng-controller="myCtrl2">
{{text}}
</div>
</div>
<div ng-controller="myCtrl3">
{{text}}
</div>
</div>
<script src="js/angular.js"></script>
<script>
//1. ngController只能放在ngApp中使用
// 2. 會(huì)有多個(gè)controller一起使用竹伸，controller的使用采用就近原則來使用controller
//3. $scope會(huì)有一個(gè)類似繼承的關(guān)系,每一個(gè)主模塊的頁面中都會(huì)有一個(gè)$roorScope(主作用域)泥栖，所有的控制器都會(huì)創(chuàng)建自己的scope（子作用域）
// 4. $scope中沒有的變量會(huì)去上一級(jí)scope尋找直到$rootScope終止
var app=angular.module('myApp',[]);
app.controller('myCtrl',function ($scope) {
$scope.text='hellomyCtrl'
});
app.controller('myCtrl2',function ($scope) {
$scope.text='hellomyCtrl2 嵌套'
})
app.controller('myCtrl3',function ($scope) {
})
</script>
</body>
1.控制器可以嵌套
2.控制器可以多個(gè)
3.控制器就近原則
每一個(gè)主模塊中都會(huì)有$rootscope;
所有的控制器都會(huì)創(chuàng)建自己的$scope(作用域);
$scope有繼承的關(guān)系，會(huì)繼承上一級(jí)($rootscope),就是$scope中沒有的變量會(huì)去上一級(jí)尋找勋篓，直到$rootscope終止
沒有使用控制器的時(shí)候吧享，有個(gè)$rootscope,根的作用域，（如果$rootstrap中有內(nèi)容譬嚣，則可以去繼承）
控制器常用方法
防止壓縮報(bào)錯(cuò)
<body ng-app="myApp" ng-controller="myCtrl">
{{text}}
<script src="./angular-1.5.8/angular.min.js"></script>
<script>
var app=angular.module('myApp',[]);
app.controller('myCtrl',['$scope',function($scope){
$scope.text='hello';
}]);
</script>
</body>
$scope是依賴注入钢颂，但是在壓縮代碼時(shí)，會(huì)將該參數(shù)改為a拜银，則會(huì)報(bào)錯(cuò)了甸陌，爆出參數(shù)找不到，
字符串的東西是不會(huì)被壓縮工具改變的盐股；
如何解決這個(gè)報(bào)錯(cuò)呢钱豁？
防止壓縮報(bào)錯(cuò)
1.在使用function時(shí)，先添加中括號(hào)疯汁，然后再將function放入中括號(hào)牲尺，然后再將$scope寫為'$scope'寫為中括號(hào)第一個(gè)參數(shù) ，再傳進(jìn)function
2.在壓縮后幌蚊，參數(shù)變?yōu)閍谤碳，但是可以拿到參數(shù)$scope;
可以在后面繼續(xù)添加參數(shù)，如$log,但是參數(shù)必須按照數(shù)組中順序來溢豆，順序不能隨便了蜒简；
參數(shù)的名字要有意義；
- 控制器變形
1.控制器期寫法（引用1.29版本的angular）
<body ng-app="" ng-controller="myCtrl">
<!--上面的ng-app是不需要值的漩仙，只需要ng-controller-->
{{name}}
<script src="./angular-1.2.29/angular.js"></script>
<script>
//直接一個(gè)函數(shù)然后函數(shù)名為控制器名字
function myCtrl($scope){
$scope.name="angular早期使用";
}
</script>
</body>
這種方法會(huì)有全局污染
因而才會(huì)有后面的寫法
2.控制器函數(shù)提取出來用變量作為參數(shù)傳函數(shù)搓茬，外部引入函數(shù)犹赖，也需要防止壓縮
<body ng-app="myApp" ng-controller="myCtrl">
{{text}}
<script src="./angular-1.5.8/angular.js"></script>
<script>
var app=angular.module('myApp',[]);
var myCtrl=function(a){
a.text='1';
}
myCtrl.$inject=['$scope'];
app.controller('myCtrl',myCtrl);
</script>
</body>
注入方式防止壓縮（第二種防止壓縮的方法）
myCtrl.$inject=['$scope']用來注入，防止壓縮
$是服務(wù)
- angular全局方法
- $$的方法或者屬性盡量不要使用
- bootstrap 用來手動(dòng)添加ngApp
- module 用來創(chuàng)建模塊
- version 查看版本
- 凡屬于is開頭的都是用來做判斷 返回布爾值
- toJson 將對(duì)象轉(zhuǎn)換成Json字符串
- fromJson 將Json字符串 轉(zhuǎn)換成json對(duì)象
- merge（obj1,obj2） 用來將后面obj2對(duì)象合并到obj1中
- copy(obj1,obj3) 深拷貝obj1到obj3中
- uppercase lowercase 轉(zhuǎn)換大小寫
- element（精簡(jiǎn)版）element返回的是jqLite 缺少了很多東西(在angular做頁面時(shí)候有些地方angular做不到的情況下才用 jqLite或者jquery使用)
深拷貝和淺拷貝
表單驗(yàn)證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css">
<style>
.context{
margin: 30px auto;
width: 400px;
}
.error{
border: 1px solid red;
}
.infoerror{
color: red;
}
</style>
</head>
<body>
<div ng-app="myApp">
<!--sigUpCtrl用來控制注冊(cè)-->
<div ng-controller="sigUpCtrl">
<!--使用angular表單驗(yàn)證步驟-->
<!--1.給你的表單form添加name卷仑，同時(shí)會(huì)在$scope上面添加驗(yàn)證信息-->
<!--2.給你表單中所有的表單元素添加name-->
<form name="sigUpForm" ng-submit="sigUpSubmit()" class="context" novalidate="false">
<!--<pre>{{sigUpForm|json}}</pre>-->
<div class="form-group">
<label>用戶名</label>
<!--
required 用來標(biāo)識(shí)表單是否為空
ng-maxlength最大字符串
ng-minlength 最小字符串
novalidate="false" 禁用required
touched 表示已經(jīng)獲取過焦點(diǎn)
untouched 表示沒有獲取過焦點(diǎn)
pristine 沒有使用過
dirty 已經(jīng)使用過
valid 已經(jīng)通過驗(yàn)證
invalid 未通過驗(yàn)證
error 未通過的錯(cuò)誤信息
-->
<!--<pre>{{sigUpForm.username | json}}</pre>-->
<input ng-class="{'error':sigUpForm.username.$invalid&&sigUpForm.username.$touched}" name="username" required type="text" ng-maxlength="7" ng-minlength="3" class="form-control" placeholder="用戶名" ng-model="userdata.username"/>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.username.$error.required&&sigUpForm.username.$touched">用戶名為空</p>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.username.$error.minlength||sigUpForm.username.$error.maxlength">長(zhǎng)度不能少于3位并且長(zhǎng)度不能大于7位</p>
<!--{{username}}-->
</div>
<div class="form-group">
<label>密碼</label>
<input ng-class="{'error':sigUpForm.pwd.$invalid&&sigUpForm.pwd.$touched}" name="pwd" required type="password" ng-maxlength="7" ng-minlength="3" class="form-control" placeholder="密碼" ng-model="userdata.pwd"/>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.pwd.$error.required&&sigUpForm.pwd.$touched">密碼為空</p>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.pwd.$error.minlength||sigUpForm.pwd.$error.maxlength">密碼長(zhǎng)度不能少于3位并且長(zhǎng)度不能大于7位</p>
</div>
<div class="form-group">
<label>確認(rèn)密碼</label>
<input ng-class="{'error':sigUpForm.pwd2.$invalid&&sigUpForm.pwd2.$touched}" name="pwd2" required type="password" class="form-control" placeholder="密碼" ng-model="pwd2"/>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.pwd2.$error.required&&sigUpForm.pwd2.$touched">密碼為空</p>
<p ng-class="{'infoerror':true}" ng-show="(userdata.pwd!=pwd2)&&sigUpForm.pwd2.$touched">兩次輸入密碼不一致</p>
</div>
<div class="form-group">
<label>郵箱驗(yàn)證</label>
<!--郵箱可以采用默認(rèn)形式的驗(yàn)證-->
<input ng-class="{'error':sigUpForm.email.$invalid&&sigUpForm.email.$touched}" class="form-control" type="email" name="email" ng-model="userdata.email" required>
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.email.$touched&&(sigUpForm.email.$error.email||sigUpForm.email.$error.required)">郵箱格式不正確</p>
</div>
<div class="form-group">
<!--<pre>{{sigUpForm.phone|json}}</pre>-->
<label>手機(jī)驗(yàn)證</label>
<!--郵箱可以采用默認(rèn)形式的驗(yàn)證-->
<!--ngPattern正則驗(yàn)證-->
<input ng-class="{'error':sigUpForm.phone.$invalid&&sigUpForm.phone.$touched}" ng-pattern="/^1(3|4|5|7|8)\d{9}$/" class="form-control" type="tel" name="phone" ng-model="userdata.phone" required >
<p ng-class="{'infoerror':true}" ng-show="sigUpForm.phone.$touched&&(sigUpForm.phone.$error.pattern||sigUpForm.phone.$error.required)">手機(jī)號(hào)碼有誤</p>
</div>
<div>
<!--未通過驗(yàn)證禁止使用這個(gè)按鈕-->
<button class="btn btn-primary" ng-disabled="sigUpForm.$invalid" >注冊(cè)</button>
</div>
</form>
</div>
<script src="js/angular.js"></script>
<script>
//通過表單驗(yàn)證后存數(shù)據(jù)
function Users(userData) {
this.userData=userData
}
Users.prototype.AddUser=function () {
//模擬Ajax存儲(chǔ)數(shù)據(jù)
//先去獲取localStorage中用戶數(shù)據(jù)
var str=localStorage["userList"]||'[]';
//轉(zhuǎn)換成json
var list=JSON.parse(str);
//保存數(shù)據(jù)到list中
//判斷數(shù)據(jù)中的用戶名是否重名峻村，如果重名則不添加
for(var i=0;i<list.length;i++){
if(list[i].username===this.userData.username){
//重名則返回false
return false
}
}
list.push(this.userData)
//獲取完成后再添加用戶數(shù)據(jù)
localStorage["userList"]=JSON.stringify(list);
//不重名返回true
return true;
}
var app=angular.module('myApp',[]);
app.controller('sigUpCtrl',function ($scope) {
$scope.userdata={}
$scope.sigUpSubmit=function () {
//獲取到真實(shí)數(shù)據(jù)以后需要將數(shù)據(jù)保存起來localStorage
// localStorage key value型保存方式 并且這種保存只能保存字符串
console.log( $scope.userdata);
//添加用戶信息
var user=new Users($scope.userdata)
//保存用戶信息
if(user.AddUser()){
alert('注冊(cè)成功')
}else{
alert('注冊(cè)失敗')
}
}
})
</script>
</div>
</body>
</html>
