angular基础巩固
angular中的模块化
//定义模块 []为依赖的模块 moduleName可以使用[]模块中定义的controller filter ..
var app=angular.module('moduleName',['moduleName1','moduleName2','commonFilter','commonDirective'])
ng-app="moduleName" //使用模块 MV* 数据和表现分离的模式
M-Model 数据
V-View 视图
C-Controller 控制层（业务逻辑） 1.angular和javascript不互通（标签里）,controller是桥梁里面可以写原生js 不互通：
一、函数不互通
eg->
//parseInt不行
<input type="text" ng-model="a"/>
<span>{{parsetInt(a)}}</span>
二、变量不互通
eg->
//访问不到b
<script>
var b=10;
</script>
</head>
<body>
<input type="text" ng-model="a"/>
<span>{{a*b}}</span>
三、事件也不互通
eg->
//onclick事件 alert函数都不行
<input type="text" ng-model="a"/>
<button onclick="alert(a)">按钮</button> //+= ++ 等普通js里的在angular里都不行
<input type="text" ng-model="a"/>
<button ng-click="a=a+=1">按钮</button> 2.angular的开发模式和传统开发模式完全不同，只需要关注数据 3.ng-clack 在模板的值还没出现之前先隐藏模板 4.anagulr里的ajax数据请求 var test=angular.module('test',[]);
test.controller('ctrl1',function($scope,$http){
//这种写法,res是整个响应对象，数据在data里
$http.get('data.json',{
"params":{"height":175},//提交的数据
responseType:"json" //解析数据为json
}).then(function(res){ //返回的数据是字符串
console.info(res.data.age+7+"成功了！")
},function(){
console.info(res.data+"失败了！")
}); //这种写法 res就是数据
$http.get('data.json',{ "params":{"height":175}}).success(function(res){
console.info(res.age+7+"成功了！")
}).error(function(){
console.info(res.data+"失败了！")
})
}) 5.ng-class和ng-style的写法 class={{}}
ng-class=arr
<div ng-init='arr=["aa","bb"];class2="cc"'>
<span ng-class="arr">1212</span>
<span class="{{class2}}">1212</span>
</div>
style={{}}
ng-style=json
<div ng-init='str={"color":"red"};str2="color:green"'>
<span ng-style="str">1212</span>
<span style="{{str2}}">1212</span>
</div> 6.ng-事件 ng-repeat 赋值不能同时出现（不能写成表达式），需要通过controller里定义函数过渡一下 <div ng-init="arr=[1,2,3,4,5];a=0">
{{a}}
<button ng-click="a=5">按钮</button>
//点击不起作用
<button ng-repeat="item in arr" ng-click="a=5">按钮{{$index}}</button>
</div> <script>
var test=angular.module('test',[]);
test.controller('ctrl1',function($scope,$http){
$scope.changeVal=function(index){
$scope.a=index;
}
})
</script>
<body ng-controller="ctrl1">
<div ng-init="arr=[1,2,3,4,5];a=0">
{{a}}
//这样就可以，通过changeVal函数桥梁中转
<button ng-repeat="item in arr" ng-click="changeVal($index)">按钮{{$index}}</button>
</div>
</body> 7.$watch监控 $scope.num=10;
$scope.arr=[1,2,3];
//监控
$scope.$watch("num",function(){
alert("监控内容发生变化！");
})
//深度监控，监控内容
$scope.$watch("arr",function(){
alert("监控内容发生变化！");
},true) 8.$apply $interval $timeout 不用angular自带的$http模块请求数据，可会发生数据不更新的问题
用原生js的setInterval setTimeout也会发生这个问题
//原生的会出现问题,需要强制更新才行
$scope.num=0;
setInterval(function(){
$scope.num++;
//强制更新
$scope.$apply();
});
//用angular自带的模块
$scope.num=0;
var timer=$interval(function(){
$scope.num++;
if($scope.num==100){
$interval.cancel(timer); //ag里的关闭定时器
}
}) 9.angular里jsonp的使用 $scope.search="";
$scope.results=[];
$scope.$watch("search",function(){
$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
params:{'wd':$scope.search,"cb":"JSON_CALLBACK"}
}).success(function(rps){
$scope.results=rps.s;
console.info( $scope.results)
}).error(function(){
alert("出错了！");
})
}); 10.angaulr过滤器的写法 test.filter("toUpperCase",function(){
//只执行一次
//可以写一些初始化操作
return function(input,args){//第二个参数是过滤器的参数
//过滤器用几次执行几次
return input.toUpperCase()+args;
}
});
<span ng-repeat="item in results">{{item|toUpperCase:'改成大写了！'}}</span> 11.指令(组件) //restrict值有ECMA 方便记 E->element元素 C->class类 M->comment注释 A->attribute属性
test.directive("aa",function(){
var config={
restrict:"E",//约束（指令激活的条件）,可以一次写多个
template:"<span>123</span>"
};
return config;
})
test.directive("bb",function(){
var config={
restrict:"A",//约束（指令激活的条件）
template:"<span>123</span>"
};
return config;
})
test.directive("cc",function(){
var config={
restrict:"M",//约束（指令激活的条件）
template:"<span>123</span>",
replace:true//注释指令比较特殊有这个值
};
return config;
})
test.directive("dd",function(){
var config={
restrict:"C",//约束（指令激活的条件）
template:"<span>123</span>"
};
return config;
})
<aa></aa>
<span bb=""></span>
<!-- directive: cc --> //两边有空格
<span class="dd"></span> //嵌入
test.directive("ff",function(){
var config={
restrict:"A",//约束（指令激活的条件）
//transclude可以是标签来激活占位<ng-transclude></ng-transclude>占位符(原始内容)
template:"<ng-transclude></ng-transclude><a href='javascript:;'>X</a>",
//transclude也可是属性来激活
//template:"<span ng-transclude=""></span><a href='javascript:;'>X</a>",
transclude:true//打开嵌入模式
};
return config;
});
<span ff="">11223343</span> test.directive("more",function(){
var config={
restrict:"E",//约束（指令激活的条件）
//<ng-transclude></ng-transclude>占位符(原始内容)
template:'<div class="{{show?\'more2\':\'more\'}}">' +
"<a href='javascript:;' ng-click='show=!show'>{{show?'收起内容':'查看更多'}}</a><ng-transclude></ng-transclude>" +
"</div>",
transclude:true//打开嵌入模式
};
return config;
}) 12.自定义依赖注入（所有的依赖项只会创建一次） var test=angular.module('test',[]);
test.controller('ctrl1',function(testFactory,testProvider,testService,testConstant,testValue){
alert(testFactory(10,20));
alert(testProvider.name);
alert(testService.petName);
alert(testConstant);
alert(testValue);
});
//1.factory
test.factory('testFactory',function(){
//return '内容(字符串、json、函数..)'
return function(num1,num2){
return num1+num2
}
}); //2.provider
//专门给外面提供东西的
test.provider('testProvider',function(){
this.$get=function(){
return {
"name":"qiezijiucai"
}
}
}); //3.service 服务
test.service('testService',function(){
this.petName='leyi';
}); //4.constant 常量
test.constant('testConstant','red'); //5.value
test.value('testValue','hello'); 13.修饰decorator //修饰(继承)，会修改原始的依赖testService $delegate指向原来的依赖项testService
test.decorator('testService',function($delegate){
$delegate.petName='new-leyi';
return $delegate;
}) 13.controller间的通信-父子controller继承
//父子controller 子级继承父级的值（只是子级在创建的时候复制了一遍父级的值），当子级修改值，父controller的值不变，父子值不同步
test.controller('parentCtrl',function($scope,$timeout){
$scope.num=10;
$timeout(function(){
console.info( $scope.num);//10
},100);
});
test.controller('childCtrl',function($scope){
$scope.num++; //11
});
<div ng-controller="parentCtrl">
{{name}}
<div ng-controller="childCtrl">
{{name}}
</div>
</div>
14.controller间的通信-父子级controller 消息机制
$scope.$emit('name','value');向父级controller和自己发送数据
$scope.$broadcast('name','value');向子级controller和自己发送数据
$scope.$on('name',function(event,data){
console.info(data); //接受数据
}) test.controller('parentCtrl',function($scope){
$scope.toChildAndSelf=function(){
$scope.$broadcast('value',100);//给子级发送数据
};
$scope.$on('value',function(v,data){
$scope.hello=data;//自己接收数据
});
$scope.$on('value2',function(v,data){
$scope.world=data;//自己接收数据
});
});
test.controller('childCtrl',function($scope){
$scope.toParentAndSelf=function(){
$scope.$emit('value2',200)
};
$scope.$on('value',function(v,data){
$scope.hello=data;
});
$scope.$on('value2',function(v,data){
$scope.world=data;
});
});
<button ng-click="toChildAndSelf()">给自己和子级发送数据</button>
{{hello}}
{{world}}
<div ng-controller="childCtrl">
<button ng-click="toParentAndSelf()">给自己和父级发送数据</button>
{{hello}}
{{world}}
</div> 15.controller间的通信-通过自定义依赖项 无关的controller的数据共享
factory service provider
test.provider('dataShare',function(){
this.$get=function(){
return {
"name":"jicaiqiezi"
}
}
});
test.controller('parentCtrl',function($scope,dataShare){
console.info(dataShare.name)
});
test.controller('childCtrl',function($scope,dataShare){ });
angular基础巩固的更多相关文章
- 第214天:Angular 基础概念
一.Angular 简介 1. 什么是 AngularJS - 一款非常优秀的前端高级 JS 框架 - 最早由 Misko Hevery 等人创建 - 2009 年被 Google 公式收购,用于其多 ...
- Angular基础---->AngularJS的使用(一)
AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...
- angular 基础练习
<!DOCTYPE HTML> <html> <head> <title> 测试页 </title> <meta charset=&q ...
- Angular基础(三) TypeScript
一.模仿Reddit a) 运行ng new –ng4angular-reddit创建应用,从随书代码中复制样式文件,新建组件app-root,代码为: 界面可以看到了: b) 对于界面输入的数据,获 ...
- Angular基础(二) 组件的使用
一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/cli@1.0.0安装CLI,为CLI的位置设置环境变量,然后就可以 ...
- angular基础入门
第一章 AngularJs入门 AngularJS是一款由Google公司开发维护的前端框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率. 1 特点 AngularJS与 ...
- Angular 基础入门
简介 什么是AngularJS 一个功能非常完备的前端框架,通过增强HTML的方式提供一种便捷开发Web应用程序的方式 其核心特点就是几乎无任何DOM操作,让开发人员的精力和时间全部集中于业务 MVC ...
- Angular基础教程：表达式日期格式化[转]
本地化日期格式化: ({{ today | date:'medium' }})Nov 24, 2015 2:19:24 PM ({{ today | date:'short' }})11/24/15 ...
- Angular基础知识
AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 ng-directives 扩展了 HTML. ...
- Angular基础（二）
双向数据 利用angular把input框里面的值和h3的值绑定在一起.在input里输入内容,内容会在h3标签里显示出来. 具体效果请看下面代码: <!DOCTYPE html> ...
随机推荐
- Flume配置Failover Sink Processor
1 官网内容 2 看一张图一目了然 3 详细配置 source配置文件 #配置文件: a1.sources= r1 a1.sinks= k1 k2 a1.channels= c1 #负载平衡 a1.s ...
- jinja模板语法
模板 要了解jinja2,那么需要先理解模板的概念.模板在Python的web开发中广泛使用,它能够有效的将业务逻辑和页面逻辑分开,使代码可读性增强.并且更加容易理解和维护. 模板简单来说就是一个其中 ...
- Luogu P2490「JSOI2016」黑白棋
我博弈基础好差.. Luogu P2490 题意 有一个长度为$ n$的棋盘,黑白相间的放$ k$个棋子,保证$ k$是偶数且最左边为白子 每次小$ A$可以移动不超过$ d$个白子,然后小$ B$可 ...
- linux学习记录.6.vscode调试c makefile
参考 https://www.cnblogs.com/lidabo/p/5888997.html task有更新,不能使用文章的代码. 多文件 终端 touch main.c hw.c hw.h vs ...
- 编写blog第一天
今天玩的比较嗨,离开学还剩半个月了,之前在网上搜集了一些blog制作方面的资料,并且在博客园注册了一个账号,今天才打开了申请已久的blog,现在已经对blog具有的基本功能和界面布局有了比较全面的掌握 ...
- P1494 [国家集训队]小Z的袜子（莫队）
题目链接:https://www.luogu.org/problemnew/show/P1494 题目大意:中文题目 具体思路:计算概率的时候,每一次是区间的移动,每一次移动,记得先将原来的记录的影响 ...
- (6)Java数据结构-- 转：JAVA常用数据结构及原理分析
JAVA常用数据结构及原理分析 http://www.2cto.com/kf/201506/412305.html 前不久面试官让我说一下怎么理解java数据结构框架,之前也看过部分源码,balab ...
- RPO攻击 & share your mind
参考文章: https://xz.aliyun.com/t/2220 http://www.thespanner.co.uk/2014/03/21/rpo/ https://www.lorexxar. ...
- POJ 1236 Network of Schools 连通图缩点
题目大意:有向图连通图,第一问求至少需要多少个软件才能传输到所有学校,第二问求至少需要增加多少条路使其成为强连通图 题目思路:利用Tarjan算法经行缩点,第一问就是求缩点后入度为0的点的个数(特殊情 ...
- python，获取用户输入，并且将输入的内容写到.txt
该功能缺点是必须保证该文件不存在的情况才会成功 f=open('E:/mywork/保存文件.txt','x') def userwrite(code): if code=='w': f.close( ...