element ui Angular学习笔记(一)】的更多相关文章

1.element ui安装 npm i --save element-angular 2.Angular-cli引入 引入后需要开启ElModule.forRoot(),也可以单独引入某个组件入ElChildModules.ElButton 3.指令 [el-class] 如:<el-alert [el-class]="'myClass'">text</el-alert> .myClass { >div { color: #ccc; } } 在自己的@c…
本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…
在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke…
这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数:scope,iEle,iAttrs,ctrl,linker scope:指令所在的作用域,这个scope和指令定义的scope是一致的.至于指令的scope,会在讲解scope属性的时候详细解释 iEle:指令元素的jqLite封装.(也就是说iEle可以调用angular封装的简版jq的方法和属…
之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or 'el…
之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用 首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.…
本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的相关方法: 以 'http://localhost/$location/21.1%20$location.html#/foo?name=bunny#myhash' 这个路径为例: 1. 获取当前完整的url路径: $location.absUrl():// http://localhost/$loc…
继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…
这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那么link属性的定义会被忽略.原因继续看讲解: 1.compile的返回值:compile函数返回值有两种可能 (1).返回pre-link函数和post-link函数: 一种是返回一个对象,对象具有两个方法,第一个方法是pre-link函数,第二个方法是post-link函数. compile:f…
本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性 一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而…
UI学习笔记(7)--扁平化图标 认识扁平化 Flat Design 抛弃传统的渐变.阴影.高光等拟真视觉效果,打造看上去更平的界面.(颜色.形状) 扁平化图标有什么优缺点 优点: 简约不简单.有新鲜感 降低移动设备的硬件需求.延长待机时间 开发简单 缺点: 需要一定学习成本,缺乏直观 传达的感情不丰富,过于冰冷 扁平化的发展 提出:2008,谷歌提出 实现:微软,win8,彻底的扁平化风格 安卓2011年,Android 4.0实现扁平化 苹果2013年,IOS7开始扁平化 风格分类 纯平面…
@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家用. 这系列是我按照官网教程和查了一下 angular/material 源码的学习笔记. 1. KeyManger  运用场景是 select, menu 这种有 list options 的组件, 负责处理键盘上下按钮时 option active 的逻辑 ng 提供了 3 个类 ListKey…
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简化路径…
每天进步一点点,学习笔记 笔记来自  angular权威指南 如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不会在被点击时有同样的行为. 指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径.例如,我们可以创建一个自定义元素,它实现了 <video> 标签的功能并且能在所有浏览器中工作: directive() 方法返回的对象中包含了用来定义和配置指令所需的方法和属性. 声明指令本质上是…
angular1学习笔记(3)- MVC --- MVC终极目标 - 模块化和复用 AngularJs的MVC是借助于$scope实现的!!! 神奇的$scope: 1.$scope是一个POJO(Plain Old Javascript object) 2.$scope提供了一些工具方法$watch()/$apply() 3.$scope是表达式的执行环境(或者叫作用域) 4.$scope是一个树形结构,与DOM标签平行 5.子$scope对象会继承父$scope上的属性和方法 6.每一个An…
angular1学习笔记(1) -  angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module 模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁.我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式 模块化的好处       1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 Dependency In…
Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, TemplatePortal 属于第一种 in PortalOutlet 属性 out TemplatePortal 可以通过指令来创建, component 只能通过实例化来创建. 要明白它们的使用技巧最好是先理解在 ng 里如果自己创建动态组件. 可以看看我之前的学习笔记, 虽然有点旧, 可能有些地方…
angular1学习笔记(6)- 指令 restrict-匹配模式 1.A - 属性 <my-menu title=Products></my-menu> 2.M - 注释 <div my-menu=Products></div> 3.E - 元素 <div class=my-menu:Products></div> 4.C - 样式类  <!-- directive:my-menu Products -->  注释留空两…
angular1学习笔记(5)- 路由 需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是个灾难 前端路由的基本原理: 1.哈希# 2.HTML5 中新的 history API 3.路由的核心是给应用定义 “ 状态 ” 4.使用路由机制会影响到应用的整体编码方式(需要预先定义好状态) 5.考虑兼容性问题与 “ 优雅降级 ”…
angular1学习笔记(2)- 前端开发环境 1.代码编辑工具 2.断点调试工具 3.版本管理工具 4.代码合并和混淆工具 5.依赖管理工具 6.单元测试工具 7.集成测试工具 常见的前端开发工具 1.subline 2.webstrom 3.chrom 插件 Batarang (断点调试工具) 3.git.svn  版本管理工具 4.nodejs 开发和调试工具    npm包管理器    grunt.gulp.webpack   代码合并和混淆工具 5.依赖管理工具 bower 6.htt…
Angular学习笔记(2)--TODO小应用 1. 写在前面 之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法. 梳理一下之前的Hello World程序.我们写了一个main.ts来引导模块AppModule,而该模块又包含组件AppComponent,这是一个Angular应用最基本的结构.下面再来简单地看看Angular各部件的含义. 先看Module(模块).Angular应用是模块化的,每一个An…
传统的浏览器事件循环 :浏览器本身一直在等待事件,并作出响应.如果你点击一个button或者在input 中输入字符,我们在 JS 中 监听这些事件并设定了回调函数,那么这些事件被触发以后,回调函数就会在浏览器的解释器里执行.执行完毕以后,浏览器就会对相应的 DOM 做出变化.   Angular 的事件循环 :Angular 对传统的循环进行了扩展,生成了一个称为 angular context 的执行环境.   $watch 队列 : $watch : 你在 controller 中创建数据…
更新: 2019-11-24  dialog vs router link refer : https://stackoverflow.com/questions/51821766/angular-material-dialog-not-closing-after-navigation 今天发现一些场景可能导致 dialog 不会关闭. 比如当子组件打开一个 dialog 后 某一个操作把父组件给销毁了.这个时候 dialog content 会一起销毁掉, 因为 content 是 under…
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource){ return $resource('/card/user/:userID/:id',{userID:123,id:'@id'},{charge:{method:'POST',params:{charge:true},isArray:false}}) }); HttpREST.factory('h…
参考来源:http://www.angularjs.cn/tag/AngularJS?p=1&s=50 基本要求:一周搞定33篇学习文章 目标:develop/refactor lms系统angular基本用法 20151106 angular开发指南01~03 学习小结:  angular是一个框架,而不是像jquery那样的一个库. angular的引导,是在DomContentLoaded event事件中执行的,当然也可以手动引导angular angular内部通过ng-app加载对应…
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: 需要被检测的对象,可以是以下任意一种: 1. 某个数据,监测这个数据的值是否发生变化 2. 一条angular表达式,监测表达式的结果是否发生变化 3. 函数(),监测函数的返回值是否发生变化 注意,以上三种,无论是哪种,都应该是字符串格式,并且都是在$scope作用域下执行的. 4.函数,非字符…
scope: 布尔型或对象(默认为false) ,为true时继承父作用域并创建一个新的作用域隔离作用域具有隔离作用域的指令最主要的使用场景是创建可复用的组件, 组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域.创建具有隔离作用域的指令需要将 scope 属性设置为一个空对象 {} .如果这样做了,指令的模板就无法访问外部作用域了: App.directive('myDirective', function() { return { restrict: 'A'…
novalidate 属性是在 HTML5 中新增的.禁用了使用浏览器的默认验证. //augular.js自定义指令 .directive('runoobDirective',function(){ return { template:'<span>这个是自定义指令!</span>' }; }) //angular.js的包含,是另一个html文件,也可以是<script>便签</script> <div ng-include="'myUs…
angular.js路由功能 用于实现单页应用 //html 代码 <div ng-view></div> //js代码 angular.module('myM1',['ng','ngRoute']) .config(['$routeProvider',function($routeProvider){ $routeProvider .when('/',{template:'这是首页页面'}) .when('/computers',{template:'这是电脑分类页面'}) .w…
更新 : 2018-01-30 ng 的 overlap 在关闭的时候对 backdrop 做了一个 style pointer 目的是让 backdrop 不被 2 次点击, 但是呢,  css pointerEvent 'none' 也有一个穿透的效果,就是说, backdrop 还没完全关上时, 其后面的按钮是可以被点击到的. 这个需要注意,因为可能你并不想这样. 另外一个要说的是, overlap 是可以打开多个的. 通过多个 overlapRef 去自行做管理. 所以请把 overla…