Angular 学习笔记 ( 创建 library, 转换老旧的 library )

更新 : 2018-10-28 不知道为什么在 ng 跑一直做不到 .d.ts 最后发现,如果有一个插件 propagating-hammerjs.ts 那么就在 root create 一个 propagating-hammerjs.d.ts ,名字要匹配到,这样就可以跑了. 暂时不管先呗.. refer : https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5 https://blog.ang…

Angular学习笔记—创建一个angular项目

开始项目前,你需要先安装node和npm,然后执行npm install -g @angular/cli安装Angular CLI. 如何安装node.js和npm npm使用介绍 1.安装angular-cli Angular提供了一个命令行工具angular-cli,它能让用户通过命令行创建和管理项目. 安装命令: npm install -g angular-cli@1.0.0-beta.28.3 安装后可输入指令ng version查看版本. 2.创建项目 ng new newApp /…

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

之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍的是基于angular-1.3.2版本的,低版本的$location可能会有问题. hashbang模式和history api创建单页应用首先,$location是用在单页应用里的...(废话,angular就是用在单页的)...所以,$location处理的是url改变,但是不刷新页面的情况.…

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

本篇介绍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学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv…

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

在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指令(5)-link文章也提到了link函数的第五个参数linker. 这篇文章就来讲解一下transclude()方法(linker()方法),是怎么使用的,另外,它也是compile函数的第三个参数,用法一样. 下面就通过自己写一个简易的模拟ngRepeat的指令cbRepeat,来了解linke…

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

之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('directive-name',function(){ var obj = { restrict:'string', priority:number, template:'string', templateUrl:'string', replace:bool, transclude:bool or 'el…

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

继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的代码: html: <body> <div ng-controller="compileCtrl"> <level-one> <level-two> <level-three> hello,{{name}} </level-…

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

这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那么link属性的定义会被忽略.原因继续看讲解: 1.compile的返回值:compile函数返回值有两种可能 (1).返回pre-link函数和post-link函数: 一种是返回一个对象,对象具有两个方法,第一个方法是pre-link函数,第二个方法是post-link函数. compile:f…

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

这篇主要介绍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学习笔记(三十)-指令(2)-restrice,replace,template

本篇主要讲解指令中的 restrict属性, replace属性, template属性这三个属性一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式: 1. 元素: E 2. 属性: A 3. 样式类: C 4. 注释: M restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A. 二. replace: 布尔值.是否将指令元素替换,可以有两个值: 1.true: 替换整个使用指令的元素 2.false: 不替换整个使用指令的元素,而…

AngularJs学习笔记--IE Compatibility 兼容老版本IE

原版地址:http://docs.angularjs.org/guide/ie Internet Explorer Compatibility 一.总括这文章描述Internet Explorer(IE)处理自定义HTML属性.标签的特性(可以理解为“特别糟糕的性质”).如果我们打算让应用兼容IE8以及以下的版本,那么可以继续往下看. 二.Short Version(简述) 为了让我们的angular应用在IE上工作,请确保: 1. 按需引入JSON.stringify(IE7或以下的都需要这…

angular 学习笔记

每天进步一点点,学习笔记笔记来自 angular权威指南如果想要屏蔽浏览器对表单的默认验证行为,可以在表单元素上添加 novalidate 标记. 而按钮标签则完全忽略 hr e f 属性,并不会在被点击时有同样的行为. 指令本质上就是AngularJS扩展具有自定义功能的HTML元素的途径.例如,我们可以创建一个自定义元素,它实现了 <video> 标签的功能并且能在所有浏览器中工作: directive() 方法返回的对象中包含了用来定义和配置指令所需的方法和属性. 声明指令本质上是…

Angular 学习笔记 ( CDK - Portal )

Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, TemplatePortal 属于第一种 in PortalOutlet 属性 out TemplatePortal 可以通过指令来创建, component 只能通过实例化来创建. 要明白它们的使用技巧最好是先理解在 ng 里如果自己创建动态组件. 可以看看我之前的学习笔记, 虽然有点旧, 可能有些地方…

angular学习笔记（1）- 四大核心特性

angular1学习笔记(1) - angular1四大核心特性 1.MVC model:数据模型层 controller:业务逻辑和控制逻辑 view:视图层,负责展示 2.模块化 Module 模块用于单独的逻辑表示服务,控制器,应用程序等,并保持代码的整洁.我们在单独的js文件中定义的模块,并将其命名为按照module.js文件形式模块化的好处 1 增加了模块的可重用性 2 通过定义模块,实现加载顺序的自定义 3 在单元测试中,不必加载所有的内容 Dependency In…

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简化路径…

Angular 学习笔记 ( CDK - Accessibility )

@angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家用. 这系列是我按照官网教程和查了一下 angular/material 源码的学习笔记. 1. KeyManger 运用场景是 select, menu 这种有 list options 的组件, 负责处理键盘上下按钮时 option active 的逻辑 ng 提供了 3 个类 ListKey…

WebGL three.js学习笔记创建three.js代码的基本框架

WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实…

angular学习笔记（6）- 指令

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 - 样式类  注释留空两…

angular学习笔记（3）- MVC

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…

angular学习笔记（5）- 路由

angular1学习笔记(5)- 路由需要前端路由的原因: 1.ajax请求不会留下History记录 2.用户无法通过URL进入应用中的指定页面(保存书签.链接分享给朋友) 3.ajax对SEO是个灾难前端路由的基本原理: 1.哈希# 2.HTML5 中新的 history API 3.路由的核心是给应用定义 “ 状态 ” 4.使用路由机制会影响到应用的整体编码方式(需要预先定义好状态) 5.考虑兼容性问题与 “ 优雅降级 ”…

angular学习笔记（2）- 前端开发环境

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学习笔记—基础（转载）

创建简单组件新建组件 $ ng generate component simple-form --inline-template --inline-style # Or $ ng g c simple-form -it -is # 表示新建组件,该组件使用内联模板和内联样式在命令行窗口运行以上命令后,将输出以下内容: installing component create src/app/simple-form/simple-form.component.spec.ts create src…

angular学习笔记(二)-创建angular模块

如果在页面的html标签(或任意标签)中添加ng-app,表示对整个页面应用angular来管理. 他是一个模块. 模块有助于把东西从全局命名空间中隔离. 今天学习如何自定义创建模块: <!DOCTYPE html> <html> <head> <title>2.1模块</title> <meta charset="utf-8"> <script src="../angular.js"&g…

angular学习笔记(二十五)-$http(3)-转换请求和响应格式

本篇主要讲解$http(config)的config中的tranformRequest项和transformResponse项 1. transformRequest: $http({ transformRequest: function(data){ //对前台发送的data进行处理 return data } }) 这个在测试的时候遇到了很大的问题.只要经过transformRequest函数处理,哪怕是不做任何处理,node后台都会报错,php后台也报同样的错,so,angular的这部分…

【Angular 学习笔记 ( 创建 library, 转换老旧的 library )】的更多相关文章