[FE] Hello Angular

AngularJS 1.x是Angular的上一代框架,
Angular团队做了规范,老框架为AngularJS 1.x,新框架统称为Angular,
Angular使用了TypeScript进行开发,与AngularJS 1.x不兼容,而且采用了语义化的版本号,以后是向下兼容的。

1. 安装Angular

(1)全局安装Angular CLI

npm install -g @angular/cli

(2)创建样板工程

ng new my-app

(3)打开服务

cd my-app
ng serve --open

ng serve会打开服务,监控文件的变更,并自动重新构建,
--open选项(或简写为-o),会自动打开浏览器,并访问http://localhost:4200/

注:
执行ng serve --open的时候可能会报错,

getaddrinfo ENOTFOUND localhost
Error: getaddrinfo ENOTFOUND localhost
    at errnoException (dns.js:50:10)
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:92:26)

可以通过iHosts绑定域名localhost到本机IP来解决,

127.0.0.1 localhost

2. 应用目录

2.1 构建产品代码

Angular应用位于src文件夹中,我们可以使用如下命令进行构建,

ng build --env=prod

它将生成产品代码到./dist目录中,访问http://localhost:4200/dist/index.html可以进行查看。

2.2 目录结构

src
├── app
│   ├── app.component.css
│   ├── app.component.html
│   ├── app.component.spec.ts
│   ├── app.component.ts
│   └── app.module.ts
├── assets
├── environments
│   ├── environment.prod.ts
│   └── environment.ts
├── favicon.ico
├── index.html
├── main.ts
├── polyfills.ts
├── styles.css
├── test.ts
├── tsconfig.app.json
├── tsconfig.spec.json
└── typings.d.ts

2.3 文件介绍

(1)index.html
index.html是首页,CLI工具会自动添加js和css文件进去,
所以并没有包含

你可能感兴趣的:([FE] Hello Angular)