Angular2入门体验

时间:2022-05-11
本文章向大家介绍Angular2入门体验,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

好的工具往往使得开发应用更快更简单,而不是任何模块都手动开发。angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试、打包、部署等迭代。

本文的目的就是基于TypeScript开发构建一个angualr应用,使用angualr cli可以选择工程的风格。

在本章的 末尾,你可以理解CLI的开发以及开发完整应用的样例。

也可以通过这个链接直接下载源码。

第一步,配置环境变量

在开始开发前,需要安装nodejs。

点击这个网址,Nodejs安装文件下载

在命令行中,执行:

sudo npm install -g @angular/cli

注意执行命令的权限,否则会提示无法写入文件异常。

第二步,创建新工程

打开命令行,创建一个新的工程框架:

ng new my-app

创建工程需要花点时间,稍等一会就行了。

第三步,启动应用

在项目目录,执行命令:

cd my-app
ng serve --open

ng serve会启动服务器,监控文件,当修改的时候重启应用。 使用--open 选项会自动开启浏览器并访问http://localhost:4200

可以看到下面的信息:

第四步,编辑angular组件

cli创建了angualr组件,应用组件被命名为app=root,可以在./src/app/app,component.ts中看到。打开文件,修改:

src/app/app.component.ts

export class AppComponent {
  title = 'My First Angular App!';
}

浏览器会自动加载重新显示标题。看起来还不错,不过可以在优化一下。 打开src/app/app.component.css设置样式

h1 {
  color: #369;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 250%;
}

看起来就不错了。

项目文件

首先可以关注下readme.md,它里面包含了cli的基本操作。

更多信息可以参考:

src目录

应用所有的内容都在src目录中,包括组件、模板、样式、图片或者任何app需要的东西。在src之外的内容都被认为是支持app构建的资源。

src
.
├── README.md
├── e2e
│   ├── app.e2e-spec.ts
│   ├── app.po.ts
│   └── tsconfig.e2e.json
├── karma.conf.js
├── node_modules
│   ├──...
├── package-lock.json
├── package.json
├── protractor.conf.js
├── src
│   ├── app
│   ├── assets
│   ├── environments
│   ├── favicon.ico
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── styles.css
│   ├── test.ts
│   ├── tsconfig.app.json
│   ├── tsconfig.spec.json
│   └── typings.d.ts
├── tsconfig.json
└── tslint.json

app目录

file

作用

app/app.component.{ts,html,css,spec.ts}

通过html模板定义app,是应用基础组件

app/app.module.ts

描述如何定义应用

assets/*

用来放置图片和部署应用时需要的资源

environments/*

配置信息

favicon.ico

网站图标

index.html

主要的html文件,一般时候不需要修改。CLI会自动添加js和css资源

main.ts

应用的主要入口,基于JIT编译应用,并在浏览器中运行。

polyfills.ts

浏览器支持标准相关

styles.css

样式文件

test.ts

单元测试

tsconfig.{app

spec}.json

root目录

src目录下包含了工程内部的内容,其他的文件则帮助测试、支持、文档、发布应用。

file

作用

e2e

里面包含了点对点的测试文件

node_modules

依赖的资源,基于package.json管理

.angular-cli.json

cli的配置文件

.editorconfig

编辑器配置

.gitignore

git忽略的文件

karma.conf.js

karma test 单元测试

package.json

npm管理的第三方组件

protractor.conf.js

Protractor测试配置文件

readme.md

工程基本的信息

tsconfig.json

TypeScript编译配置

tslint.json

TSLint配置