ng-cli搭建angular项目框架

环境准备

  以下步骤都不需要事先创建文件夹,只是环境的准备过程,只有到需要搭建项目的时候才需要创建文件夹用来存放项目文件。

1、安装NodeJs

  NodeJs的安装步骤是很简单的,在网上下载一个一个nodeJs安装包,然后按照提示一步一步的安装。
  NodeJs安装好之后会连带着安装一个npm,nodeJs的安装流程很简单,按着步骤一步一步下来即可。
  安装完成之后在控制台上输入npm -v 以及 node -v若成功则会输出对应版本,并且已经将npm和node部署到了全局的环境变量。

  

2、安装angulr-cli

方式一:ng-cli原生指令

  npm install -g @angular/cli

方式二:该指令同样可以完成功能,但是会有一些奇怪的问题,比如ng eject的指令就不存在

  npm install -g angular-cli

3、查看angular-cli版本,检查是否安装成功

  ng -v

  

搭建项目框架

4、新建项目

  ng new Anuglar2Demo1 //如下图则是项目创建成功的样子

  

5、进入项目目录

  cd Anuglar2Demo1

6、启动项目——执行ng serve命令

  ng serve

  

7、访问项目

  访问http://localhost:4200/

总结

  以上的步骤都是我从网上各个博客中边差边写的,并且本地根据上述的步骤也实现了好几次的搭建简单的angular项目的框架。当然有时候也可能因为nodejs的版本或者ng-cli的版本问题导致安装的失败,这时候不要着急,可以尝试着将版本降低或者重新搭建一次环境。利用ng-cli搭建angular看起来高大上,但是要搭建一个简单基础的项目框架,根据我上面的操作基本能够实现,但是一个全面的更加优秀的框架还是需要不断的完善才可以的。

最后

  这个是我已经搭建好的angular项目框架,如果不想花时间去搭建的可以直接克隆我搭建好的就可以使用了。

  关于angular一些的实例应用中的angular-demo-base

  //项目克隆之后,需要执行以下命令才可以启动项目 npm install npm run start

原文地址

  https://www.jianshu.com/p/0a8f4b0f29b3

参考网址

使用 angular-cli 创建 angular2 项目
使用webStrom创建angular2项目
使用cnpm搭建项目

原文地址:https://www.cnblogs.com/shcrk/p/9194031.html

时间: 2024-10-07 17:44:52

ng-cli搭建angular项目框架的相关文章

使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/, 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如

webstrom bower搭建angular项目

在webstorm中,新建一个angular项目,默认配置的是node的环境[会有一个package.json和bower.json ] 此时在浏览器运行index.html  会报一堆的错 检查了下是因为没有安装bower和angular 安装顺序是: 1.全局安装bower npm install bower -g[此处具体安装和配置省略,需要配置环境变量和设置node的全局安装路径] 2.此时 在任何文件目录下,都可以直接使用bower命令 3.在项目位置处 bower install a

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

使用vue-cli脚手架搭建简单项目框架

1.首先已经安装了node,最好版本6以上. 2.安装淘宝镜像 大家都知道国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像.这样就可以直接使用cnpm了. npm install -g cnpm --registry=https://registry.npm.taobao.org 如果过程出差,是否安装git? 3.安装webpack cnpm install webpack -g 4.安装vue脚手架 npm install vue-cli -g 以上-g 代表的是全

利用脚手架vue cli搭建vue项目

vue.js https://vuejs.org/ 基础: http://cn.vuejs.org/v2/guide/installation.html 1.安装需要利用npm包管理器,所以首先安装node.js https://nodejs.org/en/download/ 安装好后,打开cmd面板,输入 node -v  (v即 version ,查看node版本) npm是随nodeJs一起安装.所以输入 npm -v 说明npm也已经好了. (安装nodejs后,里面的npm可能不是最新

ASP.NET MVC企业级项目框架搭建实战

MVC项目搭建笔记---- 项目框架采用ASP.NET MVC+Entity Framwork+Spring.Net等技术搭建,搭建过程内容比较多,结合了抽象工厂的思想降低了三层之间的耦合,可以使用此套框架进行可扩展性要求高的企业级MVC项目开发.本框架的架构图如下: 第一步(创建分类文件夹): 创建5个文件夹.分别为UI,Model,BLL,DAL,Common,以便于将各模块分类整理. 第二步(项目类库的创建): 在UI文件夹创建ASP.NET MVC4项目模板选择基本. 在Model文件夹

Angular入门--项目框架搭建

Angular介绍 Angular在2012年发布版本1.0,是最早流行的前端MVVM框架,目前流行的React和Vue框架都在它之后.由于React的流行,以及angular 1.0版本暴露出来的一些性能,组件化等的一些缺点,谷歌决定重写angular,在2016年推出angular2.0.Angular 2.0采用TypeScript开发,集成了RxJS库.目前最新版本是6.0 Angular生态1.服务端渲染解决方案 Angular Universal2.PWA(Progressive w

(三) Angular2项目框架搭建心得

前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2.*版本的面目全非,不过宽容点来看这个强大的框架,升级到ng2肯定是一件好事情,虽然截至目前ng2还存在或多或少需要完善的地方,但是ng2做到了留下并强化ng1好的部分,移除或改善其不好的部分,并且基于许多较新Web技术来开发,不去看从ng1迁移到ng2的门槛和工作量的话,ng2的编程体验是很酷炫的. 目前n

[AngularJS]项目框架搭建-MyFirst Skeleton

前文有提到过 做一个简单的订餐系统,最近花了点时间,了解了一下AngularJS框架的使用.因此本文的目的根据了解的知识重新搭建基于 AngularJS框架. 该框架是基于对于AngularJS的学习而制定的,这其中肯定有很多不足,在以后的学习中在加以改进. 一.系统准备 安装Node.js version>=0.10.0版本 Git  Shell 并添加该 Shell脚本到Path环境变量中  Path=:,"$git_home/bin"   二.手动搭建框架 2.1 创建开发