angular第二天
羊群效应
依赖注入
复习
对象与对象之间是不会出现相同的，
localStroage，复习；
localStroage.clear()清除
localStroage.BDSUGSTORED,查看页面缓存，例如百度搜索的页面，大小是4M；
track by,在遍历时记得加上
src直接请求，angular处理是加ng-src,等待angular加载，就不会出现百分号；
MVVM设计模式
- 模块
创建模块
<body>
<script src=""></scripe>
<script>
//创建模块
//(var app=angular.module('myApp',[])();自执行函数需要用到寻找模块来寻找对应的模块；
var app=angular.module('myApp',[]);
var app2=angular.module('myApp',[]);
//即便名字相同，也是FALSE滴；即app比较app2为FALSE；
//寻找模块，通过模块的名字
var app3=angular.module('myApp');//在操作的时候需要将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>
<!--只能有一个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的注入数组中，
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需要用到就近原则，它也是需要费时间去找ng-app的；哪里需要用哪里
主模块和子模块，控制器名字不同，模块名字不同，主模块引入子模块
页面中ng-app只能有一个,控制器可以多个
angular会将页面滴东西加载一遍，如果没有使用控制器时，子模块不会被调用,同时子模块放在主模块是一个字符串来滴
主模块和子模块名字不要一样
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的注入数组中，
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()手动注册ng-app
寻找ng-app，没有就可以使用angular.bootstrap手动注册，可以使用这个分段加载模块，用的相对少，作为了解
常用模块使用
主模块与配合子模块使用
- 控制器的使用
**这段代码未完善**
多个控制器使用
<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. 会有多个controller一起使用，controller的使用采用就近原则来使用controller
//3. $scope会有一个类似继承的关系,每一个主模块的页面中都会有一个$roorScope(主作用域)，所有的控制器都会创建自己的scope（子作用域）
// 4. $scope中没有的变量会去上一级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.控制器可以多个
3.控制器就近原则
每一个主模块中都会有$rootscope;
所有的控制器都会创建自己的$scope(作用域);
$scope有继承的关系，会继承上一级($rootscope),就是$scope中没有的变量会去上一级寻找，直到$rootscope终止
没有使用控制器的时候，有个$rootscope,根的作用域，（如果$rootstrap中有内容，则可以去继承）
-
控制器常用方法
-
防止压缩报错
<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是依赖注入，但是在压缩代码时，会将该参数改为a，则会报错了，爆出参数找不到，
字符串的东西是不会被压缩工具改变的；
如何解决这个报错呢？
防止压缩报错
1.在使用function时，先添加中括号，然后再将function放入中括号，然后再将$scope写为'$scope'写为中括号第一个参数 ，再传进function
2.在压缩后，参数变为a，但是可以拿到参数$scope;
可以在后面继续添加参数，如$log,但是参数必须按照数组中顺序来，顺序不能随便了；
参数的名字要有意义；
- 控制器变形
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>
//直接一个函数然后函数名为控制器名字
function myCtrl($scope){
$scope.name="angular早期使用";
}
</script>
</body>
这种方法会有全局污染
因而才会有后面的写法
2.控制器函数提取出来用变量作为参数传函数，外部引入函数，也需要防止压缩
<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']用来注入，防止压缩
$是服务
- angular全局方法
- $$的方法或者属性尽量不要使用
- bootstrap 用来手动添加ngApp
- module 用来创建模块
- version 查看版本
- 凡属于is开头的都是用来做判断 返回布尔值
- toJson 将对象转换成Json字符串
- fromJson 将Json字符串 转换成json对象
- merge（obj1,obj2） 用来将后面obj2对象合并到obj1中
- copy(obj1,obj3) 深拷贝obj1到obj3中
- uppercase lowercase 转换大小写
- element（精简版）element返回的是jqLite 缺少了很多东西(在angular做页面时候有些地方angular做不到的情况下才用 jqLite或者jquery使用)
深拷贝和浅拷贝
表单验证
<!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用来控制注册-->
<div ng-controller="sigUpCtrl">
<!--使用angular表单验证步骤-->
<!--1.给你的表单form添加name，同时会在$scope上面添加验证信息-->
<!--2.给你表单中所有的表单元素添加name-->
<form name="sigUpForm" ng-submit="sigUpSubmit()" class="context" novalidate="false">
<!--<pre>{{sigUpForm|json}}</pre>-->
<div class="form-group">
<label>用户名</label>
<!--
required 用来标识表单是否为空
ng-maxlength最大字符串
ng-minlength 最小字符串
novalidate="false" 禁用required
touched 表示已经获取过焦点
untouched 表示没有获取过焦点
pristine 没有使用过
dirty 已经使用过
valid 已经通过验证
invalid 未通过验证
error 未通过的错误信息
-->
<!--<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">长度不能少于3位并且长度不能大于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">密码长度不能少于3位并且长度不能大于7位</p>
</div>
<div class="form-group">
<label>确认密码</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>邮箱验证</label>
<!--邮箱可以采用默认形式的验证-->
<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>手机验证</label>
<!--邮箱可以采用默认形式的验证-->
<!--ngPattern正则验证-->
<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)">手机号码有误</p>
</div>
<div>
<!--未通过验证禁止使用这个按钮-->
<button class="btn btn-primary" ng-disabled="sigUpForm.$invalid" >注册</button>
</div>
</form>
</div>
<script src="js/angular.js"></script>
<script>
//通过表单验证后存数据
function Users(userData) {
this.userData=userData
}
Users.prototype.AddUser=function () {
//模拟Ajax存储数据
//先去获取localStorage中用户数据
var str=localStorage["userList"]||'[]';
//转换成json
var list=JSON.parse(str);
//保存数据到list中
//判断数据中的用户名是否重名，如果重名则不添加
for(var i=0;i<list.length;i++){
if(list[i].username===this.userData.username){
//重名则返回false
return false
}
}
list.push(this.userData)
//获取完成后再添加用户数据
localStorage["userList"]=JSON.stringify(list);
//不重名返回true
return true;
}
var app=angular.module('myApp',[]);
app.controller('sigUpCtrl',function ($scope) {
$scope.userdata={}
$scope.sigUpSubmit=function () {
//获取到真实数据以后需要将数据保存起来localStorage
// localStorage key value型保存方式 并且这种保存只能保存字符串
console.log( $scope.userdata);
//添加用户信息
var user=new Users($scope.userdata)
//保存用户信息
if(user.AddUser()){
alert('注册成功')
}else{
alert('注册失败')
}
}
})
</script>
</div>
</body>
</html>
网友评论