angular 创建开发环境构建项目

原创 2018年04月16日 16:10:26

一.安装Node.js

官方网址:https://nodejs.org/en/download/
  • 1
  • 2
  • 在命令行中输入:node -v 和 npm -v 验证版本

二.全局安装Angular CLI 脚手架工具

  • 使用npm命令安装

 npm install -g @angular/cli 
  • 1
  • 安装cnpm

    国内直接装经常会出问题,所以设置为淘宝镜像地址会更好。

npm install -g cnpm --registry=https://registry.npm.taobao.org
  • 1
  • 安装angular/cli失败的方法

npm uninstall -g @angular/cli  //卸载angular/cli /
  • 1
npm cache clean  //清除缓存
  • 1
cnpm install -g @angular/cli //重新安装
  • 1
  • 检测 Angular CLI 是否安装成功

ng -v  //查看版本能否正常显示
  • 1

三.创建项目

先到cmd里进入项目所在的目录,用cd命令进入。

  • 新建项目名

ng new angular01  //
  • 1
  • 进入所建目录启动服务

cd angular01
  • 1
cnpm install     //安装依赖 
  • 1
ng serve --open  //启动服务
  • 1

四.项目的基本目录结构


├── README.md 
├── e2e 
│ ├── app.e2e-spec.ts 
│ ├── app.po.ts 
│ └── tsconfig.e2e.json 
├── karma.conf.js 
├── package.json 
├── protractor.conf.js 
├── src //主目录 
│ ├── app 
│ │ ├── app.component.css 
│ │ ├── app.component.html 
│ │ ├── app.component.spec.ts 
│ │ ├── app.component.ts //组件 
│ │ └── app.module.ts //根模块 
│ ├── assets 
│ ├── environments 
│ │ ├── environment.prod.ts 
│ │ └── environment.ts 
│ ├── favicon.ico 
│ ├── index.html 
│ ├── main.ts 
│ ├── polyfills.ts 
│ ├── styles.css 
│ ├── test.ts 
│ ├── tsconfig.app.json 
│ ├── tsconfig.spec.json 
│ └── typings.d.ts 
├── tsconfig.json 
└── tslint.json


五.补充命令

Angualr CLI提供了许多常用命令供我们选择:

ng generate class my-new-class              // 新建 class
ng generate component my-new-component      // 新建组件
ng generate directive my-new-directive      // 新建指令
ng generate enum my-new-enum                // 新建枚举
ng generate module my-new-module            // 新建模块
ng generate pipe my-new-pipe                // 新建管道
ng generate service my-new-service          // 新建服务
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
ng g cl my-new-class        // 新建 class
ng g c my-new-component     // 新建组件
ng g d my-new-directive     // 新建指令
ng g e my-new-enum          // 新建枚举
ng g m my-new-module        // 新建模块
ng g p my-new-pipe          // 新建管道
ng g s my-new-service       // 新建服务

深入 WIN2000注册表 (17) M i c r o s o f t事务处理服务器

      M i c r o s o f t事务处理服务器 简介M i c r o s o f t事务处理服务器(Microsoft Transaction Server,M T S )从Windo...
  • coolstar
  • coolstar
  • 2001-08-02 10:14:00
  • 3216

Intellij IDEA 中安装Angular 插件方法

1、先下载angular插件 AngularJS-135.831.zip 2、打开Intellij IDEA ,File—〉Settings---〉Plugins 点击“ 点击“”...
  • yanjun008
  • yanjun008
  • 2014-12-31 10:26:28
  • 7085

angularJS项目前端后端分离,IDEA中开发部署

用angular-cli代理配置来解决跨域请求问题
  • u010277553
  • u010277553
  • 2017-12-08 16:31:23
  • 1115

【Angular4.X学习笔记二】开发环境配置(windows)

文章目录: 环境准备 WebStorm安装与激活Node.js(含npm)安装Angular CLI安装使用npm命令创建Angular项目并运行在WebStorm中创建Angular项目并运...
  • hu_oo
  • hu_oo
  • 2017-07-27 08:49:02
  • 3093

AngularJs专用测试工具Protractor 搭建PhoneCat项目的开发与测试环境

它基于WebDriverJs AngularJS官方网站提供了一个用于学习的示例项目:PhoneCat。这是一个Web应用,用户可以浏览一些Android手机,了解它们的详细信息,并...
  • fishermanmax
  • fishermanmax
  • 2016-07-31 22:31:00
  • 672

AngularJs前端框架搭建(一)

(持续更新) 写在最前面,从实习到毕业后这大半年来都是在现在所在的公司工作,才开始接触公司的项目时,后端都是用的熟悉的知识,然后前端却用了从来没听说过得angularjs,从开始接触到现在,也算是会...
  • u014494857
  • u014494857
  • 2017-04-12 16:31:34
  • 8948

angularJS的文件的下载

一,使用window.location.href+url的方式 这种方式可以获取到要下载的文件,但是当下载的文件不存在,或者下载过程中后台报错的话会发生跳转 二,使用$http实现异步无刷新的下载...
  • after_you
  • after_you
  • 2017-09-25 15:33:54
  • 1403

Angular4.0.0强势发布,全向后兼容

Angular4.0.0强势发布,全向后兼容 经历了6个RC版本之后,今天Angular发布了4.0.0版本,这次发布是主版本的更新(遵循采用语义版本),并且在大多数情况下,Angular4.0版本是...
  • qq_21586623
  • qq_21586623
  • 2017-05-08 09:55:17
  • 766

AngularJS从构建项目开始

Aug 28, 2013 Tags: angularangular.jsgruntJavascriptnodejswebyeoman Comments: 19 Comments AngularJS...
  • ejinxian
  • ejinxian
  • 2015-06-22 09:43:04
  • 3447

angularjs+ionic高大上的webApp(环境配置篇)

本人在公司用eclipse4.5.1开发(或WebStorm),要添加Jboss插件:http://rensanning.iteye.com/blog/2118107   1. 配置环境   ...
  • phj_88
  • phj_88
  • 2016-05-06 07:46:37
  • 696
收藏助手
不良信息举报
您举报文章:angular 创建开发环境构建项目
举报原因:
原因补充:

(最多只允许输入30个字)