原文地址

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

环境准备

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

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

参考网址

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

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

  1. 用Angule Cli创建Angular项目

    Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...

  2. 搭建angular前端框架 命令

    首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angula ...

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

    一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是 ...

  4. 搭建ssm项目框架

    [声明]转载注明链接,源码联系公众号:aandb7获取 [此处组织名groupId:com.dayuanit,可替换公司域名:项目名artifactid:...] 此处第二个配置文件选择maven安装 ...

  5. 搭建SSM项目框架全过程及思考

    1.前言 之前都是在现有框架下进行写代码或者总是看一些别人的架构,总会眼高手低.于是打算自己完整的走一遍流程,同时把所遇到的问题,思考的问题记下来,供大家参考.由于是工作年限不高,属于新手,不足之处还 ...

  6. 使用 IDEA 创建 Maven Web 项目 (二)- 搭建 WEB 项目框架

    转为 Java Web 项目 将上一节中创建的 Maven 项目调整为 WEB 项目结构,步骤如下: 在 main 目录下,添加 webapp 目录. 在 webapp 目录下,添加 WEB-INF ...

  7. 架构实战项目心得(七):使用SpringBoot+Dubbo+Mybatisplus+Oracle搭建后台项目框架(二)

    接下来我们将整合mybatisplus+Oracle,实现一个简单的查询.(期间踩了很多坑,遇到一些问题,还好慢慢解决了.现在是通过配置文件的方式来进行dubbo服务的注册和发布,希望以后能在学习和实 ...

  8. 【转】MEAN:Nodejs+express+angularjs+mongodb搭建前端项目框架NJBlog

    http://www.cnblogs.com/mz121star/archive/2013/03/13/njblog.html 项目地址:https://github.com/mz121star/  ...

  9. express 4.x 搭建Node项目框架

    npm install -g express-generator express projectName cd projectName npm install 手动添加文件夹config.models ...

随机推荐

  1. 【习题 8-7 UVA - 11925】Generating Permutations

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让你把排列1..n变换成对应的输入序列. 每次可以交换前两个数字,或者把第一个数字放到末尾去. 可以逆向考虑. 即把无序的序列变换成 ...

  2. ActiveMQ学习总结(7)——ActiveMQ使用场景

    MQ简介: MQ全称为Message Queue, 消息队列(MQ)是一种应用程序对应用程序的通信方法.应用程序通过写和检索出入列队的针对应用程序的数据(消息)来通信,而无需专用连接来链接它们.消息传 ...

  3. IOS越狱开发错误解决

      Questions: haseScriptExecution Run\ Script /Users/jun/Library/Developer/Xcode/DerivedData/ButtonMa ...

  4. 关于multiprocessing,我也来聊几句

    起因:近期须要从hbase中向 ES中导一批数据.使用multiprocessing 启动多个程序同一时候向ES导数据.能够大大提高效率.由于导数的任务是能够依照时间切割的. 一段简单的代码例如以下: ...

  5. android抓取各种log的方法

    1.logcat (四类log buffer是main,radio.system.events) adb wait-for-device logcat adb logcat -v time > ...

  6. log4j.properties配置与加载应用

    log4j.properties总结:   一.介绍 Log4j是Apache的一个开放源代码项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件.甚至是套接口服务 器 ...

  7. [appium]-9宫格解锁方法

    from appium.webdriver.common.touch_action import TouchAction TouchAction(self.driver).press(x=228,y= ...

  8. Docker---(2)为什么要用Docker

    原文:Docker---(2)为什么要用Docker 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_ ...

  9. 库函数strcpy/strlen的工作方式

    库函数strcpy/strlen的工作方式         分类:             C/C++              2011-07-03 23:49     1032人阅读     评论 ...

  10. hdu5384 AC自己主动机模板题,统计模式串在给定串中出现的个数

    http://acm.hdu.edu.cn/showproblem.php?pid=5384 Problem Description Danganronpa is a video game franc ...