angular2
ChengYz_
瞎整
展开
-
angular2系统学习 - 路由与导航(2)
angular2系统学习 - 路由域导航(2)1.模块注册路由NgModule注册路由分根模块(AppModule)与子模块注册路由,只有根模块AppModule才能使用forRoot()方法。 - 主模块 RouterModule.forRoot()方法 - 子模块 RouterModule.forChild()方法原创 2017-01-01 19:21:48 · 2159 阅读 · 0 评论 -
2.揭秘angular2学习 ------- 组件
1 概述1.1 组件化标准 - WebComponent1. W3C为统一组件化标准方式,提出Web Component的标准。 2. 每个组件包含自己的html、css、js代码 3. Web Component标准包括以下四个重要的概念 - 自定义元素:可以创建自定义HTML标记和元素 - 模版:模版允许开发人员使用<template>标签去预定义一些内容,但并不加载至页面,而是使用Js代码原创 2017-02-22 10:55:02 · 5581 阅读 · 1 评论 -
6.揭秘angular2学习 ------- 指令
1指令简介 指令作用在特定的DOM元素上,扩展元素的功能与行为。 组件继承自指令,可以理解为是一种带有视图的指令。 HTML的某些元素带有特定的属性,这些属性被HTML解析,元素就有了特定的功能与行为。指令也一样,将指令以属性的形式挂在DOM元素上,扩展功能与行为。 自定义指令通常以小驼峰式命名法命名。 2指令分类 属性型指令。 以元素属性的形式来使用的指令。 通常被用来改变元素的外观和行为。 内原创 2017-03-04 15:55:40 · 1171 阅读 · 0 评论 -
5.揭秘angular2学习 ------- 管道
管道简介管道是什么?Angular的管道可以看作成是一个数据格式化展示的工具。管道可以将数据格式化显示,而不改变源数据。比如关于日期的展示,对于源数据使用管道1可以以yyyy/MM/dd来展示,也可以使用管道2展示成Feb 28, 2017的形式。但原数据依然是date,并没有改变。利用管道我们可以将数据格式化的内容剥离出来,使之独立,有需要格式化展示的时候选择相应的管道进行处理即可。如何使用在An原创 2017-02-28 11:29:33 · 8293 阅读 · 2 评论 -
4.揭秘angular2学习 ------- 表单
表单虽然HTML内置了表单的标签,但是存在浏览器兼容问题。而且规则验证、数据获取、处理等都很麻烦。 Angular对表单进行封装,以方便使用。 Angular提供了模板驱动及模型驱动两种方式来构建表单。 1. 模板驱动模式:使用模板表单内置指令、内置校验的方式来构建表单。 2. 模型驱动模式:采用自定义表单、自定义校验的方式来构建表单。模板表单例子表单指令表单指令是Angular对常用表单交原创 2017-02-27 16:23:03 · 4012 阅读 · 3 评论 -
3.揭秘angular2学习 ------- 模版
模版 模版是一种自定义的标准化页面,通过模版和模版中的数据结合,可以生成各种各样的网页。 几乎所有HTML语法在模版中都是适用的,除了script标签。另外html body base等元素并不起什么作用。 模版语法概览 实例 名称 说明 语法 <p>{{ detail.telNum }}</p> 插值 绑定值到模版中 {{ 模版表达式 }} <div [title原创 2017-02-23 20:50:24 · 1607 阅读 · 0 评论 -
angular2系统学习 - 管道
1.简介管道可以在模板中转换显示的内容。 往管道中传入数据,然后管道转换数据,再返回出来。2.使用管道{{ inputData | PipeName:args1,args2...}}inputData:输入数据 ‘|’:管道操作符 PipeName:管道名 args1,args2…:可选参数。 3.链式管道{{ inputData | PipeNameA:args | PipeNameB:args原创 2017-01-06 18:26:03 · 2014 阅读 · 1 评论 -
angular2系统学习 - 属性型指令
1.简介ng2中有三种类型的指令: - Component 组件-拥有模版的指令 - Structural directives 结构型指令-通过添加和移除DOM元素改变DOM布局 - Attribute directives 属性型指令-改变元素的显示和行为概括: 属性型指令通过属性绑定在元素上,等于是在DOM加载元素的时候添加了一个拦截器,这个拦截器里可以获取元素,然后改变元素的原创 2017-01-06 23:30:35 · 4722 阅读 · 2 评论 -
angular2系统学习 ------杂项
1.js事件与angular2事件映射 onfocus - mouseenter onmouseout - mouseleave 2.接口实现接口不一定非要在类名后面implements 声明,只需要实现或不实现即可。3.类同名冲突问题。加入有连个相同的文件相同的类,存在于不同的文件夹中,我们在组件中引入时为防止冲突,可以暂时更改映射类名来解决问题。import { AClass as BClass原创 2017-01-05 15:01:06 · 772 阅读 · 1 评论 -
angular-cli下使用bootstrap
1.只使用bootstrap.css在angular-cli.json中配置: "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ],2.使用bootstrap.js首先需要安装ng-bootstrap与bootstrap模块npm原创 2017-02-13 14:15:24 · 8668 阅读 · 1 评论 -
angular2系统学习 - 路由与导航(4)
angular2系统学习 - 路由与导航(4) 1.路由守卫 路由守卫其实就是一种拦截机制,在进入离开视图等时的拦截行为。 守卫返回true,则继续运行;返回false则停止导航。常用于权限控制。 守卫还可以告诉路由器导航到别处。 路由器支持多种守卫: 用CanActivate来处理导航到某路由的情况。 用CanActivateChild处理导航到子路由的情况。 用CanDeacti原创 2017-01-04 10:05:26 · 2847 阅读 · 2 评论 -
angular2系统学习 - 路由与导航(5)
angular2系统学习 - 路由与导航(5)1.Resolve守卫Resolve守卫主要是在路由激活之前获取路由数据,预先加载数据,且数据加载完成后路由才返回true,以保证导航至该路由时不用现去服务取数据。1.1配置Resolve守卫创建守卫文件resolve.service.ts import { Router, Resolve, ActivatedRouteSnapshot } fr原创 2017-01-04 11:42:17 · 3286 阅读 · 2 评论 -
angular2系统学习 - 结构型指令
1.简介ng2中指令可分为三种: - 组件 - 属性型指令 - 结构型指令结构型指令通过添加和删除DOM元素来改变DOM的布局。常用指令如:ngIf, ngSwitch, ngFor。html5中使用template标签来防止隐藏的内容,而在ng2中,遇到template标签会将之替换成空的script标签。 2.ngSwitch由于在教程中没有用过ngSwitch,而ngIf,ngFor用的原创 2017-01-09 10:27:11 · 1148 阅读 · 0 评论 -
angular2系统学习 - 路由与导航(1)基础篇
angular2系统学习 - 路由域导航(1)基础篇本篇内容主要学习路由与导航的基础知识。1.base href如果app文件夹是应用的根目录,则在index.html的head中加入 <head> <base href="/"> ... <head>2.AppModule配置2.1引用路由import { RouterModule, Routes } from '@angular/原创 2017-01-01 14:47:00 · 2973 阅读 · 1 评论 -
angular2系统学习 - 用户输入
1.通过事件获取用户输入当我们想获取用户输入时,首先想到的就是事件。通过事件我们可以获取event对象,然后通过event对象可以获取元素及事件的一切信息。onClickItem($event: any){ let el = $event.target; ... }缺点 暴露太多信息,我们只想要目标元素,但还获取了event对象的其他信息。下面将介绍如何用模板引用变量来解决这个问题原创 2017-01-11 18:01:06 · 3206 阅读 · 1 评论 -
angular2系统学习 - 疑问
1.自定义指令内HostListener绑定的方法怎么传事件对象event参数?原创 2017-01-07 21:28:29 · 588 阅读 · 0 评论 -
angular2系统学习 - 动画
1.理解ng2的动画angular2的动画实际上是先定义若干个状态(一般就俩状态),然后元素在这若干个状态中变换。所以要记住俩东西 1. 状态 2. 状态之间的变换2.使用ng2动画1.首先要引入接口。import { trigger,state,style,transition,animate,keyframes} from '@angular/core';这里这些类具体干什么暂时先不写了,因原创 2017-02-17 09:49:25 · 3640 阅读 · 0 评论 -
1.揭秘angular2学习 ------- angualr架构总览
1 核心模块介绍angluar的六大重要部分: 1. 组件 2. 模版 3. 指令 4. 服务 5. 依赖注入 6. 路由下面分别简单介绍。1.1 组件 页面由组件渲染呈现 组件可层层嵌套,形成组件树,父子组件双向数据流动(Input:属性绑定,Output:事件绑定) 组件和模版之间的数据交互成为数据绑定。(组件-模版:属性绑定,模版-组件:事件绑定) 父子组件数据交互,父组件的模版充原创 2017-02-21 16:31:52 · 3516 阅读 · 2 评论 -
angular-cli
1.上线打包指定ng build打包的结果是未压缩的,vendor.js大概有3.5mb,网上找到产品模式打包命令ng build --prod打包后vendor.js大概900Kb原创 2017-01-19 10:40:39 · 10497 阅读 · 2 评论