详解Angular cli配置过程记录


Posted in Javascript onNovember 07, 2019

1.首先调出命令行工具,运行命令全局安装Angular -cli

npm i -g @angular/cli

安装过程中我的命令行工具内出现了警告和报错信息,我没有管它,因为我在后续使用中并没有遇到什么麻烦。

安装完成后可通过命令行ng v查看安装的版本信息,我的是这样的

_           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
 /_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/
  

Angular CLI: 8.3.3
Node: 10.16.3
OS: darwin x64
Angular: 
... 

Package           Version
------------------------------------------------------
@angular-devkit/architect  0.803.3
@angular-devkit/core     8.3.3
@angular-devkit/schematics  8.3.3
@schematics/angular     8.3.3
@schematics/update      0.803.3
rxjs             6.5.3

看到这个就说明基本上没什么问题,已经全局成功安装了angular-cli

2.使用命令行ng new myapp生成项目,过程中会有些配置选项的选择,根据自己的需求选择不同的配置就行.
我选择了使用angular路由和less

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? Less

等待安装完成,安装安成的目录是这样子的

详解Angular cli配置过程记录

Angular-cli目录

打开项目,在项目中运行命令行ng serve --open,angular-cli会自动在浏览器中运行,我运行出来的界面是这样子的:

详解Angular cli配置过程记录

angular-cli安装完成第一次运行结果图

这样子Angular -cli创建新项目就算是完成了。

讲一下项目目录内容

node_modules

node_modules文件目录是我们项目的依赖项,一般这个要放在.gitignore文件中,像这样

/node_modules

在使用angular-cli创建的项目中,会自动帮我做记录好那些需要git忽略的文件。

当从git上拉下myapp项目时,里面是没有node_modules目录的,运行命令行npm i 或者npm install就可以重新下载node_modules目录

src

src目录一般是放置我们项目的源代码的地方,一开始的时候有做这些东西

 详解Angular cli配置过程记录

src目录内容

index.html文件是项目的入口文件,在这个文件<body>中,只放<app-root></app-root>入口点。
这个就是上面说到的? Would you like to add Angular routing?这个问题选择了yes的结果,<app-root></app-root>是angular的一个路由组件

main.ts到包后会自动引入编译成ES5的js文件

提示:如果想要使用ngModel绑定输入框内容,需要在···app.component.ts中引入 FormsModule模块,然后放入引入内容import```属性中

import { FormsModule } from '@angular/forms';
imports: [
  ***
  FormsModule
 ],

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

Javascript 相关文章推荐
可以将word转成html的js代码
Apr 11 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
jquery实现图片上传之前预览的方法
Jul 11 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
vue项目实现图片上传功能
Dec 23 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
ZK中使用JS读取客户端txt文件内容问题
Nov 07 #Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 #Javascript
vue中 数字相加为字串转化为数值的例子
Nov 07 #Javascript
JS实现随机抽选获奖者
Nov 07 #Javascript
Vue中错误图片的处理的实现代码
Nov 07 #Javascript
vue 实现购物车总价计算
Nov 06 #Javascript
JavaScript原型式继承实现方法
Nov 06 #Javascript
You might like
十大“创意”战术!
2020/03/04 星际争霸
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
setInterval,setTimeout与jquery混用的问题
2013/04/08 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
jquery拖拽自动排序插件使用方法详解
2020/07/20 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
2018/12/04 jQuery
微信小程序如何使用globalData的方法
2019/06/06 Javascript
实用的 vue tags 创建缓存导航的过程实现
2020/12/03 Vue.js
python使用新浪微博api上传图片到微博示例
2014/01/10 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
python3实现域名查询和whois查询功能
2018/06/21 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
Python调用.NET库的方法步骤
2019/12/27 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
波兰灯具、照明和LED购物网站:Lampy.pl
2019/03/11 全球购物
高中同学聚会邀请函
2014/01/11 职场文书
项目经理任命书内容
2014/06/06 职场文书
专项法律服务方案
2014/06/11 职场文书
电大奖学金获奖感言
2014/08/14 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
24句精辟的现实社会语录,句句扎心,道尽人性
2019/08/29 职场文书
Django路由层如何获取正确的url
2021/07/15 Python
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python
Nginx如何配置根据路径转发详解
2022/07/23 Servers