【Angular2 Hello World 之 2.0.0-beta.14】教程文章相关的互联网学习教程文章

Angular2 初学小记

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...

1.搭建Angular2项目

简述:搭建angular2的开发环境,网上已经有许多教程,不过都是window系统下的教程,我本人使用的是linux系统,搭建环境的过程也稍微比前者麻烦了一点.1. pakeage.json配置文件:是用来声明项目中使用的模块,在部署环境时,只要在pakeage所在的目录执行npm install命令就可以安装所有需要的模块了. 新建一个文件夹作为项目的根目录,整个项目的文件都存放在这个文件夹下面.在根目录下创建一个package.json的配置文件,该...

Angular2 Hello World 之 2.0.0-beta.14【代码】【图】

公司现在采用angualrjs开发一些web应用,采用的是angular1,现在angular2已经差不多了,听说最近rc6已经出来了……其实感觉好慢啊!之前也做过一些anglar2的例子,但是没有记录下来,现在重新拾起来还费了半天劲儿!弄了半天总是报错,按着文件对比了半天也没有找打是哪里写错了……哎!最后发现是版本的问题,这次想把它记录下来,方便之后查看。 环境:Visual Studio 2015 Update 3+Asp.net core templates  一、创建一个 ...

一张图告诉你angular2所有知识点【图】

忙活了半年,从angular2.0到现在angular4.2。从没AOT到有AOT。我想说,angular2的学习曲线真的有点陡峭。只能说,angular2是一个比较完整的框架,框架就是这样,一大堆条条框框,一个项目大了,就是靠这些条条框框来保持秩序。关于之前的H5编辑器,很多人私信我,要么就是商业合作,要么就是要源码。我只想说,虽然那个编辑器是一个人搞的,但是,那时候我只是个打工的,也签了保密协议,爱莫能助。法律问题,本人不大懂,若是新写...

angular2升级到rc6【图】

之前做的小demo是RC4的,这一两个月官网就跟新到RC6了,当然就要紧跟步伐前进啦;升级的过程是痛苦的,但结果是开心的。看过RC4的童鞋应该会知道RC6改变了很多,来了一个釜底抽薪。新增了一个NgModule。模块管理。就此RC6就形成了Module-component-router-service的一个整体。使整个条理更加清楚明白。module块的复用更加灵活。先说一下升级吧,RC4没有Module的概念,所以首先为她添加根Module。然后为每一个component添加一个M...

angular2之父子组件的调用

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-...

[Angular2 Form] patchValue, setValue and reset() for Form【代码】

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)] //...

[Angular2 Form] Create Radio Buttons for Angular 2 Forms【代码】

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...

以添加评论组件为例看angular2请求数据的处理【代码】【图】

在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组件通信---自己的一点总结【代码】

这里简单的记录自己在angular2中,使用组件通信的一些方法。方便自己以后的使用。一、组件之间通信的方式使用事件通信(EventEmitter,@Output):场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件;步骤:a. 子组件创建事件EventEmitter对象,使用@output公开出去;b. 父组件监听子组件@output出来的方法,然后处理事件。代码: // child 组件@Component({selector: ‘app-child‘,template: ‘‘,style...

Angular2 NgModule

1. 说明典型的模块是一个内聚的代码块,用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的,而且Angular 本身就是一组模块库。模块主要是导出一些东西——类,函数,值,供其它模块导入,然后使用这个类,函数或者值。Angular2 应用是模块化的,并且 Angular2 有自己的模块系统,它被称为 Angular2 模块 或 NgModules。NgModules是带有 @NgModule 装饰器函数的 类 。 @NgModule 接收一个元数据对象,该对象告诉...

angular2.0最新版环境搭建与常见问题【图】

第一步:安装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...

angular2使用ng g c home/home创建组件报错【图】

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...

angular2 学习笔记 ( animation 动画 )【代码】

refer : https://angular.io/guide/animationshttps://github.com/angular/angular/blob/master/packages/animations/src/animation_metadata.ts https://github.com/angular/angular/commit/f1a9e3c (router) angular 的动画建立在一堆的方法上: 1. trigger 触发器, 用来和 dom 交互 <div [@triggerName]="state" ></div>trigger 负责定义各种 state 和它们之间变化来变化去 transitiontrigger(‘triggerA‘, [ state(‘A‘, st...

angular2学习--根模块【代码】

最近有时间,学习一下angular2,根据自己的理解添加一些自己的理解,有什么不对的地方请指教,学习的地址是https://angular.cn/下边是分享一下我学习过程angular2和angular1一样,都需要创建跟模块angular1一般默认用app文件作为根模块的创建文件,创建方式如下angular.module(‘app‘, [‘ui.router‘]) 中括号内部位自己引用的第三方的一些插件或者服务。angular2也同样需要创建根模块,创建方式发生了一点变化,创建方式如下imp...