Angular学习（一） Hello World

前端 > angular
留言

Angular-Cli 的安装与使用

1.node.js环境

需要有npm包管理工具，由于npm是国外资源，可能种种原因导致npm安装比较慢，这里我们采用淘宝的npm镜像

1
npm install cnpm -g --registry=https://registry.npm.taobao.org

然后采用cnpm安装angular-cli

1
cnpm install -g @angular/cli 	||  cnpm install -g @angular/cli@latest

安装完成之后，可以通过以下命名查看版本信息

1
ng version

2.创建angular项目

我们采用先创建项目，再用cpm下载模块的方式创建angular项目，这样速度比较快。

1
ng new my-app --skip install   通过后面这个参数，先不安装模块
1
2
cd my-app
cnpm install

然后启动

1
ng server   || ng serve --host 0.0.0.0 --port 4201  ||ng serve --port 4201

访问浏览器

1
localhost:4200

3.Cli常用指令

1
ng help 可以查看各种指令的信息API
1
ng new my-app 新建一个项目

参数分类 --dry-run 只把创建环节走一遍，不会产生任何文件之类。--prefix

用Cli创建组件Component,命令如下：

1
ng g component test 创建组件test

创建Service, 创建的service要在根module上进行注册, 这里用 -m来进行注册

1
ng g service test -m src/app/app.module.ts  创建服务，并且在根module上注册

打包命令

1
ng build   大概4M左右
1
ng build -aot 预编译			压缩			2.9M
1
ng build -prod 生产环境		压缩			404k

4.helloworld工程

主页图.png

工程目录.png

5.工程目录说明

package.json：用来标记出本项目所需的 npm 依赖包。

tsconfig.json：定义了 TypeScript 编译器如何从项目源文件生成 JavaScript 代码。

typings.json：为那些 TypeScript 编译器无法识别的库提供了额外的定义文件。

webpack.config.js：为构建Angular应用所进行的一系列webpack配置。

karma.conf.js：Karma单元测试配置。

工程目录说明.png

我们在开发的时候主要就是在src/app文件中（这个前面有提到过）

src/app/app.component.ts： 这个就是处理组件业务逻辑的地方。

src/app/app.component.html： 这个就是编写组件的页面的html的地方。

src/app/app.component.css： 这个就是页面的样式编辑文件。

src/app/app.module.ts： 根模块文件，用来启动项目的文件。

src/app/app.component.spec.ts： 用于单元测试。（可选）。

具体其他的文件或者配置项在项目的根目录下的README.md中有解释。

– end –