1.鼠标悬浮出现的信息
v-bind:title="message"

2.对该便签进行结果判断显示隐藏
v-if=‘’
控制台设置 app3.seen = false（消失）、
控制台设置 app3.seen = true（显示）

3.遍历数据动态生成列表
v-for=’属性 in data‘

4.指令绑定一个监听事件用于调用
v-on ：click=’执行函数‘

difine 第一 exports出口输出 require需求 seajs。use使用命令

config统一路径 alias简化路径 container容器
---------------------------------------------------------------------------------------------------------
angular框架笔记

----------------------------------------------------------------------------------------------------------

angular.module...('aapp',[]);
...
angular.module...('bapp',[]);
...
angular.module模块/组建（‘capp’,['aapp','bapp']）[除第一个外，其他都是模块module的名称]
controller控制器
config 配置
factory数据（服务）
direvite（指令）
run 小程序

bootstrap指令
angular.bootstrap(document,['demo'])--
把demo模块（一般先把所有模块注入到一个主模块，然后用主模块）
作用于document（文档对象）这个对象里

多模块操作（先把所有模块用scrope>src ./xxx的模式引入HTML文件，然后再创建一个scrope里面
放主模块，并把其他模块注入主模块中。）

模块组织方式（根据控制器的种类）：1、按整体（建议使用，方便找文件）2、按逻辑（按控制器的种类归类）

查找模块：angular.module('模块名')；创建模块: angular.module('模块名',[注入的其他模块（也叫依赖）]);

主模块：可在第二个参数注入功能。
依赖：与注入一起；注入的内容为对象，需要的称该对象为依赖对象
ng控制器--注入式--：$window\$scrope\$interval(控制器函数参数--依赖对象--)注入这些依赖对象
就可以使用里面的属性、方法。---作用域范围\
----------------------------------------------------------------------------------------------------------------------------------------
$scrope---1.继承性（当前$scrope的方法找不到就向上一级找，直到$rootscrope）
2.真正操作的是$scrope而不是控制器
3.有几个控制器就有几个$scrope

