版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ChibiMarukoChan/article/details/83065287
第一步:安装node.js,npm,cnpm
使用命令查看版本:
//查看npm
npm -v
//查看node
node -v
//查看cnpm
cnpm -v
版本如下:
第二步:创建项目
mkdir myAngularProject
cd myAngularProject
Angular 项目需要以下几个配置文件:
- package.json 标记本项目所需的 npm 依赖包。
- tsconfig.json 定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。
- typings.json为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。
- systemjs.config.js 为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。
//淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
//安装依赖包
cnpm install
然后在当前目录下就会生成一个 node_modules 目录,包含了所需要的模块。
第三步:创建应用
接下来在myAngularProject目录下面新建app文件夹:
进入app文件夹,创建 app.module.ts 文件,写入:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ]
})
export class AppModule { }
每个 Angular 应用都至少有一个根组件, 实例中为 AppComponent,app.component.ts 文件代码如下:
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: '<h1>我的第一个 Angular 应用</h1>'
})
export class AppComponent { }
接下来我们重新打开 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 { }
第四步:启动项目
接下来我们需要告诉 Angular 如何启动应用。
在 myAngularProject/app 目录下创建 main.ts 文件,代码如下所示:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
以上代码初始化了平台,让你的代码可以运行,然后在该平台上启动你的 AppModule。
定义该应用的宿主页面
在myAngularProject 目录下创建 index.html 文件
<html>
<head>
<title>Angular 2 实例 - 菜鸟教程(runoob.com)</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. 载入库 -->
<!-- IE 需要 polyfill -->
<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>
<!-- 2. 配置 SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. 显示应用 -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
写一个简单的样式style.css放在平级目录下:
h1 {
color: #369;
font-family: Arial, Helvetica, sans-serif;
font-size: 250%;
}
h2, h3 {
color: #444;
font-family: Arial, Helvetica, sans-serif;
font-weight: lighter;
}
body {
margin: 2em;
}
第五步:编译并运行
将.ts编译成.js,然后启动项目,如果3000端口没被占用的话,默认打开访问 http://localhost:3000/
npm start
最后,放一张目录结构图: