angular环境搭建(angular-cli)

1.安装nodejs

http://nodejs.cn/download/

2.Angular命令行工具安装

npm install -g @angular/cli

ng -v                          
  Angular命令行工具安装成功

3.创建项目

Auction - 项目名称

ng new auction

创建成功后,会在该项目下创建一个auction的文件夹

命令行工具初始化生成的项目结构不可改变

4.生成文件作用

e2e : 做测试

src :  我们的代码写在这里

angular-cli.json : angular 命令行工具的配置文件

karma.confi.js (protractor.conf.js):  执行自动化测试

package.json : 标准的npm工具的配置文件,列明所使用的第三方依赖包

tslint.json : tslint的配置文件,typescript代码质量检查的一些规则

src目录中:

app :包含我们应用的组件和模块。

assets : 存放静态资源的。例如图片

environments : 环境配置

index.html : 整个应用的根html

main.ts : 脚本的执行的入口点,通过这个执行脚本

polyfills.ts : 导入一些必要的库

style.css :放全局的css样式

test.css : 搞自动化测试的

tsconfig.json : typescript编译器的一个配置

5.服务器启动

切换到项目路径

ng serve
--open

http://localhost:4200  访问  本地服务器启动

angular-环境搭建的更多相关文章

  1. Angular环境搭建

    Angular4 随笔(一)----环境搭建 1.下载node.js 第一步:在浏览器中搜索node.js官网(https://nodejs.org/zh-cn/),根据自己系统下载相应版本,下载完成 ...

  2. angular环境搭建时的坑

    安装angular环境踩过一些坑,最终还是把工程跑起来了,这里描述一下我的步骤,不排除有些步骤是多余的,希望能对遇到同样问题的小伙伴有帮助. 下载最新版node.js. 安装node,安装过程一路点下 ...

  3. Angular环境搭建及简单体验

    一.安装开发环境 npm install -g typescript npm install -g @angular/cli 二.创建hello-world项目 创建项目 ng new angular ...

  4. 001——Angular环境搭建、运行项目、搭建项目

    1.安装node.js 和cnpm 2.cnpm install -g @angular/cli   安装angular脚手架: 3.ng new angulardemo cd angulardemo ...

  5. AngularJS4.0环境搭建详解--windows系统环境

    第一步:安装NodeJS 下载最新版的NodeJS并安装,安装完成后打开CMD命令行,输入以下命令: node -v 若返回类似版本号则代表NodeJS安装成功,如下: 第二部 安装npm 新版的No ...

  6. angular开发环境搭建及新建项目

    最近一个星期准备学习一下angular前端框架,因为之前在学习abp框架的时候,都要求前端要掌握angular,所以不得不回来恶补一下了,学习的过程有时间的话会记录在这里,方便以后复习. 闲言少叙,下 ...

  7. Angular总结一:环境搭建

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

  8. Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本 ...

  9. Angular入门,开发环境搭建,使用Angular CLI创建你的第一个Angular项目

    前言: 最近一直在使用阿里的NG-ZORRO(Angular组件库)开发公司后端的管理系统,写了一段时间的Angular以后发现对于我们.NET后端开发而言真是非常的友善.因此这篇文章主要是对这段时间 ...

  10. Angular入门到精通系列教程(4)- 开发环境搭建以及入手项目

    1. 本地开发环境搭建 1.1. node.js 1.2. Angular CLI 2. 开发工具 - Visual Studio Code 第一个Anuglar项目 创建第一个anuglar项目 A ...

随机推荐

  1. spring的4种事务特性,5种隔离级别,7种传播行为

    spring事务:  事务: 事务逻辑上的一组操作,组成这组操作的各个逻辑单元,要么一起成功,要么一起失败. 事务特性(4种): 原子性 (atomicity):强调事务的不可分割. 一致性 (con ...

  2. linux下在root用户登陆状态下,以指定用户运行脚本程序实现方式

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMcAAABKCAIAAACASdeXAAAEoUlEQVR4nO2dy7WlIBBFTYIoSIIkmD ...

  3. ELK使用1-Elasticsearch使用

    一.es 1.通过curl命令获取es进群信息 a.curl -i(设置协议的头信息) -XGET 'http:192.168.30.41:9200/_count' b.查看集群状态 curl -XG ...

  4. 函数对象的call()、apply() 方法区别

    函数对象的call().apply() 方法 函数作为对象提供了call(),apply() 方法,他们也可以用来调用函数,这两个方法都接受一个对象作为参数,用来指定本次调用时函数中this的指向: ...

  5. 强大的图片展示插件,JQuery图片预览展示插件

    只需要引入JQuery.js , viewer.css 和 viewer.js <!DOCTYPE html> <html lang="en"> <h ...

  6. Practice| 流程控制

    若整数a除以非零整数b,商为整数,且余数为零, 我们就说a能被b整除(或说b能整除a),a为被除数,b为除数,即b|a("|"是整除符号),读作"b整除a"或& ...

  7. 044 SimpleDateFormat的线程安全问题与解决方案

    这个问题,以前好像写过,不过现在这篇文章,有一个重现的过程,还是值得读一读的. URL:SimpleDateFormat的线程安全问题与解决方案

  8. quratz数据存储

    Quartz 中的 trigger 和 job 需要存储下来才能被使用. 1.两种存储方式 RAMJobStore, JobStoreSupport, 其中 RAMJobStore 是将 trigge ...

  9. 20165235 祁瑛 2018-4 《Java程序设计》第九周学习总结

    20165235 祁瑛 2018-4 <Java程序设计>第九周学习总结 教材学习内容总结 URL类 UR类是java.net包中的一个重要类,使用URL创建的对象的应用程序称作称作客户端 ...

  10. Tomcat启动分析(转自:http://docs.huihoo.com/apache/tomcat/heavyz/01-startup.html)

    Tomcat启动分析 1 - Tomcat Server的组成部分 1.1 - Server A Server element represents the entire Catalina servl ...