记一次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,在搭建环境过程中遇到了不少问题,刚好最近有时间整理出来. 二.开发环境搭建 参 ...
随机推荐
- Solr Facet 统计查询
一)概述 Facet是solr的高级搜索功能之一,可以给用户提供更友好的搜索体验.在搜索关键字的同时,能够按照Facet的字段进行分组并统计.例如下图所示,你上淘宝,输入“电脑”进行搜索,就会出现品牌 ...
- 102. Binary Tree Level Order Traversal + 103. Binary Tree Zigzag Level Order Traversal + 107. Binary Tree Level Order Traversal II + 637. Average of Levels in Binary Tree
▶ 有关将一棵二叉树转化为二位表的题目,一模一样的套路出了四道题 ▶ 第 102 题,简单的转化,[ 3, 9, 20, null, null, 15, 7 ] 转为 [ [ 15, 7 ] , [ ...
- eclipse自动生成.apt_generated、factory path
- java.util.ConcurrentModificationException异常分析
Java在操作ArrayList.HashMap.TreeMap等容器类时,遇到了java.util.ConcurrentModificationException异常.以ArrayList为例,如下 ...
- 背景半透明rgba最佳实践
by 一丝 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...
- 为什么需要maven,maven能解决什么问题 ,maven是什么
- 01b-1: 性能测度
- iOS App图标和启动画面尺寸
注意:iOS所有图标的圆角效果由系统生成,给到的图标本身不能是圆角的. 1. 桌面图标 (app icon) for iPhone6 plus(@3x) : 180 x 180 for iPhone ...
- 修改数据库的instance_name和db_name
分成两个步骤,先修改instance_name,在修改db_name 修改SID1.全备份数据库RMAN> backup as compressed backupset database inc ...
- DSO(dsoframer)的接口文档
(开发环境)使用前先注册一下DSOFramer.ocx 操作:将DSOFramer.ocx复制到C:\windows\system32目录下, 开始->运行->reg ...