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...
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,根据自己的理解添加一些自己的理解,有什么不对的地方请指教,学习的地址是https://angular.cn/下边是分享一下我学习过程angular2和angular1一样,都需要创建跟模块angular1一般默认用app文件作为根模块的创建文件,创建方式如下angular.module(‘app‘, [‘ui.router‘])
中括号内部位自己引用的第三方的一些插件或者服务。angular2也同样需要创建根模块,创建方式发生了一点变化,创建方式如下imp...
NgForm - 表单指令NgForm指令为表单元素/form建立一个控件组对象,作为控件的容器; 而NgControlName指令为则为宿主input元素建立一个控件对象,并将该控件加入到NgForm指令建立的控件组中:局部变量通过使用#符号,我们创建了一个引用控件组对象(注意,不是form元素!)的局部变量f。 这个变量最大的作用是:它的value属性是一个简单的JSON对象,键对应于input元素的 ng-control属性,值对应于input元素的值:声明指令依赖NgForm...
本文将从头开始编写实际的代码来完成一个angular2的demo。题外话是其实angular2官网的快速开始项目已经很酷炫了,但其侧重快速二字,只够拿来练习玩耍,倒是github上确实已经有了一些不错的angular2-starter。 1. 安装必要的node环境与npm当然TS环境也是必须的,目前TS已经更新到了2.1.5+,笔者使用的就是2.1.5版本,且最好使用2.0以上版本的TS,否则会有一些尴尬的问题(包括类型定义以及编译错误)。 2.关于编辑器笔者使用的是VSCo...
第一步:在html模板中,写路由链接,并保证有路由出口 第二步:写自定义的路由指令和路由出口组件,因为在单元测试中不需要引入真实的路由,此处我们用虚拟的代替即可。 第三步:将自定义的虚拟路由指令和路由出口引入测试程序。此处路由相关的测试项被封装到方法 routerTest() 中了。 第四步:路由相关的基础测试 原文:https://www.cnblogs.com/jing5990/p/12371926.html
ng2 路由的概念和游览器类似, 和 ui-router 也类似, 下面会把具体功能逐一解释 1. html5 和 hash # ng2 默认模式是 html5, 在开发阶段我们喜欢使用 hash 模式, 这样可以不用部署服务器.要从 html5 转换成 hash 只要做一个小设定 : 原文:http://www.cnblogs.com/keatkeat/p/5810987.html
解决方法:在 component 中引入 import { DomSanitizer } from "@angular/platform-browser";然后在构造函数中注入 constructor(private sanitizer: DomSanitizer){ }最后将超链接地址url修改为:let url = this.sanitizer.bypassSecurityTrustUrl(url);再将这处理过的 url 放到相应地方,就可以找开了原文:http://www.cnblogs.com/flxy-1028/p/7339752.html
首先,需要在VS2015环境下更新到update2,并安装asp.net core环境,并安装Node.js插件。新建asp.net core项目:此时,需要先新建npm配置文件,如图:并定义node.js需要加载的文件: 1{2"name": "angular2-quickstart",3"version": "1.0.0",4"scripts": {5"tsc": "tsc",6"tsc:w": "tsc -w",7"lite": "lite-server",8"start": "concurrent \"npm run tsc:w\" \"npm run lite\" " 9 },
10"license": "ISC",
11"dependencies": {
12"an...
NgFormControl - 绑定已有控件对象与NgControlName指令不同,NgFormControl将已有的控件/Control对象绑定到DOM元素 上。当需要对输入的值进行初始化时,可以使用NgFormControl指令。下面的代码中,使用NgFormControl指令将DOM元素绑定到组件EzComp的成员 变量movie上,我们需要在构造函数中先创建这个Control对象: 1@View({2//将输入元素绑定到已经创建的控件对象上 3 template : `<input type="text" [ng-form-control]="mov...
模态框是项目中经常会用到的一个公共功能,通常会被用左提示框或者扩展选项框。下面,我用一个小例子来简单展示实现模态框功能的过程:1、为项目加包:ng add ngx-bootstrap 2、在xxx.module.ts(模块.ts文件)中引入:...
import { ModalModule } from "ngx-bootstrap/modal";
...@NgModule({imports: [...ModalModule.forRoot(),...]
})
...
3、创建一个模块框公共组件://.ts部分import { Component } from ‘@angular/core‘;
i...
Angular2组件可以这么理解:编写一个类,然后在类的上面用组件装饰器装饰一下,这个类就成组件了。 所以编写组件分两步:1)编写类;2)编写装饰器 1)编写类:export class SimpleComponent {} 2)在类上面编写装饰器:@Component({selector: ‘simple-component‘,template: `Hello Simple Component!`
}) 完整代码如下:@Component({selector: ‘simple-component‘,template: `Hello Simple Component!`
})
ex...
概述Angular2官方推荐的应该是使用systemjs加载, 但是当我使用到它的tree shaking的时候,发现如果使用systemjs+rollup,只能打包成一个文件,然后lazy loading就没法搞了。因此我使用了webpack2,webpack2自带tree shaking,只要将tsconfig中的module设置成es2015就可以, 虽然效果没rollup好,但支持lazy loading。另外, angular2目前不支持typescript 2.1.X,所以如果想在"target": "es5"前提下使用async/await就不行了,但是可...