Angular学习笔记(2)——TODO小应用

Angular学习笔记(2)--TODO小应用 1. 写在前面之前我们跑了Angular的Hello World,你是不是对它有点感觉了呢?这一篇将结合一个TODO程序来继续学习Angular的用法. 梳理一下之前的Hello World程序.我们写了一个main.ts来引导模块AppModule,而该模块又包含组件AppComponent,这是一个Angular应用最基本的结构.下面再来简单地看看Angular各部件的含义. 先看Module(模块).Angular应用是模块化的,每一个An…

Angular 学习笔记 (version 6 小笔记)

1. lazyload 的 path 变成相对路径了, 不过如果你用 ng update 的话, 依然可以不需要修改, cli config 好像能调支持绝对路径的写法. const routes: Routes = [ { path: '', loadChildren: './home/home.module#HomeModule' }, ]; 2. 新的 providers 依赖注入机制 tree shakeable (可树摇) 从前我们通过在 module.providers 或 comp…

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学习笔记(三十)-指令(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学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

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

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: 不替换整个使用指令的元素,而…

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…

微信小程序开发：学习笔记[7]——理解小程序的宿主环境

微信小程序开发:学习笔记[7]——理解小程序的宿主环境渲染层与逻辑层小程序的运行环境分成渲染层和逻辑层. 程序构造器…

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 学习笔记

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

Angular 学习笔记 ( CDK - Accessibility )

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

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学习笔记（1）- 四大核心特性

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

Angular 学习笔记 ( CDK - Portal )

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

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学习笔记（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 学习笔记 (久久没有写 angular 常会忘记的小细节)

由于经常跑去写后端, 而且一些就几个月...很多 ng 的东西就忘掉了. 写在这里方便复习呗. 1. async pipe 没有 resolve 前返回的值是 null 2 view component 没有写 [input] 的话, ng 是不会给 input 属性赋值的所以属性根本不会被创建 (oninit 时 object.keys(this) 可以看出来) , 我们可以通过在 constructor 写一个 default value, 这样在 onInit 时就可以拿到 default…

Vue2.x源码学习笔记-从一个小例子查看vm实例生命周期

学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看new Vue(options)实例,这个过程发生了什么. vm实例上的属性又如何添加上去的,又如何渲染到浏览器页面上的. 关于vue的数据依赖和虚拟dom都是重点,必然会在以后的帖子记录. 这篇帖子就根据下例子,看看实例化一个vm实例做了啥吧. 先把小例子贴出来: <div id="app&…

Angular 学习笔记 (动态组件 & Material Overlay & Dialog 分析)

更新: 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…

angular学习笔记(二十八-附2)-$http,$resource中的promise对象

下面这种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…

【Angular学习笔记(2)——TODO小应用】的更多相关文章