2018年05月_极地雪狼li

原创 $rootScrope以及和$scope的区别？及表达式 {{yourModel}}的工作原理

通俗的说$rootScrope 页面所有$scope的父亲。1.Angular解析ng-app然后在内存中创建$rootScope。2.angular回继续解析，找到{{}}表达式，并解析成变量。3.接着会解析带有ng-controller的div然后指向到某个controller函数。这个时候在这个controller函数变成一个$scope对象实例。表达式{{yo...

2018-05-29 09:40:48 956

原创 angular1.x 至少三种实现不同模块之间通信方式？以及改善Angular 性能

Service events,指定绑定的事件使用 $rootScope controller之间直接使用$parent,$$childHead等 directive 指定属性进行数据绑定改善Angular 性能官方提倡的，关闭debug,$compileProvidermyApp.config(function ($compil...

2018-05-29 09:04:20 1859

原创 Angular1.x中 Directive中restrict 中分别可以怎样设置？scope中@,=,&有什么区别？

restrict中可以分别设置:A匹配属性E匹配标签C匹配classM匹配注释（简便记忆 ECMAscript ）在scope中，@,=,&在进行值绑定时分别表示@获取一个设置的字符串，它可以自己设置的也可以使用{{yourModel}}进行绑定的;=双向绑定，绑定scope上的一些属性；&用于执行父级scope上的一些表达式，常见我们...

2018-05-29 08:57:15 1525

原创 DOCTYPE的作用，取值与区别

在学习html时没有特别关注写在头部的doctype,只知道那是声明文档类型用的，昨天被阿里的面试官问到doctype有几种类型，一下答不上来，之后通过查阅资料，决定整合一下自己所看到的关于doctype的理解。DOCTYPE是document type(文档类型的）的简写。用来说明你用的是XHTML获HTML是什么版本。<strong>DOCTYPE声明必须放在每一个XHT...

2018-05-27 21:40:04 322

原创 CSS基础（三）：w3c盒子模型和ie盒子模型

盒子模型，英文即box model。无论是div、span、还是a都是盒子。但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。盒子中的区域一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：content ：包括width和height：内容的宽度、高度（...

2018-05-27 19:14:31 295

原创 CSS引入的方式有哪些? link和@import的区别是?

有 4 种方式可以在 HTML 中引入 CSS。1.内联方式内联方式指的是直接在 HTML 标签中的style属性中添加 CSS。示例：<div style="background: red"></div>这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个<div>拥有相同的样式，你不得不重复地为每个<di...

2018-05-25 23:03:28 807

原创 css背景相关的样式

一、background-origin 设置元素背景图片的原始起始位置。语法：background-origin ： border-box | padding-box | content-box;参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。二、background-clip 用来将背景图片做适当的裁剪以适应实际需要。用来将背景图片做适当的裁剪以适应实际...

2018-05-25 08:59:29 208

原创 angularjs中的几种服务的详解

在一个分层良好的 Angular 应用中，Controller 这一层应该很薄。也就是说，应用里大部分的业务逻辑和持久化数据都应该放在 Service 里。为此，理解 AngularJS 中的几个 Provider 之间的区别很有必要。Provider 创建的新服务都可以用来注入。包括：providerfactoryserviceconstantvaluepr...

2018-05-24 23:34:18 313

转载 AngularJs $location获取url参数

$location服务解析在浏览器地址栏中的URL（基于window.location）并且让URL在你的应用中可用。改变在地址栏中的URL会作用到$location服务，同样的，改变$location服务也会改变浏览器的地址栏。（可以使用$location进行重定向等操作）$location服务：暴露浏览器地址栏中的URL，让你可以：监察URL。改变URL。与浏览器同步URL，...

2018-05-24 23:21:34 1863

转载 angularjs页面的跳转与传参

方法一：location.href第一个界面:布局 <li ng-repeat="remindItemData in remindListData" ng-click="goto(remindItemData)"> //do somgthing</li>第一个界面:js跳转方法$scope.goto=function (msg) { var hre = 'rem...

2018-05-24 23:19:40 1712 1

原创 CSS基础（六）：浮动深入

浮动在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。CSS中有float属性，默认为none，也就是标准流通常的情况。如果将float属性设置为left或right，元素就会向其父元素的左侧或右侧紧靠，同时默认情况下，盒子的宽度不再伸展，而是根...

2018-05-24 14:13:19 172

原创 CSS基础（五）：定位

CSS定位机制CSS 有三种基本的定位机制：相对定位、浮动和绝对定位。相对定位相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。如果将box2的框 top 设置为 50px，那么框将在原位置顶部下面 50 像素的地方。如果 left 设置为 20 像素，那么会在元素左边创建 20 像素的空间，也就是将元素向右移动。只要bo...

2018-05-24 14:10:04 167

原创 CSS基础（四）：盒模型

CSS盒模型HTML文档中可以将每个元素都看作是长方形的盒子。而CSS盒模型规定了元素框处理元素内容content、内边距padding、边框border和外边距margin的方式。下图是W3C对于盒模型的描述图。使用Firebug，可以轻松地查看到盒子的布局大小。盒子本身的大小是这样计算的：width:width + padding-left + padding-rig...

2018-05-24 14:08:44 157

原创 CSS技巧（二）：CSS hack

什么是CSS hackCSS hack由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。CSS hack分类hack主要分为CSS选择器hack、CSS属性ha...

2018-05-24 14:05:51 218

原创 CSS技巧（一）：清除浮动和兼容性处理

浮动的定义：使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）清楚浮动用到的css属性clearclear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素clear:both：在左右两侧均不允许浮动元素...

2018-05-24 11:39:35 1034

转载 ES6---箭头函数与function定义函数有什么区别？在箭头函数中，this指向，构造函数，变量提升是如何表现的？

简洁///function定义函数function aaa(a,b){ return a+b;}///箭头函数定义函数var aaa=(a,b)=>{return a+b;}1234567this指向function传统定义的函数，this指向随着调用环境的改变而改变，而箭头函数中的指向则是固定不变，一直指向定义环境的。///function定义函数中的this指向fu...

2018-05-22 23:34:49 595

原创将一个div水平垂直居中的6种方法

方案一：div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持div{ width: 200px; height: 200px; background: green; position:absolute; left...

2018-05-22 23:00:49 21297

转载布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

一、静态布局（static layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。2、设计方法　　PC：居中布局，所有样...

2018-05-22 22:53:24 5524

转载前端性能优化方法总结

前端性能优化（一）前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省...

2018-05-22 10:00:13 2841

原创 Web前端单词大全（html+css+js+vue）

style 修饰width 宽度height 高度title 想说明的text-align 水平对齐方式center 居中 left 居左 right 居右line-height 垂直对齐方式/行高当行高等于高度时候垂直居中background 背景image 引入背景图片(url)background-position：背景定位(x轴，y轴；)background-re......

2018-05-18 12:47:03 52070 49

原创 angular使用下拉框+表单

在使用angular的过程中，遇到了很多需要操作下拉框的需求，特地总结一下第一种查询页面查询页面就是给一个下拉框，选项从数据库中来，每一次改变还可以联动使其他的下拉框跟着改变<label class="col-sm-2 control-label">一级部门</label><div class="col-sm-2"><sele...

2018-05-15 12:55:20 3240

转载 angular1.x上传文件

前台是Angular页面后台使用SpringBoot/SpirngMVC上传文件html<div> <input id="fileUpload" type="file" /> <button ng-click="uploadFile()">上传</button></div&a

2018-05-13 13:09:26 1748

原创 angularJS自定义指令各配置项详解

指令详解一个指令的定义应当是如下这个样子：code：angular.module('myApp', []) .directive('myDirective', function (UserDefinedService) { // 指令定义放在这里 });其中，fun中的注入参数为angular自带或用户定义的服务，需要在指令内部中调用。...

2018-05-04 18:43:14 619

原创 Angular1.x实现分页和分页算法

页面HTML代码： <ul class="pagination" style="margin: 0px;" > <li ng-class="{true:'disabled'}[p_current==1]"><a href="javascript:void(0);" ng-click="p_inde...

2018-05-03 09:00:04 639

xuehu837769474的博客