Angular总结一:环境搭建

Posted xinjie-just

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular总结一:环境搭建相关的知识,希望对你有一定的参考价值。

工欲善其事必先利其器,开发 Angular 项目首先要搭建环境。Angular 的环境搭建包括三个方面,开发环境 WebStorm,命令行工具 Angular CLI,以及 nodejs。

一、安装 nodejs

进入到 nodejs 的官网 https://nodejs.org/en/ 去下载安装包,下载慢的同学可以去我的百度网盘下载:https://pan.baidu.com/s/1mkilULq 密码:uaf7

技术分享图片

根据电脑操作系统推荐了不同的版本,这里可以选择以上两个中的其中一个,下载完成后是一个 msi 文件

技术分享图片

右键选择安装

技术分享图片

然后一路点击Next就行了。

安装完成后,运行cmd打开命令行工具,输入 node -v 如果出现版本号,就说明nodejs安装成功了。安装nodejs的同时,nodejs的包管理器npm也一并安装完成了。

技术分享图片

 

二、安装 Angular命令行工具 Angular CLI

CLI 是 Command Line Interface 的简写,是一种命令行接口,实现自动化开发流程,比如:ionic cli, vue cli 等,它可以创建项目、添加文件以及执行一大堆开发外的任务,比如测试、编译。

运行命令行 npm install -g @angular/cli 等待一会儿,安装完成后,使用 ng -v 如果出现版本号,就说明安装成功了

技术分享图片

 

三、安装 WebStorm 

去官网 http://www.jetbrains.com/webstorm/ 下载最新版本,下载慢的同学可以去我的百度网盘下载:https://pan.baidu.com/s/1smsAPlV 密码:jys4

下载完成后右键选择打开

技术分享图片

一路点击 Next 进行安装就可以了。

 

四、新建 Angular 项目

安装完成需要的工具后,就可以使用命令 ng new project-name 来新建一个 angular 项目了

首先进入到我想要放置项目的 G 盘,然后进入到指定的目录 angular,在运行 ng new angular-project1 创建了一个名为 angular-project1 的 Angular 项目

技术分享图片

 

五、运行项目

首先进入项目 cd angular-project1, 然后运行项目 npm start,等待 webpack 进行模块的打包

技术分享图片

编译完成后,可使用 http://localhost:4200/ 查看项目(4200是默认端口,打开地址可以在上图中 open your browser on http://localhost:4200/ 这句话中看出)

技术分享图片

 

六、Angular 框架目录文件含义 

.editorconfig                         // ide 的一个配置文件
README.md                             // 该应用的一些简介
src/app/app.component.css             // 项目的主样式
src/app/app.component.html            // 项目的主模板
src/app/app.component.spec.ts
src/app/app.component.ts              // 项目的主组件,定义AppModule,这个根模块会告诉Angular如何组装该应用
src/app/app.module.ts                 // 项目的主模块
src/assets/.gitkeep                   // 这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
src/environments/environment.prod.ts  // 环境配置,生产环境
src/environments/environment.ts       // 环境配置,默认环境,开发环境
src/favicon.ico                       // 每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
src/index.html                        // 宿主页面
src/main.ts                           // 整个web应用的入口点,angular通过该项目来启动整个项目
src/polyfills.ts                      // 导入一些必要的库,使得angular可以在一些老版本的浏览器中运行
src/styles.css                        // 公共样式
src/test.ts                           // 这是单元测试的主要入口点
src/tsconfig.app.json
src/tsconfig.spec.json
src/typings.d.ts
.angular-cli.json                     // Anguar 编译依赖(可以在其中引入一些 css 和 js 的库,如 jquery, bootstrap)
e2e/app.e2e-spec.ts                   // e2e 端对端测试目录
e2e/app.po.ts
e2e/tsconfig.e2e.json
.gitignore                            // 项目上传到 git 时,需要忽略一些文件上传的配置文件
karma.conf.js                         // 执行自动化测试的
package.json                          // npm 工具的配置文件,指明了当前这个应用所要用到的模块,Angular 的依赖包
protractor.conf.js                    // 做自动化测试的一个配置文件
tsconfig.json                         // TypeScript 编译器的参数
tslint.json                           // 定义 ts 文件质量检查的一些规则

 

以上是关于Angular总结一:环境搭建的主要内容,如果未能解决你的问题,请参考以下文章

node 环境下简单web服务器搭建代码

spring练习,在Eclipse搭建的Spring开发环境中,使用set注入方式,实现对象的依赖关系,通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

Angular最新教程-第一节环境搭建和新建项目

Ionic2 + cordova + angular2 打包Android APP环境搭建

搭建vue开发环境的步骤

搭建vue开发环境的步骤