angular2 NgModel 模块在Angular2中一个Module指的是使用@NgModule修饰的class。@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码。一个模块内部可以包含组件、指令、管道，并且可以将它们的访问权限声明为公有，以使外部模块的组件可以访问和使用到它们。我们也可以通过定义子模块来扩展我们应用的功能。 NgModule 的APIinterface NgModule {// providers: 这个选项是一个数组,需要我们列出我们这个模块的一些需要共...
几乎每个web应用都会用到表单，Angular 为我们提供了几个内置 validators (验证器)，但在实际工作中为了满足项目需求，我们经常需要为应用添加一些自定义验证功能。angular内置验证器 required - 表单控件值非空email - 表单控件值的格式是 emailminlength - 表单控件值的最小长度maxlength - 表单控件值的最大长度pattern - 表单控件的值需匹配 pattern 对应的模式（正则表达式）需求：设置成绩占比时，如果总占比不是100%，则无法...
组件 使用命令创建组件?创建组件的命令：ng generate component 组件名 ?生成的组件组成： 组件名.html 、组件名.ts、组件名.less、组件名.spec.ts ?在组件的控制器@Component({selector: app-heroes,templateUrl: ./heroes.component.html,styleUrls: [./heroes.component.less] })手动创建组件1.创建一个组件ts文件2.在组件中设置// 1. 导入包，按需导入 import { Component } from "@angular/core"; import { CoreEdit, NavLayo...
理解组件包含包含组件就是指可以包含其它组件的组件， 以 Bootstrap 的卡片 (Card) 为例， 它包含页眉 (header) 、 主体 (body) 和 页脚 (footer) ， 如下图所示：<div class="card text-center"><div class="card-header">Featured</div><div class="card-body"><h5 class="card-title">Special title treatment</h5><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#...
前端开发过程中，我们常常需要根据需求去运行或者打包不同环境的代码，幸运的是，angular给我们提供了environments配置，但是angular6.x的配置方式和angular的其他版本的配置方式是有所不同的，下面我就分别介绍在测试test、预生产pre环境下实现environments配置。 一、angular6.x下environments的配置 首先，在environments文件夹下创建environment.test.ts和environment.pre.ts文件，如下图然后分别在里面添加如下内容然后找到an...
需求: 页面中有一个网页组件(由iframe编写)，此iframe显示在一个输入框中，当修改输入框中地址的时候，要求改变网页组件中的内容网页组件中的代码(html的部分) <iframe#Iframe[src]="testUrl"frameborder="0"width="100%"height="100%"></iframe> 网页组件中的代码(ts的部分)...省略 export class DesignWebInputComponent implements OnInit{testUrl ; }此时问题出现了，页面无法显示内容不要慌，有办法可以解决 constructor( pri...
Angular中，提供的表单验证不能用于所有应用场景，就需要创建自定义验证器，比如对IP、MAC的合法性校验 这里是根据官网实例自定义MAC地址的正则校验，环境为Angular： 7.2.0 ， NG-ZORRO：v7.0.0-rc3 添加指令/shared/validator.directive.ts 注册到 NG_VALIDATORS 提供商中providers: [{provide: NG_VALIDATORS, useExisting: ValidatorDirective, multi: true}] Angular 在验证流程中的识别出指令的作用，是因为指令把自己注册到...
1.安装ngx-echarts npm install echarts --save npm install ngx-echarts --save 2.在项目中引入echarts //angular-cli.json文件{"apps": [{"scripts":["../node_modules/echarts/dist/echarts.min.js","../node_modules/echarts/map/js/china.js","../node_modules/echarts/dist/extension/bmap.js"]}] }3.使用 在你真正需要使用echarts指令的module中import NgxEchartsModule echarts.module.ts import { NgModule } from @angul...
2018年4月23随着angular6 发布，我们可以看到在其官方手册中的模板元素章节中增加了一个Element 条目(中文)，通过说明我们可以知道这个功能可以帮助我们将angular以html标签的形式嵌入到非angular的页面环境中。下面我们就通过一个简单的例子演示Angular6中的这一新功能。新建angular工程通过ng命令新建custom-tag工程ng new custom-tagcli新建完相应文件后会通过npm下载所信赖的包，完成后进入目录验证工作空间是否正常。$cd cust...
1.组件中定义两个变量，分别用于控制按钮是否可以点击（countDown）和按钮上的倒计时数字（countDownTime）： countDown = false; countDowmTime = 60; // 这里设置倒计时为60S showButtonText = 发送短信验证码； // 可以控制动态改变的按钮提示信息2.写一个获取短信验证码的方法绑定到页面的获取短信验证码按钮上： getCode(event) { this.validateForm1.controls[phone].markAsDirty(); // 点击获取验证码要以输入了手...
废话 最近由于项目上需要用到表单验证，前面直接通过 (input) 事件进行数据检查，但是不好和自带的验证器统一，而且也不正统。于是打算研究一下自定义验证器，网上类似的文章很多，但是自己在实现的过程中还是遇到了一些问题。于是还是啰嗦的自己写一篇文章。 正文 这里有官方文档：验证响应式表单，用户的视觉提示，自定义验证器，这篇文章是根据这些文档所来（前面两者就不再赘述比较简单，也说的比较清楚） Angular支持的内置va...
准备工作使用ng new async-form创建一个新工程，在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入 import { ReactiveFormsModule } from @angular/forms; @NgModule({imports: [ReactiveFormsModule] }) 构建表单元素的基类export class QuestionBase<T> {value: T;//表单元素的值key: string;//表单元素键的名称label: string;//输入元素的标题required: boolean;//是否必输order: number;//排序controlType: strin...
Angular 2 已经发布了 2.1.2 版本， 相信很多人已经在使用（试用）了， 相比 AngularJS 1.x ， Angular 2 在性能上有了长足的进步， 同时 Angular 2 也变得非常的庞大， 动辄几兆的脚本， 如何部署到生产环境？ 接下来就介绍如何为生产环境编译 Angular 2 应用， 在本文中， 我们将 Angular 2 官方文档中的 Hello Angular 应用编译到 50K 以下， 以用于生产环境。 未经优化的应用根据 Angular2 官方的 QuickStart 快速创建一个 Hel...
两年前， 写过一篇使用rollup 来 为生产环境编译 Angular 2 应用 的文章， 因为当时还没有 angular-cli 项目。 而如今 Angular 已经到了 7.x 版本， 对应的工具也是非常的完善， 也就不在使用 rollup 来处理 angular 项目。angular-cli 用起来虽然方便， 但是针对生产环境编译的话， 还是有一些地方要注意的， 接下来就介绍我在项目部署时的一些做法。 合理拆分功能模块， 按需加载一个系统往往功能非常多， 因此就要根据项目的实际...
在前后端分离的开发模式中，接口数据模拟(API Mock)是不可避免的事情。前端同学在应对该情况时采取的办法可以各种各样，大概的方案可能会是这几类： 业务代码中临时写上 mock 数据的逻辑在前端引入 mock 服务或框架，对 HTTP 请求服务进行拦截代理转发至自建的 mock server本文主要介绍在 Angular-cli 中引入 simple-mock 以快速实现项目数据接口模拟功能的方法。该方案本质上为上述的第三种方案。 1 simple-mock 简介 simple-mock...