angular2安装笔记
主要摘自:http://www.runoob.com/angularjs2/angularjs2-typescript-setup.html
http://blog.csdn.net/lgpwwa/article/details/51788035
开始尝试的时候npm install一直不能正常生成modules文件内的东东,后来试了多次才知道,大概是因为服务器访问的问题,官网的镜像访问太慢或者不能访问,导致不能正常下载镜像,使用类似代理服务的东东(当然代理还有多种方式,我只尝试了这一种),使用淘宝的镜像,直接在命令行运行:
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后就可以一直 cnpm 命令来安装模块. 首先是四个文件的创建:
创建目录
$ mkdir angular-quickstart
$ cd angular-quickstart
创建配置文件
Angular 项目需要以下几个配置文件:
- package.json 标记本项目所需的 npm 依赖包。
- tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
- typings.json为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
- systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。a
在 angular-quickstart 中创建以下几个文件,代码如下所示:
package.json 文件:
tsconfig.json 文件:
typings.json 文件:
systemjs.config.js 文件:
cnpm install
执行成功后,angular-quickstart 目录下就会生成一个 node_modules 目录,这里包含了我们这个实例需要的模块,我们可以看下项目的目录结构:
不过我就没有那么好运,没有生成typings文件夹,命令行一直停留在“resolved node”,不要管他,等到死他也没往下走,
然后就是借鉴另一个了,
若npm install 运行结束后没有生成typings目录, 手动安装(这里也是cnpm不是npm):cnpm run typings install,
到此安装就成功了,接下来的就是常见自己的第一个小demo了。
第二步:创建应用
我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。
Angular 本身是被拆成一些独立的 Angular 模块,这样我们在应用中只需要导入需要的 Angular 部分。
每个 Angular 应用至少需要一个root module(根模块) ,实例中为 AppModule 。
接下来我们在 angular-quickstart 目录下创建 app 目录:
$ mkdir app
$ cd app
然后在 app 目录下创建 app.module.ts 文件,代码如下所示:
app.module.ts 文件:
由于 QuickStart 是一个运行在浏览器中的 Web 应用,所以根模块需要从 @angular/platform-browser 中导入 BrowserModule 并添加到 imports 数组中。
创建组件并添加到应用中
每个 Angular 应用都至少有一个根组件, 实例中为 AppComponent,app.component.ts 文件代码如下:
app.component.ts 文件:
代码解析:
以上代码从 angular2/core 引入了 Component 包。
@Component 是 Angular 2 的装饰器 ,它会把一份元数据关联到 AppComponent 组件类上。
my-app 是一个 CSS 选择器,可用在 HTML 标签中,作为一个组件使用。
@view 包含了一个 template ,告诉 Angular 如何渲染该组件的视图。
export 指定了组件可以再文件外使用。
接下来我们重新打开 app.module.ts 文件,导入新的 AppComponent ,并把它添加到 NgModule 装饰器的 declarations 和 bootstrap 字段中:
app.module.ts 文件:
第四部:启动应用
接下来我们需要告诉 Angular 如何启动应用。
在 angular-quickstart/app 目录下创建 main.ts 文件,代码如下所示:
main.ts 文件:
以上代码初始化了平台,让你的代码可以运行,然后在该平台上启动你的 AppModule。
定义该应用的宿主页面
在 angular-quickstart 目录下创建 index.html 文件,代码如下所示:
index.html 文件:
这里值得注意的地方有:
JavaScript 库: core-js 是为老式浏览器提供的填充库, zone.js 和 reflect-metadata 库是 Angular 需要的,而 SystemJS 库是用来做模块加载的。
SystemJS 的配置文件和脚本,可以导入并运行了我们刚刚在 main 文件中写的 app 模块。
<my-app> 标签是应用载入的地方
添加一些样式
我们可以在 angular-quickstart 目录的 styles.css 文件中设置我们需要的样式:
styles.css 文件:
打开终端窗口,输入以下命令(注意这里是npm不是cnpm哦):
npm start
不知道您是不是成功了呢。
angular2安装笔记的更多相关文章
- MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记
MonoDevelop 4.2.2/Mono 3.4.0 in CentOS 6.5 安装笔记 说明 以root账户登录Linux操作系统,注意:本文中的所有命令行前面的 #> 表示命令行提示符 ...
- 基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记
基于Ubuntu14.04系统的nvidia tesla K40驱动和cuda 7.5安装笔记 飞翔的蜘蛛人 注1:本人新手,文章中不准确的地方,欢迎批评指正 注2:知识储备应达到Linux入门级水平 ...
- sublime 安装笔记
sublime 安装笔记 下载地址 安装package control 根据版本复制相应的代码到console,运行 按要求重启几次后再按crtl+shift+p打开命令窗口 输入pcip即可开始安装 ...
- docker在ubuntu14.04下的安装笔记
本文主要是参考官网教程进行ubuntu14.04的安装. 下面是我的安装笔记. 笔记原件完整下载: 链接: https://pan.baidu.com/s/1dEPQ8mP 密码: gq2p
- ArchLinux 安装笔记:续 --zz
续前话 在虚拟机里调试了几天,终于鼓起勇气往实体机安装了,到桌面环境为止的安装过程可以看我的前一篇文章<ArchLinux 安装笔记>.桌面环境我使用的是 GNOME,虽然用了很长一段时间 ...
- Hadoop1.x与2.x安装笔记
Hadoop1.x与2.x安装笔记 Email: chujiaqiang229@163.com 2015-05-09 Hadoop 1.x 安装 Hadoop1.x 集群规划 No 名称 内容 备注 ...
- PHP7安装笔记
PHP7安装笔记 时间 -- :: 喵了个咪 原文 http://www.hdj.me/php7-install-note 主题 PHP # 安装mcrypt yum install -y php-m ...
- python 库安装笔记
python 库安装笔记 zoerywzhou@163.com http://www.cnblogs.com/swje/ 作者:Zhouwan 2017-2-22 友情提示 安装python库的过程中 ...
- 开始使用gentoo linux——gentoo安装笔记(下)
gentoo安装笔记(下) 上一章,已经对操作系统安装做了充分准备,并且已经从livecd(u盘系统)切换进入了gentoo安装环境中. 不过现在才是真正的开始!打起精神!这可不是在装ubuntu! ...
随机推荐
- maven使用阿里代理下载
<mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http:/ ...
- Python循环列表删除元素问题
有人会遇到这种问题,遍历列表,想删除列表中的某几个元素,执行后发现有些并没有删除到, 比如以下代码 a=[1,2,3,4,5,6]print(a) for i in a: if i==3 or i== ...
- 自定义Django的中间件
分析Django的生命周期,我们知道所有的http请求都要经过Django的中间件. 假如现在有一个需求,所有到达服务端的url请求都在系统中记录一条日志,该怎么做呢? Django的中间件的简介 D ...
- 第一次安装jshint,jshint新手使用记录
刚刚出来工作的渣渣,第一次进入这样比较正规的公司,各个开发流程都比较严格,代码也是要经过jshint的检测才能上传到svn才能成功打包项目.所以我这种技术都半桶水的职场开发小白,也是第一次用jshin ...
- 第6章 Overlapped I/O, 在你身后变戏法 ---1
这一章描述如何使用 overlapped I/O(也就是 asynchronous I/O).某些时候 overlapped I/O 可以取代多线程的功用.然而,overlapped I/O 加上co ...
- http://codeforces.com/contest/610/problem/D
D. Vika and Segments time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- 机器学习理论提升方法AdaBoost算法第一卷
AdaBoost算法内容来自<统计学习与方法>李航,<机器学习>周志华,以及<机器学习实战>Peter HarringTon,相互学习,不足之处请大家多多指教! 提 ...
- I/O输入输出流
I/O(输入/输出) 在变量.数组和对象中存储的数据是暂时存在的,程序结束后它们就会消失.为了能够永久地保存创建的数据,需要将其保存在磁盘文件中,这样可以在其他程序中使用它们. Java的I/O技术可 ...
- [转载]Reids配置文件详解
# redis 配置文件示例 # 当你需要为某个配置项指定内存大小的时候,必须要带上单位, # 通常的格式就是 1k 5gb 4m 等酱紫: # # 1k => 1000 bytes # 1kb ...
- Java面向对象 异常
Java面向对象 异常 知识概要: (1)异常的概述 (2)异常的体系 (3)异常的处理 ...