angular学习笔记,很乱哈哈。

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:‘/‘}) //如果输入其他路径都跳到默认路径上

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

时间: 2024-08-06 03:43:54

angular学习笔记,很乱哈哈。的相关文章

angular学习笔记(八)

本篇介绍angular控制视图的显示和隐藏: 通过给元素添加ng-show属性或者ng-hide属性来控制视图的显示或隐藏: ng-show: 绑定的数据值为true时,显示元素,值为false时,隐藏元素 ng-hide: 绑定的数据值为true时,隐藏元素,值为false时,显示元素 (其实只要用到其中一个就可以了) 下面来看个简单的例子,点击按钮可以显示/隐藏元素: <!DOCTYPE html> <html ng-app> <head> <title>

angular学习笔记(二十八)-$http(6)-使用ngResource模块构建RESTful架构

ngResource模块是angular专门为RESTful架构而设计的一个模块,它提供了'$resource'模块,$resource模块是基于$http的一个封装.下面来看看它的详细用法 1.引入angular-resource.min.js文件 2.在模块中依赖ngResourece,在服务中注入$resource var HttpREST = angular.module('HttpREST',['ngResource']); HttpREST.factory('cardResource

angular学习笔记(五)-阶乘计算实例(1)

<!DOCTYPE html> <html ng-app> <head> <title>2.3.2计算阶乘实例1</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="script.js"></script> </

angular学习笔记(二十三)-$http(1)-api

之前说到的$http.get和$http.post,都是基于$http的快捷方式.下面来说说完整的$http: $http(config) $http接受一个json格式的参数config: config的格式如下: { method:字符串 , url:字符串, params:json对象, data:请求数据, headers:请求头, transformRequest:函数,转换post请求的数据的格式, transformResponse:函数,转换响应到的数据的格式, cache:布尔

angular学习笔记(二十七)-$http(5)-使用$http构建RESTful架构

在angular中有一个特别为RESTful架构而定制的服务,是在$http的基础上进行了封装. 但是为了学习,我们先看看用直接$http是如何构建RESTful架构的: 假设有一个银行卡的列表.需要的功能有: 可以通过id来获取用户123的指定id的卡     'GET'  'card/user/123/id' 可以获取用户123的所有的银行卡             'GET'  'card/user/123' 可以更新用户123的指定id的卡                'POST' '

angular学习笔记(九)-css类和样式3

再来看一个选择li列表的例子: 点击li中的任意项,被点击的li高亮显示: <!DOCTYPE html> <html ng-app> <head> <title>6.3css类和样式</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="scri

angular学习笔记(九)-css类和样式2

在上一个例子中,元素的类名使用拼接的方法,这样,类名中就不得不带有true或false,并且不易维护,所以,angular使用ng-class属性来控制元素的类名: 我们来看一个小例子,点击error按钮,顶部提示错误框,点击warning按钮,顶部提示警告框. 错误框的类名是.err,警告框的类名是.warn: <!DOCTYPE html> <html ng-app> <head> <title>6.2css类和样式</title> <

angular学习笔记(一)

入门实例: 一个购物车产品清单,可以自行改变数量,总价自动计算的小例子: 代码如下: <!DOCTYPE html> <html ng-app> <head> <title>1.1实例:购物车</title> <meta charset="utf-8"> <script src="../angular.js"></script> <script src="

angular学习笔记(二十六)-$http(4)-设置请求超时

本篇主要讲解$http(config)的config中的timeout项: $http({ timeout: number }) 数值,从发出请求开始计算,等待的毫秒数,超过这个数还没有响应,则返回错误 demo: html: <!DOCTYPE html> <html ng-app = 'HttpGet'> <head> <title>18.4 $http(2)</title> <meta charset="utf-8"

angular学习笔记(十九)

本篇主要介绍angular使用指令修改DOM: 使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用. 与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令: var someModule = angular.module('SomeModule',[]); someModule.directive('directiveName',function(){ return { link: f