Angular学习(一) Hello World

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 –

文章目录
  1. 1. Angular-Cli 的安装与使用
    1. 1.1. 1.node.js环境
    2. 1.2. 2.创建angular项目
    3. 1.3. 3.Cli常用指令
    4. 1.4. 4.helloworld工程
    5. 1.5. 5.工程目录说明
|