$rootScope:出现ng-app时没有创建控制器时系统默认创建的
$scope.$array 异步请求中使ng强行同步，用于setInterval事件
$scope.$watch监听--第一个参数（监听那个变量）第二个参数是一个函数(参数1当前值，参数2之前值，参数3是$scrope)，
当监听量值发送变化，就调用该函数。
$scrope.name/ng-name(name是scrope的属性）属性：可以获取值/赋值

$scope 该控制器controller中的HTML元素数据ng-xxx组合的对象
$scope.xxx设置该控制器中ng-xxx的数据（设置$scope对象的属性进行HTML的逻辑处理）

{{}}/ng-xxx---都是angular的表达式
------------------------------------------------------------------------------------------------------------------------
指令：direcitve
ng-model---获取该标签内容
ng-init---初始化某个属性abc='abc'{{abc}}--输出结果为abc;
ng-message---{{message}}--括号里的信息

ng-click---(func(执行函数))---给$scrope对象添加点击事件

内置指令##
ng-bind/ng-bind-html(绑定):表达式不会处理><等字符ng-bind-html(查文档)
------------------//把<div>{{input}}</div>替换成<div ng-bind='input'></div>----消除刷新闪动

ng-cloak：消除闪动、
---------------//<body ng-app ng-cloak>

ng-repeat---遍历datas数据并把属性值给对象：item in datas/(key,vlue) in datas

ng-class---取值一个对象{类名：值，类名：值，...}改名字颜色案例为真：具有改样式，为假：不具备
该属性。
-----------------//ng-class{ classright:'条件表达式',classwrong:'条件表达式'}

ng-change---跟随变量改变当前的值

ng-hide,
ng-show,
ng-if:判断‘值‘后为true就执行

ng-href,
ng-src:引入图片/链接路径
-----------------//ng-src='{{}}'

ng-checked（选框）/ng-disabled（显示）/ng-readonly/ng-selected（选择）:都是判断表达式的值，为true就执行执行表达式
ng-blur(获取焦点)/ng-change(改变)/ng-copt(复制)/ng-click(选择)/ng-dbclick()/ng-focus(获取焦点)/ng-submit(提交)

第三方指令-----
angular-ui.github.io

自定义指令directive：（属性、节点）增、删、改、查
ng-click='btn()'---查
ng-if='变量'--删除
ng-class='{...}'---修改
ng-repeat-----增加标签

-----------------------------------------------------------------------------------------------------------------------------------
1.定义分模块('主模块名.分模块名',[])
2.进行自定义指令.directive('自定义表签名','函数')
函数：function(){
return{transclude:true,replace:true,restrict:'E',scope:{},controller:(添加templateUrl文件的控制器)
template:'字符串 <div ng-transclude>......<li ng-transclude>'}
}
指令对象属性####
1.transclude(只能按我们意思输出 )
2.replace(是否使用模板的HTML替换含有指令的标签)
3.templateUrl(引入地址：文件是HTML)
4.scope（指令是'独立的'不与父节点的scope混淆）
5.restrict：(把HTML标签用自定义的一个标签替换)取整E：元素/A：属性/C：类/M：注释

最后，把分模块注入到主模块中[]

-----返回处理对象的方法

控制器要写成函数形式，注入写法
语法：（'控制器名称',['$服务','$服务','$服务',...,function(){}]）

工具：
安装服务器-- npm -g install http-server
browser-sync -- npm -g install browser-sync

.config（start before--放provider<创建对象的对象>指令）:配置器---在程序运行前需要执行的事情(路由)
.run(start after):优先运行/初始化/运行器---在程序运行时进行执行. .run(['$rootScope',function($rootScope){...$rootScope.xxx...}])
.filter过滤器(此操作之前要引入angular-locale插件)：{{money|currency：钱的符号/number：数字位数/data:日期时间}}

-------------------------------------------------------------------------------------------------------
自定义UI库
例如：把bootstep的按钮HTML代码复制到一个js文件，里面设定每个按钮不同的样式 ，再在index文件
把该js文件定义为一个自定义指令，封装成一个模块，再注入主模块，就可以在index.html里重复使用了。

-----------------------------------------------------------------------------------------------------
服务：提供功能的$xxxx就是服务
例如$rootscrope/$scrope/....($rootscrope 以内的)
常见的服务：$http/$http.get(url).then发送请求，获取url对象----$http.jsonp('url/search/angular?callback=JSONP_CALLBACK').then(function(){},function(){})
$log/
$location/
$window/
$timeout/
$interva----$interva.cancel停止计时器指令

---------------------------------------------------------------------------------------------------------
###创建服务：
1.服务就是一个对象（广义，一个数字也是）一个可以被注入进来的对象
2.使用语法---创建基于$xxxx的服务（把本来有的服务，再添加功能组成新的服务）
、、、
模块.factory('服务名字',['基于$xxxx','...','',''function(){})]
retrun 对象;
);
3.
-----------------------------------------------------------------------------------------------
路由：实现单页面的核心内容（单页面应用程序），可以修改锚地址后切换页面信息
url解析：
1.indexOf('#'),slice()
2.正则
3.利用a标签ahref=window.location.herf;
使用方法：1.应用路由模块（['ngRout'])-------在页面中准备一个容器<ng-view></ng-view>
2.在config方法中配置路由数据
*<script src='./js/angular-route.js'></script>引入路由js文件
*利用注入语法注入$routeProvider对象
*$routeProvider 有两个方法when()---相当与case,otherwise()---相当于defout
*参数：hash(不带#)---相当于swicth
tempolateUrl/tempolate属性
基本语法：相当于swich...case
angular.module('mainApp',[])
.config(function($routeProvider){
$routeProvider
.when('/',{
template:'<div>111</div>'
})
.when('/a',{
template:'<div>111</div>'
})
.when('/b',{
template:'<div>111</div>'
})
.otherwise({redirectTo:'/'})

})
3.触发路由的行为需要使用a标签
<a href='#/'>信息</a>
---------------------------------------------------------------------------------------------------
*<a href='#/a'>a</a>
*<a href='#/b'>b</a>
*<a href='#/c'>c</a>
*<ng-view></ng-view> //在页面中准备一个容器
*<script src='./js/angular-route.js'></script> //引入路由js文件
*angular.module('mainApp',[]) //创建模块
.config(function($routeProvider){ //定义路由
$routeProvider
.when('/',{
template:'<div>111</div>'
})
.when('/a',{
template:'<div>222</div>'
})
.when('/b',{
template:'<div>333</div>'
})
.when('/c',{
templateUrl:'/a.html'
})
.otherwise({redirectTo:'/'}) //如果输入其他路径都跳到默认路径上

})
运行要启动服务器，才能运行
-----------------------------------------------------------------------------------------------------

angular学习笔记，很乱哈哈。的更多相关文章

  1. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  2. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  3. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  4. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  5. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  6. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  7. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  8. angular学习笔记(三十)-指令(2)-restrice,replace,template

    本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: ...

  9. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

随机推荐

  1. iOS 自定义emoji表情键盘

    之前走了很多弯路,包括自己定以emoji表情,自己创建view类去处理图文混排 ,当把这些焦头烂额的东西处理完了才发现 ,其实系统自带键盘是如此的方便,iOS 系统自带的表情在view,textfie ...

  2. POJ 1637 Sightseeing tour （混合图欧拉路判定）

    Sightseeing tour Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 6986   Accepted: 2901 ...

  3. C#中using关键字的作用及用法

    using的用途和使用技巧. 1.  引用命名空间 2.  为命名空间或类型创建别名 3.  使用using语句 1.  引用命名空间,这样可以在程序中引用命名空间的类型而不必指定详细的命名空间. a ...

  4. C# 获取MAC地址

    /********************************************************************** * C# 获取MAC地址 * 说明: * 在C#中获取本 ...

  5. HC蓝牙模块测试AT指令搭建外部电路遇到的问题

    按这个搭,AT指令烧不进去,两块板两次都不行. 这是我的底板(比较混乱的万能版) 第一次短路了,VCC和GND在板子下面连起来了,肉眼当然看不见,吹下来重新焊就好了. 第二次,txdrxd与usb转T ...

  6. windows 下mysql每日定时备份的几种方法

    第一种:新建批处理文件 backup.dat,里面输入以下代码:  代码如下 复制代码 net stop mysql xcopy "C:/Program Files/MySQL/MySQL ...

  7. mm/mmap.c

    /* *    linux/mm/mmap.c * * Written by obz. */#include <linux/stat.h>#include <linux/sched. ...

  8. Python for loop and while loop

    #!pyton2 #-*- coding:utf-8 -*- for letter in "Python": print "Current letter is:" ...

  9. [Spring MVC] - SpringMVC的各种参数绑定方式

    SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: @RequestMapping("saysth.do") publi ...

  10. 2016中国VR开发者论坛第一期

    由VR界网和暴风魔镜联合举办的2016中国VR开发者论坛第一期已于3月2日下午5点在吉林动画学院圆满落幕,本次论坛云集了VR相关领域的精英,邀请了VR社交<极乐王国>.暴风魔镜.南京睿悦. ...