angularJS
K'illCode
记录自己的学习历程,大部分来自转载,如有侵权联系删除.......
展开
-
AngularJs的$cacheFactory的缓存实例
AngularJs的$cacheFactory的缓存实例,代码及注释如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>$cacheFactory的缓存实例</title>06原创 2018-02-09 14:00:39 · 451 阅读 · 0 评论 -
AngularJs函数之大小写转换、对象深拷贝、对象扩充、数据遍历
1、打印AngularJs的版本号:1var m = angular.module('app', []);2m.controller('ctrl', ['$scope', function($scope){3 console.log(angular.version);4}]);2、大小写转换:1var m = angular.module('app', []);2m.controller('...原创 2018-02-12 18:36:33 · 554 阅读 · 0 评论 -
AngularJs将json字符串转为对象fromJson和将对象转为json字符串toJson
在AngularJs中,json形式的字符串可以转为json格式的对象,代码如下:利用HTML5的2种本地存储方式(localStorage和sessionStorage)来做测试:01var m = angular.module('app', []);02m.controller('ctrl', ['$scope', function($scope){03 $scope.data = {'...原创 2018-02-12 18:36:42 · 5169 阅读 · 0 评论 -
AngularJs中的数据比较函数
下面是总结的部分AngularJs的比较函数:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Document</title>06 <style type=&quo原创 2018-02-12 18:37:18 · 940 阅读 · 0 评论 -
AngularJs使用ng-repeat实现数据循环展示的效果
一般情况下,后端给前端传输数据,前端都是用foreach来循环输出,现在使用AngularJs也能实现类似的功能,方法如下:01<!doctype html>02<html lang="en">03 <head>04 <meta charset="UTF-8">05 <title>Document原创 2018-02-12 18:37:40 · 3157 阅读 · 0 评论 -
AngularJs使用ng-repeat实现数据循环展示的效果
一般情况下,后端给前端传输数据,前端都是用foreach来循环输出,现在使用AngularJs也能实现类似的功能,方法如下:01<!doctype html>02<html lang="en">03 <head>04 <meta charset="UTF-8">05 <title>Document原创 2018-02-12 18:37:48 · 862 阅读 · 0 评论 -
AngularJs使用ng-model-options设置数据同步时机提高网站性能
之前讲过ng-model可以实时改变数据,实现双向数据绑定,但是如果数据是联通后台的,那么当就会实时与后台进行交互,肯定会增加后台的压力,影响性能,比如以下代码:1<input type="text" ng-model="data"/>2<p>{{data}}</p>因为它的数据是实时更新的,这里可以用一个指令:ng-model-options来解决。第一种:n...原创 2018-02-12 18:37:54 · 351 阅读 · 0 评论 -
AngularJs使用ng-checked一步实现全选或取消功能
AngularJs使用ng-checked一步实现全选或取消功能,代码如下:01<!doctype html>02<html lang="en">03<head>04 <meta charset="UTF-8" />05 <title>Document</title>06 &l原创 2018-02-12 18:38:02 · 1364 阅读 · 0 评论 -
AngularJs通过ng-class动态改变样式类实例操作
AngularJs通过ng-class动态改变样式类实例操作,代码如下:查看源码打印代码帮助01<!doctype html>02<html lang="en">03<head>04 <meta charset="UTF-8" />05 <title>Document</title>06转载 2018-02-12 18:38:12 · 2617 阅读 · 0 评论 -
AngularJs表达式与ng-bind及ng-cloak解决闪屏问题解决方案
使用AngularJs获取数据之后,可以使用双花括号表达式或者是ng-bind指令把数据添加到html中,但是这里涉及到一个前端页面渲染与性能的问题。如果把js文件放在head头部,这时用户网络不好或者是js文件太大一时加载不完,就会出现页面混乱的局面。所以,一般情况下,我们是把js文件放在html页面的底部,等html和css加载完成之后再来执行js代码,但是在body体中要从Angul转载 2018-02-07 10:13:21 · 352 阅读 · 0 评论 -
AngelarJS学习笔记1
基本定义:1.ng-app = "" 定义了angularJs的使用范围;2.ng-init = "变量 = 值;变量 = '值'" 初始化变量的值,有多个变量时,中间用分号隔开;3.ng-model = "变量" 定义变量名;4.ng-bind = "变量" 绑定变量名,获取该变量的数据。这里的变量就是第3条的变量名。但是一般都用双重花括号来获取变量的值,比如:{{变量}};原创 2018-02-07 10:10:23 · 3430 阅读 · 0 评论 -
AngularJs中的双向向数据绑定(MVVM)与表单处理相关指令
一、什么是双向数据绑定?AngularJs有一个很强大的功能就是双向数据绑定,即MVVM,什么是双向数据绑定呢?在一般的应用当中,后端给前端返回数据,前端数据发生改变,如果不做表单或者是ajax数据提交,这些数据是不会及时返回给后端的,也就是单向数据绑定,而AngularJs能做到双向数据绑定,数据从模型->视图->视图->模型,这样一个过程,看下面这段代码:转载 2018-02-07 10:16:32 · 241 阅读 · 0 评论 -
uiRouter路由定义高效的父子级嵌套路由
在项目开发中会到这样的需求,在导航中,有的点击需要在本页面中切换,有的点击需要跳转到其他页面(比如点击登录、注册等),ui-router为我们很方便的解决了这个问题,代码如下:main.html中的代码:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 ...转载 2018-02-08 13:56:58 · 728 阅读 · 0 评论 -
AngularJs之ui.router路由基本配置及传参方法
使用AngularJs可以方便的做出单页面应用,既然是应用,那就涉及到页面跳转的问题,使用Angularjs的路由插件可以方便的使用路由功能,而且可以传参非常容易。代码如下:路由插件:angular-ui-router.js。文件:index.html01<!DOCTYPE HTML>02<html lang="en">03<head>04 <met...原创 2018-02-08 13:57:30 · 3276 阅读 · 0 评论 -
AngularJs通过service自定义服务
与factory类似,AngularJs也可以通过service来自定义服务,只是在return返回数据的写法上稍有不同,具体代码如下:HTML部分:01<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-cloak">02 <table cellpadding="0" cellspacing="0"转载 2018-02-08 13:57:41 · 370 阅读 · 0 评论 -
通过AngularJs自定义服务实现代码共用实例
通过AngularJs自定义服务实现代码共用实例:html部分:01<body ng-app="app">02 <div ng-controller="ctr2">03 <table cellpadding="0" cellspacing="0">04 <thead>05原创 2018-02-08 13:57:52 · 337 阅读 · 0 评论 -
AngularJs之自定义服务实现多个控制器之间的数据共享
AngularJs之自定义服务实现多个控制器之间的数据共享,在同一页面当中,多处用到同一个数据,一般情况下我们需要重复写很多次代码,但是使用Angular提供的自定义服务,可以只写一次代码,提供给很多模块和控制器使用,这样可以减少代码沉兑。具体代码如下:html部分:01<body ng-app="app">02 <div ng-controller="ctr1">0...转载 2018-02-08 13:58:02 · 569 阅读 · 0 评论 -
AngularJS使用ng-style动态改变样式
AngularJS使用ng-style动态改变样式,代码如下:01<!doctype html>02<html lang="en">03<head>04 <meta charset="UTF-8" />05 <title>Document</title>06 <style转载 2018-02-12 18:04:34 · 2931 阅读 · 0 评论 -
AngularJs的事件处理指令详解
AngularJs的事件处理指令测试如下:今天统一用到的JavaScript代码如下:1var m = angular.module('app', []);2 m.controller('ctrl', ['$scope', function($scope){3 $scope.data = '赵一鸣技术博客';4 $scope.func = function(){5...转载 2018-02-12 18:04:29 · 414 阅读 · 0 评论 -
AngularJs中的过滤器使用方法总结
第一种:通过表达式进行过滤过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。1、uppercase 过滤器将字符串格式化为大写:2、lowercase过滤器将字符串格式化为小写:1{{name|lowercase|uppercase}}3、currency 过滤器将数字格式化为货币格式:1{{price|currency:'$':1}}参数$和1是可选的,第一个参数是自定义字符,第二个参...原创 2018-02-12 18:04:23 · 744 阅读 · 0 评论 -
AngularJs的$sce服务安全的处理html数据
为了提升网站的安全性,避免恶意代码注入,AngularJs提供了相应的解决方案,测试代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>$sce服务安全的处理html数据</title&原创 2018-02-09 14:00:47 · 378 阅读 · 0 评论 -
AngularJs中的$window服务的实例
AngularJs中的$window服务,和JS中的window一样,测试代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>$window服务的实例</title>06&原创 2018-02-09 14:00:54 · 790 阅读 · 0 评论 -
AngularJs中$timeout与$interval实际使用场景分析
AngularJs中$timeout与$interval实际使用场景分析,类似于原生js中的setTimeout和setInterval,测试代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>$timeo原创 2018-02-09 14:01:04 · 492 阅读 · 0 评论 -
AngularJs使用$scope.$apply()进行数据脏检查
$apply()函数可以从Angular框架的外部让表达式在Angular上下文内部执行。例如,假设你实现了一个setTimeout()或者使用第三方库并且想让事件运行在Angular上下文内部时,就必须使用$apply()。简而言之,使用$scope.$apply()时可以从外部进入上下文。如果在事件被触发时调用$apply(),就会使用Angular事件循环来运行它。如果没有调用$apply(...原创 2018-02-09 14:03:13 · 411 阅读 · 0 评论 -
通过AngularJs实现Tab选项卡切换效果
通过AngularJs实现Tab选项卡切换效果,代码如下:文件一:3.html:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Document</title>06</h转载 2018-02-09 14:03:23 · 1158 阅读 · 0 评论 -
AngularJs的directive指令的link属性详解
在AngularJs中不能直接使用JQuery去选择dom元素,它在指令directive中提供了link属性来让开发者操作dom,具体代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Document&原创 2018-02-10 10:46:52 · 1417 阅读 · 1 评论 -
AngularJs中自定义指令directive的controller属性
controller是AngularJs中的控制器,在控制器里边可以接受后台的数据,并且定义变量显示给前端,controller也可以作为自定义指令directive的属性存在,代码如下:1.html中的代码:01<!doctype html>02<html lang="en">03<head>04 <meta charset="UTF-8" /&g...原创 2018-02-10 10:47:00 · 346 阅读 · 0 评论 -
AngularJS中scope隔离作用域之=&调用父作用域中函数
AngularJS中scope隔离作用域之=&调用父作用域中函数,代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Document</title>06&转载 2018-02-10 10:47:17 · 658 阅读 · 0 评论 -
AngularJs之scope隔离作用域之=双向文本绑定
AngularJs之scope隔离作用域之=双向文本绑定,代码如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Document</title>06</head&am转载 2018-02-10 10:47:25 · 238 阅读 · 0 评论 -
AngularJs之scope隔离作用域之@单向文本绑定
上一节说到,在指令中设置scope属性的值为花括号{},可以切断它与其他控制器之间的联系,如果在html中很多地方都使用到了这个指令,有的需要建立与控制器的联系,有的不需要,这个时候该怎么办呢?我们可以通过传值的方式来做到。比如以下代码:html部分:1<div ng-app="app" ng-controller="ctr1">2 <input type="text" n...转载 2018-02-10 10:47:31 · 256 阅读 · 0 评论 -
AngularJs中指令的scope作用域分析
AngularJs自定义一个指令,并且这个指令的内容是引用某个控制器的数据,那么控制器变量发生变化,也会引起指令内容的变化,同样的,如果指令通过ng-model改变值,控制器里边的变量内容也会发生改变。但是有些情况下,我们不需要这样去同步数据,通过设置指令属性scope可以解决这个问题:html部分:1<div ng-app="app" ng-controller="ctr1">2 ...转载 2018-02-10 10:47:42 · 309 阅读 · 0 评论 -
AngularJs之controller控制器scope父子集作用域实例
AngularJs的作用域问题,如果之前很好的学习并应用过JavaScript,那么对作用域、作用域链以及闭包的概念肯定不会陌生,总之一句话就是:子级可以访问父级的变量和对象,但父级无法访问子级的任何变量和对象。如下代码:1function fn1(){2 var obj1 = {name : 'K`illCode个人技术博客'};3 function fn2(){4 c...原创 2018-02-10 10:47:50 · 333 阅读 · 0 评论 -
AngularJs通过directive和restrict自定义指令
一、AngularJs自定义指令directive的restrict属性说明:今天公用的html部分:1<h1 zym-blog></h1>JavaScript部分:1var m = angular.module('app', []);2m.directive('zymBlog', [function(){3 return {4 restrict : '...转载 2018-02-10 10:47:57 · 970 阅读 · 0 评论 -
AngularJs自定义过滤器的方法
AngularJs提供了自定义过滤器的方法,如果现有的过滤器不能完全支持业务需求,那我们可以通过扩展的方法来实现:比如我要把一个手机号的后3位数字变成【*】星号,代码如下:查看源码打印代码帮助01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <转载 2018-02-12 18:04:02 · 279 阅读 · 0 评论 -
AngularJS使用$watch与$filter过滤器制作数据筛选实例
AngularJS使用$watch与$filter过滤器制作数据筛选实例,代码如下:在搜索框中输入不同文字,然后表格中展示相应的搜索结果:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Title<原创 2018-02-12 18:04:10 · 255 阅读 · 0 评论 -
AngularJs通过$scope和$watch监听数据变化
AngularJs通过$scope和$watch可以检测数据的变化,从而提醒用户进行正确的操作,具体方法如下:01<!DOCTYPE html>02<html lang="en">03<head>04 <meta charset="UTF-8">05 <title>Title</title>原创 2018-02-12 18:04:16 · 979 阅读 · 0 评论 -
AngularJs之$http服务前端与后端之间的数据传输
AngularJs中的$http服务实现前端与后端之间的数据传输,与JQuery中的ajax类似,具体代码如下:1、接收后端数据:需要用到的php代码,文件名为1.php:1<?php2 header('Content-type:text/html;charset="utf-8"');3 4 $arry = array(5 array('webname'=>'...转载 2018-02-08 13:58:10 · 942 阅读 · 0 评论