import { Component, Input, OnInit } from '@angular/core'; import { trigger, state, style, animate, transition, group, sequence, keyframes, useAnimation, stagger, animateChild, query, animation } from '@angular/animations'; var fadeAnimation = animati…
本文转自:https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 版权声明:本文为博主原创文章,转载请注明地址.如果文中有什么纰漏或错误的话,请留言指正,我会及时更正.如果您觉得本文还不错的话,记得点个赞呦,希望能帮到你,谢谢. https://blog.csdn.net/yuzhiqiang_1993/article/details/71191873 在上一篇博客中我们已经通过Angular CLI命令行工具创建出来一个全新…
1. lazyload 的 path 变成相对路径了, 不过如果你用 ng update 的话, 依然可以不需要修改, cli config 好像能调支持绝对路径的写法. const routes: Routes = [ { path: '', loadChildren: './home/home.module#HomeModule' }, ]; 2. 新的 providers 依赖注入机制 tree shakeable (可树摇) 从前我们通过在 module.providers 或 comp…
前言:不支持MakeDown的博客园调格式的话,真的写到快o(╥﹏╥)o了,所以老夫还是转战到CSDN吧,这边就不更新啦啦啦~ CSDN地址:https://blog.csdn.net/Night20181029 比较麻烦就是要审核,┓( ´∀` )┏ github地址:https://github.com/KKQQ9/Notes 掘金地址:https://juejin.im/user/5d2b4fcef265da1b8c19b998 项目目录结构 项目目录结构图 说明 具体内容 .editor…
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用Markdown格式 同步编辑和预览Markdown 本应用已经包含了基础的HTML和CSS代码,还有一个用Node写的简单的RESTful服务器,用于管理笔记,这样我们就可以专注于Angular而不是API.我们学习的重点是如何把Angular加入其中并学习它的重要特性. 3.2.1 获取项目文件…
Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性 Chrome和Safari需要前缀-webkit-  @keyframes(关键帧) animation 使用规则,Name must,duration must Animation turn 顺序 animation   所有动画简写,除…
angular官网高级文档AngularUniversal部分的翻译总结,这东西在angular4开始正式被官方支持了,目前其实支持的服务器端还没有很多,但好歹包括了node和DotNetCore,算是个进一步优化应用以及扩展需求(强化服务端能力)的方案. 正文开始: ------------------- 手动分割线 --------------------- 注意: 本文属于实验性质,可能会更改. Angular 统一平台 目录 概述 如何工作 为何这么做 SEO / 无JavaScript…
前面我们已经在我们想要的位置顺利的创建了Angular项目,现在我们就来看一下项目的结构吧. 下面使我们项目的整体结构,包括node的模板.src资源文件以及配置文件等. 下面是根目录文件夹内的文件用途: 文件 用途 e2e/ 在 e2e/ 下是端到端(end-to-end)测试. 它们不在 src/ 下,是因为端到端测试实际上和应用是相互独立的,它只适用于测试你的应用而已. 这也就是为什么它会拥有自己的 tsconfig.json. node_modules/ Node.js 创建了这个文件夹…
http://blog.segmentfault.com/bornkiller/1190000000402555 angular $q的一个不错的学习笔记…
Angular 5.x Lifecycle Hooks Learn Note Angular 5.x 生命周期钩子学习笔记 标签(空格分隔): Angular Note on cnblogs.com 3. 生命周期钩子 每个组件都有一个被ng管理的生命周期. 1. 组件生命周期钩子概览 指令和组件的实例都有一个生命周期钩子:新建.更新和销毁. 生命周期钩子接口在core库中. 每个生命周期钩子接口都有唯一的钩子方法,它们的命名是加ng前缀. 2. 生命周期的顺序 钩子 目的和时机 ngOnCha…
Angular 5.x Template Syntax Learn Note Angular 5.x 模板语法学习笔记 标签(空格分隔): Angular Note on github.com 上手 官网Heroes 例子:Demo On Github. 一.模板与数据绑定 1. 显示数据 selector 选择自定义标签的名称. template 属性定义内联模板:templateUrl 属性定义外链模板. 值的声明和初始化. export class AppComponent { // 变量…
本节我们会接着上节课的内容,继续来完成使用Angular来创建简单的笔记存储应用,上一节课,我们完成了笔记的展示功能,本节课,我们来完成编辑功能. 编辑主要是两个功能:编辑现有的笔记以及创建新笔记.首先我们需要让应用第一次启动或用户点击"添加"按钮时创建一个新笔记. 3.2.9 添加笔记功能 首先我们需要给表单添加一些模型,这样可以用表单来控制数据更新,同时,你还需要让编辑器右侧显示一个实时预览笔记效果的界面,因此需要添加一个Markdown指令,打开index.html文件,进行如下…
本节我们会通过构建一个简单的笔记存储应用(可以载入并修改一组简单的笔记)来学习如何应用Angular的特性.这个应用用到的特性有: 在JSON文件中存储笔记 展示.创建.修改和删除笔记 在笔记中使用Markdown格式 同步编辑和预览Markdown 本应用已经包含了基础的HTML和CSS代码,还有一个用Node写的简单的RESTful服务器,用于管理笔记,这样我们就可以专注于Angular而不是API.我们学习的重点是如何把Angular加入其中并学习它的重要特性. 3.2.1 获取项目文件…
1.data-ng-app与ng-app的区别 data-ng-app是为了h5不报错 2.ng-class 不多说就来拿例子说吧 html代码 <div class='color-changer' data-ng-class="{'color-changer-hiden':!colorChanger}"> </div> js代码: $scope.colorChanger=false; 此时的变量colorChanger=false,那么!colorChange…
http://www.cnblogs.com/lzhp/p/4000741.html 第一章.        初识Angular——Angular是MVW的Js框架. 第二章.        数据绑定——ViewModel中不仅可以含有变量,还可以还有事件.可以通过事件来控制变量的值改变.视图绑定着VM中的变量和事件. 第三章.        模块——可以使用angular.module()来声明模块. 如angular.module(‘myApp’,[])相当于Setter:angular.m…
第一章.        初识Angular--Angular是MVW的Js框架. 第二章.        数据绑定--ViewModel中不仅可以含有变量,还可以还有事件.可以通过事件来控制变量的值改变.视图绑定着VM中的变量和事件. 第三章.        模块--可以使用angular.module()来声明模块. 如angular.module('myApp',[])相当于Setter:angular.module('myApp')相当于Getter. 第四章.        作用域--作…
分别是angular脏值检测的工具方法equals和 类HashKey的使用方法 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he…
提示:前面加*为必须背下来的 DOS头: typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; //* Magic number WORD e_cblp; // Bytes on last page of file WORD e_cp; // Pages in file WORD e_crlc; // Relocations WORD e_cparhdr; // Size of header in paragrap…
原文地址: http://www.cnblogs.com/feisky/archive/2010/01/11/1644482.html 关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即是一种渐变动画: 2. Frame Animation:顺序播放事先做好的图像,是一种画面转换动画. 动画类型 下面先来看看Android提供…
前一章中总结了android animation中property animation的知识和用法,这一章总结View animation和Drawable animation的有关知识: View animation就是网上常讲的tweened animation,android.view.animation包包括了tweened animation用到的所有的类,Demo请看例子,地址:http://download.csdn.net/detail/u010966622/5664895 不论…
https://www.youtube.com/watch?v=jEYI4lnOprY&t= Blender Tutorial - Earth curves [Animation nodes] 建模1 BezierCurve ,数据属性, 填充:全部(即曲线成为管状),倒角6,分辨率2. 2 Icosphere, 缩放到0.9, 作为稍小的蓝色海洋球体, 材质设为蓝色. 或者如视频使用节点设置为更好看的色彩.3 Icosphere, 大陆板块, 新建空白顶点组倍用, 使用UV贴图+如下修改器,…
animation动画 @keyframes规则 - 创建动画 from - to 等价于 0% - 100% 但是优先使用0% - 100%,因为浏览器兼容性还好点 animation 动画绑定 将keyframes动画规则绑定到选择器. 必须设定动画的名称和时长. 所有动画属性 animation-name keyframes动画的名称 属性 含义 备注 动画名称 就是keyframes规定的动画名称 不设置动画不成功 none 设置后无动画效果 如果真的没有动画就不需要设置,但是这个功能的…
在开始介绍Animation之前我们有必要先来了解一个特殊的东西,那就是"Keyframes",我们把他叫做“关键帧”,玩过flash的朋友可能对这个东西并不会陌生.下面我们就一起来看看这个“Keyframes”是什么东西.前面我们在使用transition制作一个简单的transition效果时,我们包括了初始属性和最终属性,一个开始执行动作时间和一个延续动作时间以及动作的变换速率,其实这些值都是一个中间值,如果我们要控制的更细一些,比如说我要第一个时间段执行什么动作,第二个时间段执…
关于动画的实现,Android提供了Animation,在Android SDK介绍了2种Animation模式: 1. Tween Animation:通过对场景里的对象不断做图像变换(平移.缩放.旋转)产生动画效果,即是一种渐变动画: 2. Frame Animation:顺序播放事先做好的图像,是一种画面转换动画. 动画类型 下面先来看看Android提供的动画类型.Android的animation由四种类型组成 在XML文件中: alpha        渐变透明度动画效果 scale…
看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记…
For example, when we open a form, we want to see all the inputs fields comes into one by one. Code for html: <div class="payment-form" [@jumpIntoPage]> <label>Email:</label> <au-fa-input class="form-input" icon=&qu…
Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&…
main.ts(应用程序主入口) → app.module.ts app.module.ts //这个根模块会告诉Angular如何组装该应用 //引入模块 import { BrowserModule } from '@angular/platform-browser'; //浏览器解析模块 import { NgModule } from '@angular/core'; //Angular核心模块 import { AppComponent } from './app.component'…
  man  test 可以看见这些     比较符号:-lt小于 -le小于等于   -gt大于   -ge大于等于  -ne不等于   -eq等于              < 小于(需要双括号),如:(("$a" < "$b"))             <= 小于等于(需要双括号),如:(("$a" <= "$b"))             > 大于(需要双括号),如:(("$…
语法介绍 javascript最流行的脚本语言,用于web和HTML,服务器.pc.移动端 轻量级语言,可以插入HTML页面,由浏览器按编写顺序执行 一.字符集 用Unicode字符集编写,是ASCII和Latin-1的超集. 1.区分大小写. eg:在HTML中可以写成onclick或者onClick,而在js中必须写onclick 2.忽略标识间空格.换行符(多数),形成统一编码风格. (1)除识别普通空格符(\u0020),还可识别: 水平制表符(\u0009).垂直制表符(\u000B)…