网站首页 » 前端开发 » Angular 2+ » Angular 4.x 工程项目搭建之旅
上一篇:
下一篇:

Angular 4.x 工程项目搭建之旅

前言

Angular 2 时代的到来,终结了不少开发者对未来的向往,但完全独立于Angularjs(Angular 1)的实现,让我们对这个框架充满了前所未有的好奇。存在即使合理,所以Angular 2 的横空出世也就理所当然了。这是 Angular 2 的开始篇,本文主要讲解在使用 Angular 2 开发之前的一些准备(环境)。

安装环境

首先我们需要安装 Node.js 和 npm ,版本号也是有要求的,Node.js 至少是6.9.x 的版本以上,npm 至少是 3.x.x 的版本以上,不然会报错。Node.js 的下载可能会遇到很慢的问题,不过我尝试了几遍后还是把它下载下来了,Node.js 下载地址:https://nodejs.org/,安装完Node.js 就可以了(node.js 中已经包含了npm 所以npm 就不用装)。如果你通过 npm 安装 Angular CLI 时很慢,可以把 npm 转成淘宝的 cnpm,执行如下命令行就可以了:

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

你可以通过下面的命令行来查看已经安装的Node.js 和 npm 的版本号:

// 查看 Node.JS 版本号:
node -v 
// 查看 npm版本号:
npm -v     

现在我们就可以真正地来安装 Angular CLI 工程项目了,安装 Angular CLI 时请耐心等待,因为需要把相关的模块下载下来,执行如下命令行:

// 全局安装Angular CLI
npm install -g @angular/cli
// 或者这样(安装最新版本)
npm install -g angular-cli@latest

@angular/cli 和 @angular-cli 虽然分隔符不一样,但效果是一样的,后者在安装时会自动转换成前者。

创建工程项目

ng new my-app

回车后你会看到下面的界面,这里可能需要等几分钟,不要觉得会有什么问题,这很正常,等等就可以了。

Angular 2 工程搭建

看到上面的提示说明你已经成功地创建了一个Angular 2 项目。

访问应用

切换到工程目录 yunkus.com-app ,【右键】-【在此处打开命令窗口】,这样 CMD 就可以直接切换到yunkus.com-app 目录了,像官网那样也是可以的,直接在 CMD 里通过命令行切换到工程目录。接着运行:

// 启用应用服务
ng serve --open

这个命令行有几个作用:1.启动应用服务;2.监听文件变化。3.重建APP。

–open (也可以直接写成 –o)作用就是自动打开浏览器(http://localhost:4200/)。

服务启动完后你就可以在浏览器里访问了如下图(命令行启动完之后就可自动为你打开):

启动 Angular 2 工程项目

工程文件说明

src 目录

src 目录就是你的应用存放目录,所有的 Angular ,组件(components)、模板(templates)、样式(styles)、图片(images)、其它资源(anything else),所有在 scr 目录之外的文件,都是用来支持你的项目的。

 Angular 2 工程目录

注:图片来自官网截图

文件 用途
app/app.component.{ts,html,css,spec.ts} 定义APP根组件,以及单元测试
app/app.module.ts 定义App根模块,告诉Angular 怎么访问应用
assets/* 这里可以存放APP 资源文件,比如:图片
environments/* 存放一些配置变量,分生产环境(environment.prod.ts)和非生产环境(environment.ts)
favicon.ico 浏览器标签页小图标
index.html 默认首页,一般情况下不需要修改,CLI 会自动帮我们引入 js 和 css 文件。所以我们无需手动引入
main.ts 应用主入口文件,编译应用及启动应用(程序引导)
polyfills.ts 不同浏览器有不同的表现,而polyfills.ts 文件就帮你处理了这些差异
styles.css 全局样式表,如果想给全局添加一个样式,那么就可以在这里添加
test.ts 单元测试主入口文件,文件里面有一些自定义内容,可能你不熟悉,不过一般你也不需要编辑它
tsconfig.{app|spec}.json tsconfig.app.json 和 unit tests tsconfig.spec.json 的 TypeScript 编译配置文件

根目录

Angular 2 根目录

注:图片来自官网截图

图中第一行的my-app 就是我们上面创建的 yunkus.com-app。

文件 用途
e2e/ 单元测试
node_modules/ Angular CLI 的配置
.editorconfig 简单的配置,让别人使用你的项目时有一个基本的配置
.gitignore 设置 git 提交文件(忽略的文件)
karma.conf.js Karma test runner 单元测试的配置文件,用于 ng test 运行
package.json 用于配置第三方依赖包,你也可以在这里自定义
protractor.conf.js protractor 端到端的测试配置文件,用于 ng e2e 的运行(自动化测试的配置文件)
README.md 基本的应用文档,CLI 命令行(说明文件)
tsconfig.json IDE TypeScript 编译配置文件
tslint.json 用来定义 TypeScript 代码质量检查的规则

报错处理

安装过程可能会报错比如下面(下面这些是我从报错中提取出来的):

报错

%1 is not a valid Win32 application.

checking for Python executable “python2” in the PATH

Error: not found: python2

checking for Python executable “python” in the PATH

Error: not found: python

从中我们大概可以知道问题就出现 Python 身上,但很不幸的是我安装完 python 后还是会提示上面的错误。不过这里有一个方法可以让你继续下去,那就是忽略它,不要管这些报错。

做Angular 2项目时目前推荐使用 Visual Studio Code ,如果你对这个编辑器很陌生,也不用担心,这里我已经给你准备好了一篇关于它的介绍:Visual Studio Code 让高效进行到底

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/journey-of-building-angular-project/

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END