这里讲讲，angular2在生产模式下用webpack2进行打包的方法： //使用rollup打包还是比较坑的，功能及插件上都不如webpack, 关键不支持代码分离，导致angular里的lazy loader将无法使用。 具体步骤： angular=>aot=>webpack(Tree shaking&& Uglify) angular=>aot: 首先你需要的依赖："@angular/compiler" "@angular/compiler-cli" "@angular/platform-browser"。npm install 安装他们。以下是目录结构：.....
最近，接到反馈说百度统计无法对#号后的URL进行分析，需要前端这边去掉URL中的#，下面我分享一下这个问题的处理过程。1、Angular2+ 路由策略1.1 HashLocationStragegy通过hash实现，当url的hash发生改变时，触发hashchange注册的回调（低版本的浏览器没有hashchange事件，通过轮回检测url实现），回调中去进行不同的操作，进行不同的内容展示。使用hash来实现的话，URI规则中要带上#，路由中#后边的内容就是hash，而我们常说的锚点...
1.与Angular1的异同 几乎完全不同（什么鬼~ 1）保留一些特性 表达式仍旧用{{}}。 2）属性指令变为驼峰式 ng-if ---> ngIf 3）ng-repeat被ngFor代替 4）ng-model ------> [(ngModule)] 注意符号 5）Angular2中，自带原始指令要加哈希前缀 # 6）Angular2新增了对移动端的设计 7）Angular2摒弃了1中的核心：$scope 8）Angular2使用zone.js来检测变化。 9）新增组件类component 可以说是取代了1中的controller： temp...
简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点.1. pakeage.json配置文件:是用来声明项目中使用的模块,在部署环境时,只要在pakeage所在的目录执行npm install命令就可以安装所有需要的模块了. 新建一个文件夹作为项目的根目录,整个项目的文件都存放在这个文件夹下面.在根目录下创建一个package.json的配置文件,该...
公司现在采用angualrjs开发一些web应用，采用的是angular1，现在angular2已经差不多了，听说最近rc6已经出来了……其实感觉好慢啊！之前也做过一些anglar2的例子，但是没有记录下来，现在重新拾起来还费了半天劲儿！弄了半天总是报错，按着文件对比了半天也没有找打是哪里写错了……哎！最后发现是版本的问题，这次想把它记录下来，方便之后查看。 环境：Visual Studio 2015 Update 3+Asp.net core templates 一、创建一个 ...
忙活了半年，从angular2.0到现在angular4.2。从没AOT到有AOT。我想说，angular2的学习曲线真的有点陡峭。只能说，angular2是一个比较完整的框架，框架就是这样，一大堆条条框框，一个项目大了，就是靠这些条条框框来保持秩序。关于之前的H5编辑器，很多人私信我，要么就是商业合作，要么就是要源码。我只想说，虽然那个编辑器是一个人搞的，但是，那时候我只是个打工的，也签了保密协议，爱莫能助。法律问题，本人不大懂，若是新写...
之前做的小demo是RC4的，这一两个月官网就跟新到RC6了，当然就要紧跟步伐前进啦；升级的过程是痛苦的，但结果是开心的。看过RC4的童鞋应该会知道RC6改变了很多，来了一个釜底抽薪。新增了一个NgModule。模块管理。就此RC6就形成了Module－component－router－service的一个整体。使整个条理更加清楚明白。module块的复用更加灵活。先说一下升级吧，RC4没有Module的概念，所以首先为她添加根Module。然后为每一个component添加一个M...
1.父组件ts/*** 描述:查询分析* @version:1.0.0* @author: zb* @创建时间: 2017-06-08 15:37:59*/import { Component, OnInit, OnDestroy, ViewChild } from ‘@angular/core‘;import { Router, ActivatedRouteSnapshot, NavigationEnd, RoutesRecognized } from ‘@angular/router‘;import { Http, Headers } from ‘@angular/http‘;import { Observable } from ‘rxjs/Rx‘;import { EventManager, AlertService } from ‘ng-...
Learn how to update part of form model, full form model and reset whole form. We have form definetion like this:reactiveForm: FormGroup;constructor(fb: FormBuilder) {this.extra = new FormControl(‘...‘, [Validators.maxLength(100)]);this.reactiveForm = fb.group({// title <-- formControlName="title" title: [‘Title‘, // <-- Default value [Validators.required,Validators.minLength(3)] //...
Using Radio Buttons in Angular 2 requires a basic understanding of forms as well as how their labels will match up with each input. This lesson shows how to use *ngFor with radio buttons and covers the quirks of the id property and forattributes as well as how to style validation of radio buttons. <!-- Radio button--><form action="" name="myFom4" #myForm4="ngForm"><div *ngFor="let location of loca...
在NiceFish项目中，数据请求处理并没有用Promise的那一套方法，用的是Observable(观察者模式)，我将其理解成生产者和消费者模式 如下简单例子：出自(https://segmentfault.com/a/1190000005051034)var observable = Rx.Observable.create(function (observer) {observer.next(1);observer.next(2);observer.next(3);setTimeout(() => {observer.next(4);observer.complete();}, 1000); });console.log(‘just before subscribe‘);...
这里简单的记录自己在angular2中，使用组件通信的一些方法。方便自己以后的使用。一、组件之间通信的方式使用事件通信（EventEmitter，@Output）：场景：可以在父子组件之间进行通信，一般使用在子组件传递消息给父组件；步骤：a. 子组件创建事件EventEmitter对象，使用@output公开出去；b. 父组件监听子组件@output出来的方法，然后处理事件。代码： // child 组件@Component({selector: ‘app-child‘,template: ‘‘,style...
1. 说明典型的模块是一个内聚的代码块，用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的，而且Angular 本身就是一组模块库。模块主要是导出一些东西——类，函数，值，供其它模块导入，然后使用这个类，函数或者值。Angular2 应用是模块化的，并且 Angular2 有自己的模块系统，它被称为 Angular2 模块 或 NgModules。NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule 接收一个元数据对象，该对象告诉...
第一步：安装Node.js,npm(安装Node.js的时候自动就安装了npm)第二部：安装npm，由于npm官网镜像访问太慢，我们使用淘宝的npm镜像，在node命令窗口（windows的cmd、linux的终端）$ npm install -g cnpm --registry=https://registry.npm.taobao.org第三部：设置淘宝镜像，临时切换npm源为taobao源（速度快一点）：npm config set registry https://registry.npm.taobao.org 第四部:安装"@angular/cli脚手架，$npm install --save-de...
Error: ELOOP: too many symbolic links encountered, stat ‘E:\study\angular2\DaMoQiongQiu\routeTemplate\node_modules\.0.1.5@es6-map\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_modules\es5-ext\node_modules\es6-iterator\node_modules\d\node_m...