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> ...
随机推荐
- 第27月第18天 epoll lt et
1. While the usage of epoll when employed as a level-triggered interface does have the same semantic ...
- 第26月第18天 mybatis_spring_mvc
1. applicationContext.xml 配置文件里最主要的配置: <?xml version="1.0" encoding="utf-8"? ...
- Flask表单(form)的应用
导入模块request模块 #指定请求方式,使用methods属性 @app.route("/",methods=['GET','POST']) def index(): #判断c ...
- Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客
==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...
- vue 学习笔记—Resource
1.首先是引入 或者用npm来安装 cnpm i vue-resource --save(推荐) 3.提供的api 关于请求写法: get(){ // get请求 this.$http.get( ...
- openstack Q版部署-----界面horizon安装（9）
一.界面的安装 控制节点安装软件包: yum install openstack-dashboard -y [root@linux-node1 ~]# vim /etc/openstack-dashb ...
- Debian9 使用 Docker 安装 gitlab完整过程
一. 安装Docker CE (参考 官网指南) 1. 卸载老版本 sudo apt-get remove docker docker-engine docker.io 2. Update the ...
- HBSX2019 3月训练
Day 1 3月有31天废话 今天先颓过了就只剩30天了 初步计划 每天一道字符串/数据结构题 图论学习 根据<若干图论模型探讨>(lyd)复习 二分图与网络流学习 <算法竞赛进阶指 ...
- 2018 Multi-University Training Contest 2 杭电多校第二场
开始逐渐习惯被多校虐orz 菜是原罪 1004 Game (hdoj 6312) 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6312 虽然披着 ...
- 应急响应-GHO提取注册表快照
前言 备份文件.gho中找到机器的注册表 文件夹位置 在 C:\WINDOWS\SYSTEM32\CONFIG 下就是系统的注册表,一般情况下,这里面会有以下几个文件: default 默认注册表文件 ...