详解angular2.x创建项目入门指令


Posted in Javascript onOctober 11, 2018

很久没写过angular2.x ,最近一次也是几个月之前,为了下次查阅方便,相关命令记录下

1.ng --version 检查下自己angular cli版本

顺便看看npm -v node -v

E:\phpStudy\PHPTutorial\WWW>ng --version

  _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
 / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
/_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/
  
Angular CLI: 1.7.3
Node: 8.9.3
OS: win32 x64
Angular:
E:\phpStudy\PHPTutorial\WWW>npm -v
5.5.1

E:\phpStudy\PHPTutorial\WWW>node -v
v8.9.3

2.ng new blog-web 创建一个项目

ng new blog-web --skip-install 这里只跳过安装 如果没有跳过没关系,目录安装完下载很慢可以直接终止,再用cnpm安装

E:\phpStudy\PHPTutorial\WWW>ng new blog-web --skip-install
 create blog-web/e2e/app.e2e-spec.ts (290 bytes)
 create blog-web/e2e/app.po.ts (208 bytes)
 create blog-web/e2e/tsconfig.e2e.json (235 bytes)
 create blog-web/karma.conf.js (923 bytes)
 create blog-web/package.json (1293 bytes)
 create blog-web/protractor.conf.js (722 bytes)
 create blog-web/README.md (1023 bytes)
 create blog-web/tsconfig.json (363 bytes)
 create blog-web/tslint.json (3012 bytes)
 create blog-web/.angular-cli.json (1243 bytes)
 create blog-web/.editorconfig (245 bytes)
 create blog-web/.gitignore (544 bytes)
 create blog-web/src/assets/.gitkeep (0 bytes)
 create blog-web/src/environments/environment.prod.ts (51 bytes)
 create blog-web/src/environments/environment.ts (387 bytes)
 create blog-web/src/favicon.ico (5430 bytes)
 create blog-web/src/index.html (294 bytes)
 create blog-web/src/main.ts (370 bytes)
 create blog-web/src/polyfills.ts (3114 bytes)
 create blog-web/src/styles.css (80 bytes)
 create blog-web/src/test.ts (642 bytes)
 create blog-web/src/tsconfig.app.json (211 bytes)
 create blog-web/src/tsconfig.spec.json (283 bytes)
 create blog-web/src/typings.d.ts (104 bytes)
 create blog-web/src/app/app.module.ts (316 bytes)
 create blog-web/src/app/app.component.html (1141 bytes)
 create blog-web/src/app/app.component.spec.ts (986 bytes)
 create blog-web/src/app/app.component.ts (207 bytes)
 create blog-web/src/app/app.component.css (0 bytes)
Project 'blog-web' successfully created.

3.cnpm install

这里用淘宝镜像源,所以上一步只新建目录相关文件,国内cnpm会快很多,不过后期ng build时候需要注意点

切换进项目目录

E:\phpStudy\PHPTutorial\WWW>cd blog-web

cnpm install

E:\phpStudy\PHPTutorial\WWW\blog-web>cnpm install

详解angular2.x创建项目入门指令

4.ng serve 运行

这里的 -open就是自动打开网页了 默认的端口是4200如果端口被占用 可以使用 ng serve --port 4201

E:\phpStudy\PHPTutorial\WWW\blog-web>ng serve -open
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
 11% building modules 10/10 modules 0 activewebpack: wait until bundle finished: /
Date: 2018-10-11T05:15:14.052Z
Hash: fc83a109759056196c47
Time: 8328ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 18.3 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 575 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 42.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.45 MB [initial] [rendered]

webpack: Compiled successfully.

最后页面如下

详解angular2.x创建项目入门指令

这里面很多指令没写,只是当做自己再来操作一次,下一篇转载一份ng指令列表 很全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
jquery text,radio,checkbox,select操作实现代码
Jul 09 Javascript
js判断输入是否为正整数、浮点数等数字的函数代码
Nov 17 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
javascript操作表格排序实例分析
May 06 Javascript
Node.js学习入门
Jan 03 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
详解微信小程序缓存--缓存时效性
May 02 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
详解vscode中vue代码颜色插件
Oct 11 #Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 #Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 #Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 #Javascript
vue最简单的前后端交互示例详解
Oct 11 #Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 #Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 #Javascript
You might like
PHP编译安装时常见错误解决办法
2015/05/28 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
php+ajax实现带进度条的上传图片功能【附demo源码下载】
2016/09/14 PHP
Laravel框架中队列和工作(Queues、Jobs)操作实例详解
2020/04/06 PHP
Aster vs Newbee BO3 第二场2.18
2021/03/10 DOTA
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
2015/11/03 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
2018/04/20 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
python中的闭包用法实例详解
2015/05/05 Python
Python实现控制台中的进度条功能代码
2017/12/22 Python
Python3.5 处理文本txt,删除不需要的行方法
2018/12/10 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python 下载Bing壁纸的示例
2020/09/29 Python
德国箱包网上商店:koffer24.de
2016/07/27 全球购物
Anya Hindmarch官网:奢侈设计师手袋及配饰
2018/11/15 全球购物
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
高中生期末评语大全
2014/01/28 职场文书
环保倡议书100字
2014/05/15 职场文书
2014组织生活会方案
2014/05/19 职场文书
2015年司法局工作总结
2015/05/22 职场文书