记一次Angular2环境搭建及My First Angular App小demo呈现
参考连接?不如说是照搬链接。AngularJs官网地址快速起步地址。
对于一个一直只是用jq,偶尔学习点Knockout js,了解一点mvvm结构的前端来说,学习Angular2还是有点困难的。好了,废话少说。开始快速起步Demo案例的学习
首先选择一个编写前端代码的IDE.选择的有很多,比如SublimeText,JetBrains WebStorm等,我选择的是VsCode,这个更贴近我。一些智能提示,插件,对各个语言的支持比较广泛,当然开发AngularJs2也是合适的。
环境准备
首先下载安装vscode。下载地址http://code.visualstudio.com/.
下载按照Node.js,https://nodejs.org/en/ 为什么要安装它,因为要安装包,而它,Node.js 的包管理器 npm,是全球最大的开源库生态系统。安装好之后NPM也安装好了。在cmd中输入node -v命令可以查看版本
输入npm -v 命令也可以查看npm的版本。这就为下面的安装包打好了基础。
步骤 1 :创建并配置本项目
这一步我们将:
创建项目目录
创建配置文件
安装包
创建项目目录 angular-quickstart。
创建配置文件
典型的 Angular 项目需要一系列配置文件
- package.json 用来标记出本项目所需的 npm 依赖包。 就是该项目需要哪些包
- tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
- systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。 它还包括文档中后面的例子需要用到的包。 就是先安装很多包,需要用的时候导入到项目中就行
在你的项目目录中创建这些文件,并从下面的例子框中拷贝粘贴文本来填充它们。
package.json
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"@angular/common": "~2.1.1",
"@angular/compiler": "~2.1.1",
"@angular/core": "~2.1.1",
"@angular/forms": "~2.1.1",
"@angular/http": "~2.1.1",
"@angular/platform-browser": "~2.1.1",
"@angular/platform-browser-dynamic": "~2.1.1",
"@angular/router": "~3.1.1",
"@angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"@types/core-js": "^0.9.34",
"@types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
安装依赖包
使用 npm
命令来安装 package.json
中列出的依赖包。请在 Windows 的 cmd 窗口(或者git的bash) 中输入下列命令:npm install
在安装期间可能出现红色的错误信息,你还会看到 npm WARN
信息。不过不用担心,只要末尾处没有 npm ERR!
信息就算成功了。
Error messages—in red—might appear during the install, and you might see npm WARN
messages. As long as there are no npm ERR!
messages at the end, you can assume success.
步骤 2 :创建应用
我们用 NgModules 把 Angular 应用组织成了一些功能相关的代码块。 Angular 本身也被拆成了一些独立的 Angular 模块。 这让你可以只导入你应用中所需的 Angular 部件,以得到较小的文件体积。
每个 Angular 应用都至少有一个模块: 根模块 ,在这里它叫做 AppModule
。
** 在应用的根目录下创建 app 子目录:
使用下列内容创建 app/app.module.ts
文件:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser'; @NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }
这里是应用的入口点。
由于 QuickStart 是运行在浏览器中的 Web 应用,所以根模块需要从 @angular/platform-browser
中导入 BrowserModule
并添加到 imports
数组中。
这是要让最小的应用在浏览器中运行时,对 Angular 的最低需求。
步骤 3 :创建组件并添加到应用中
每个 Angular 应用都至少有一个组件: 根组件 ,这里名叫 AppComponent
。
组件是 Angular 应用的基本构造块。每个组件都会通过与它相关的模板来控制屏幕上的一小块(视图)。
使用下列内容创建组件文件 app/app.component.ts
:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>My First Angular App</h1>'
})
export class AppComponent { }
QuickStart 应用具有和其它 Angular 组件相同的基本结构:
import 语句 。它让你能访问 Angular 核心库中的
@Component
装饰器函数。@Component 装饰器 ,它会把一份 元数据 关联到
AppComponent
组件类上:selector 为用来代表该组件的 HTML 元素指定简单的 CSS 选择器。
template 用来告诉 Angular 如何渲染该组件的视图。
组件类 通过它的模板来控制视图的外观和行为。这里,你只有一个根组件
AppComponent
。由于这个简单的 QuickStart 范例中并不需要应用逻辑,因此它是空的。A component class that controls the appearance and behavior of a view through its template. Here, you only have the root component,
AppComponent
. Since you don't need any application logic in the simple QuickStart example, it's empty.
我们还要 导出 这个 AppComponent
类,以便让刚刚创建的这个应用导入它。
编辑 app/app.module.ts
文件,导入这个新的 AppComponent
,并把它添加到 NgModule
装饰器中的 declarations
和 bootstrap
字段:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
步骤 4 :启动应用
现在,我们还需要做点什么来让 Angular 加载这个根组件。
添加新文件app/main.ts
,内容如下:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
这些代码初始化了应用所在的平台,然后使用此平台引导你的 AppModule
。
为什么要分别创建 main.ts
、应用模块 和应用组件的文件呢?
应用的引导过程与 创建模块或者 展现视图是相互独立的关注点。如果该组件不会试图运行整个应用,那么测试它就会更容易。
步骤 5 :定义该应用的宿主页面,就是网页了
在 目录下创建 index.html
文件,并粘贴下列内容:
<html>
<head>
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- . Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- . Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- . Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
这里值得注意的地方有:
- JavaScript 库:
core-js
是为老式浏览器提供的填充库,zone.js
和reflect-metadata
库是 Angular 需要的,而SystemJS
库是用来做模块加载的。 SystemJS
的配置文件和一段脚本,它导入并运行了我们刚刚在main
文件中写的app
模块。<body>
中的<my-app>
标签是应用程序的入口,代表一个应用!
步骤 6 :编译并运行应用程序
打开终端窗口,并输入如下命令:npm start
该命令会同时运行两个并行的 node 进程:
- TypeScript 编译器运行在监听模式。
- 一个名叫 lite-server 的静态文件服务器,它把
index.html
加载到浏览器中,并且在该应用中的文件发生变化时刷新浏览器。
稍后,一个浏览器页标签就会打开并显示出来。
步骤 7 :做一些即时修改
尝试把 app/app.component.ts
中的消息修改成 "My SECOND Angular App" 。
TypeScript 编译器和 lite-server
将会检测这些修改,重新把 TypeScript 编译成 JavaScript ,刷新浏览器,并显示修改过的消息。
当终止了编译器和服务器之后,可以关闭 terminal 窗口。
记一次Angular2环境搭建及My First Angular App小demo呈现的更多相关文章
- .Net Core + Angular2 环境搭建
环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs), ...
- 痞子衡嵌入式:语音处理工具Jays-PySPEECH诞生记(1)- 环境搭建(Python2.7.14 + PyAudio0.2.11 + Matplotlib2.2.3 + SpeechRecognition3.8.1 + pyttsx3 2.7)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是语音处理工具Jays-PySPEECH诞生之环境搭建. 在写Jays-PySPEECH时需要先搭好开发环境,下表列出了开发过程中会用到的 ...
- 痞子衡嵌入式:串口调试工具Jays-PyCOM诞生记(1)- 环境搭建(Python2.7.14 + pySerial3.4 + wxPython4.0.3)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是串口调试工具Jays-PyCOM诞生之环境搭建. 在写Jays-PyCOM时需要先搭好开发和调试环境,下表列出了开发过程中会用到的所有软 ...
- angular2环境搭建
Angular2.x与Angular1.x完全不同,Angular2.x是不兼容Angular1.x的,所在在框架的构造上,它们是完全不同的.在Angular2.x中,因为其是基于ES6来开发的,所以 ...
- Qt开发Activex笔记(一):环境搭建、基础开发流程和演示Demo
前言 使用C#开发动画,绘图性能跟不上,更换方案使用Qt开发Qt的控件制作成OCX以供C#调用,而activex则是ocx的更高级形式. QtCreator是没有Active控件项目的,所有需要 ...
- Cordova 开发环境搭建及创建第一个app
整理记录使用cordova创建app应用程序并将其部署至Android系统移动设备上操作过程,具体如下: 一.前期安装环境 1. 安装JDK(java开发工具包) 2. 安装gradle 3. 安装A ...
- BlackBerry10 开发环境搭建
最近开始学习BlackBerry10的开发,黑莓10系统是2013年1月30日黑莓公司正式发布的,目前网上资料比较少,这篇博客的内容基本上是按照官网上的文档写的.BlackBerry10目前支持C/C ...
- java项目测试环境搭建
java项目测试环境搭建 2019-03-06 13:45:26 木瓜小少年 阅读数 691更多 分类专栏: 测试 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原 ...
- Ionic2 cordova angular2 打包到Android apk环境搭建
一.前言 前段时间,公司有个APP项目需要支持不同平台,于是采用了Ionic2 + cordova + angular2,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...
随机推荐
- word2vec相关
word '\xe8\xb6\x85\xe8\x87\xaa\xe7\x84\xb6\xe7\x8e\xb0\xe8\xb1\xa1' not in vocabulary 分词后的样本格式:英雄联盟, ...
- SpringBoot2.0实现静态资源版本控制
写在最前面 犹记毕业第一年时,公司每次发布完成后,都会在一个群里通知[版本更新,各部门清理缓存,有问题及时反馈]之类的话.归根结底就是资源缓存的问题,浏览器会将请求到的静态资源,如JS.CSS等文件缓 ...
- MySQL GTID (三)
五.如何跳过一个GTID 环境见系列一 5.1 创建表,模拟数据 #主机上 create table t_test (id int primary key ,name varchar(10)); in ...
- 一行代码让App运行时iPhone不会进入锁屏待机状态
转自:http://www.cocoachina.com/iphonedev/sdk/2010/1028/2260.html 如果你不希望应用运行时 iPhone 进入锁屏待机状态,加入下面这行代码即 ...
- 从LinqPad入门Linq
为什么要学习Linq? 在我们日常开发中,经常需要从数据库中执行各式各样的查询来获取需要的数据.但是如果需要对查询获得的数据进行二次筛选呢?linq就提供了对于可枚举类型(实现IEnumerable接 ...
- java用while循环设计轮询线程的性能问题
java用while循环设计轮询线程的性能问题 轮询线程在开发过程中的应用是比较广泛的,在这我模拟一个场景,有一个队列和轮询线程,主线程往队列中入队消息,轮询线程循环从队列中读取消息并打印消息内容.有 ...
- 命名空间p方式的属性注入
---------------------siwuxie095 命名空间 p 方式的属性注入 命名空间 p 方式的属性注入是 Spring 2.x 版本后提供的方式 1.编写一个普通类 Book.ja ...
- webkit com wrapper 推荐!
https://groups.google.com/forum/#!topic/microsoft.public.vb.general.discussion/ZaFY95aDZoY http://ww ...
- [Training Video - 6] [File Reading] Making a Jar file with eclispe, Importing custom jars in SoapUI
Code example : package com.file.properties; import java.io.FileInputStream; import java.util.Propert ...
- Java程序设计17——多线程-Part-B
5 改变线程优先级 每个线程执行都具有一定的优先级,优先级高的线程获得较多的执行机会,而优先级低的线程则获得较少的执行机会. 每个线程默认的优先级都与创建它的父线程具有相同的优先级,在默认情况下,ma ...