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> ...
随机推荐
- luogu P4183 [USACO18JAN]Cow at Large P
传送门 首先考虑N^2做法,每次从一个点出发,如果到达一个点,然后到达这个点的时间\(\le\)离这个点最近的叶子距离\(di_x\),那么答案+1,否则继续找点 这个暴力很不好优化.可以这样认为,如 ...
- tab选项卡在鼠标经过时实现切换延迟
偶然间在浏览网页时,发现这样的效果.当鼠标不经意间滑过tab时并不会切换,当鼠标停留在上面一段时候后才会切换. 个人觉得用户体验不错,优点是1.当用户只是滑过标签,并不需要切换,而此时如果切换标签需要 ...
- 洛谷P2699小浩的幂次运算
二分走一波,没想到题解的大佬做法 p_q 注意爆long long,所以先对数取一下上限 二分确定下限,然后输出 #include<stdio.h> #include<math.h& ...
- gcc -O0 -O1 -O2 -O3 四级优化选项及每级分别做什么优化
参考链接 : http://blog.csdn.net/qq_31108501/article/details/51842166 gcc -D选项的作用,声明宏 参考链接: http://blog. ...
- 【Linux】LD_PRELOAD用法
转载https://blog.csdn.net/iEearth/article/details/49952047 还有一篇博客也可以看看https://blog.csdn.net/xp5xp6/art ...
- 打印手机当前界面（位于栈顶）的activity
adb shell dumpsys activity activities | grep "Hist #0" 一般第一条就是当前页(位于栈顶)的activity
- python基础-----函数/装饰器
函数 在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. 函数的优点之一是,可以将代码块与主程 ...
- 3. Python 字典 常用办法总结
Python字典客储存任意类型的对象,如字符串.数字.元祖.列表.字典.bool等. 优点:取值方便,速度快 1.创建字典 字典由键(key)和对应值(value)成对组成. 字典也被称作关联数组或哈 ...
- 【转】实习小记－python 内置函数__eq__函数引发的探索
[转]实习小记-python 内置函数__eq__函数引发的探索 乱写__eq__会发生啥?请看代码．． >>> class A: ... def __eq__(self, othe ...
- python的pymysql使用方法【转】
前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持3.x版本. 本文测试python版本:2.6.6.m ...