详解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 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
js生成随机数的方法实例
Oct 16 Javascript
百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
Feb 19 Javascript
bootstrap table小案例
Oct 21 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
JavaScript中三个等号和两个等号你了解多少
Jul 04 Javascript
vue点击当前路由高亮小案例
Sep 26 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
php生成扇形比例图实例
2013/11/06 PHP
php邮件发送的两种方式
2020/04/28 PHP
利用JQuery为搜索栏增加tag提示
2009/06/22 Javascript
JavaScript 学习笔记(十五)
2010/01/28 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
js 得到文件后缀(通过正则实现)
2013/07/08 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
判断js数据类型的函数实例详解
2019/05/23 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
你不知道的SpringBoot与Vue部署解决方案
2020/11/09 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
详解Python中的循环语句的用法
2015/04/09 Python
Python中文分词实现方法(安装pymmseg)
2016/06/14 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
python lxml中etree的简单应用
2019/05/10 Python
Python实现代码块儿折叠
2020/04/15 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
10个示例带你掌握python中的元组
2020/11/23 Python
CSS3悬停效果案例应用
2012/11/21 HTML / CSS
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
新学期校长寄语
2014/01/18 职场文书
优秀护士演讲稿
2014/04/30 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
应届毕业生求职信范文
2015/03/19 职场文书