Angular CLI 环境准备

前记：好的工具能让开发更加简单快捷。

Angular CLI是一个命令行界面工具，它可以创建项目、添加文件以及执行一大堆开发任务，比如测试、打包和发布。

主要内容：

  1. 设置开发环境。
  2. 创建新项目以及应用的骨架。
  3. 启动开发服务器。

步骤1. 开发环境准备

如果还没有Node.js和npm，请先安装好它们：

在终端/控制台窗口中运行命令 node -v 和 npm -v， 来验证一下你正在运行 node 6.9.x 和 npm 3.x.x 以上的版本。

然后全局安装 Angular CLI 。

npm install -g @angular/cli



步骤2. 创建新项目


打开终端窗口（CMD命令）。


在期望的文件夹下运行下列命令来生成一个新项目以及应用的骨架代码：


ng new my-app


过程有点慢，需耐性等待。


步骤3. 启动开发服务器


进入项目目录文件夹下，启动终端窗口，并启动服务器。


ng serve --open



 


ng serve命令会启动开发服务器，监听文件变化，并在修改这些文件时重新构建此应用 —— 及时编译。


使用--open（或-o）参数可以自动打开浏览器并访问http://localhost:4200/。
				


				
时间： 2024-08-27 08:22:30 

		


		


	

	
	

		


		
Angular CLI 环境准备的相关文章


								

		

			

                .Net Core + Angular Cli 开发环境搭建
			

		

		

									

				一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul			

		

	

				

		

			

                Angular/cli 安装（windows环境）。
			

		

		

									

				1.卸载先前安装的Angular/cli npm uninstall -g angular-clinpm uninstall --save-dev angular-clinpm uninstall -g @angular/cli 2..删除 C:\Users\lenovo\AppData\Roaming 下的npm 和 npm cache文件夹. 3.卸载node.js 下载安装最新版本, 安装路径默认即可. 4. node -v npm -v 查看版本 5.用npm安装typescript和t			

		

	

				

		

			

                .Net Core+Angular Cli/Angular4开发环境搭建教程
			

		

		

									

				一.基础环境配置1.安装VS2017v15.3或以上版本2.安装VSCode最新版本3.安装Node.jsv6.9以上版本4.重置全局npm源,修正为淘宝的NPM镜像:npminstall-gcnpm 一.基础环境配置 1.安装VS 2017 v15.3或以上版本2.安装VS Code最新版本3.安装Node.js v6.9以上版本4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taob			

		

	

				

		

			

                Angular环境准备和Angular cli
			

		

		

									

				Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安装Node.js和npm,请安装他们 (这里特别推荐使用淘宝的镜像cnpm,记得以后把npm的指令改为cnpm就可以了) npm install -g cnpm --registry=https://registry.npm.taobao.org 然后我们可以通过node -v和cnpm -v来分别			

		

	

				

		

			

                Angular05 angular架构、搭建angular开发环境、组件必备三要素、angular启动过程
			

		

		

									

				1 angular架构 1.1 组件:是angular应用的基本构建模块,可以理解为一段带有业务逻辑和数据的HTML 1.2 服务:用来封装可重用的业务逻辑 1.3 指令:允许你想HTML元素添加自定义功能 1.4 模块:将应用中的不同部分组织成一个angular框架可以理解的单元 1.5 组件+服务+指令 = 模块 组件+服务+指令 是用来完成业务功能的:模块 是用来打包和分发的 2 开发环境搭建 2.1 安装node.js 很简单,百度即可 安装完后在我们的命令窗口中就可以使用 npm 命令			

		

	

				

		

			

                Angular CLI 安装
			

		

		

									

				安装Angular 官网的教程,因为国内网络环境原因,访问不了服务器,导致安装失败. 1.先安装NodeJs 安装教程:http://blog.csdn.net/zengmingen/article/details/72650484 2.通过NodeJs中的模块npm 命令行安装 CLI 2.1.设置npm的资源库为国内淘宝的. 命令: [plain] view plain copy npm config set registry https://registry.npm.taobao.org			

		

	

				

		

			

                angular CLI 快速搭建angular 项目
			

		

		

									

				1. 首先确保你的电脑上安装了Node.js®和npm 2.打开终端/或命令窗,安装全局 angular CLI npm install -g @angular/cli 3. 创建新项目 //运行下列命令来生成一个新项目以及应用的骨架代码: ng new project-name // 请耐心等待. 创建新项目需要花费很多时间,大多数时候都是在安装那些npm包. 4. 启动开发服务器 // 进入项目目录 cd my-app //启动服务 ng serve --open 5. 文件结构如下 src			

		

	

				

		

			

                @angular/cli项目构建--组件
			

		

		

									

				环境:nodeJS,git,angular/cli npm install -g cnpm cnpm install -g @angular/cli ng new angularDemo ng -v ng set --global packageManager=cnpm npm install jquery --save npm install bootstrap --save npm install @type/jquery --save-dev npm install @type/boots			

		

	

				

		

			

                Angular学习笔记（工具篇）----Angular CLI
			

		

		

									

				Angular CLI 的作用   首先安装npm 和node    详情:http://www.cnblogs.com/gorgeous/p/8074180.html 在安装    npm install -g @angular/cli 验证 创建Angular项目ng new my-app 进入Angular项目cd my-app 启动项目ng serve 优化项目创建方法(优化点:npm速度较慢) ng new my-app --skip-installcd my-appcnpm inst