详解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 相关文章推荐
JS 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
js与运算符和或运算符的妙用
Feb 14 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
JS上传图片预览插件制作(兼容到IE6)
Aug 07 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
Feb 21 Javascript
微信小程序实现默认第一个选中变色效果
Jul 17 Javascript
JS实现的类似微信聊天效果示例
Jan 29 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
react 原生实现头像滚动播放的示例
Apr 21 Javascript
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
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
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
用JAVASCRIPT如何给&amp;lt;textarea&amp;gt;&amp;lt;/textarea&amp;gt;赋值
2007/04/20 Javascript
HTML代码中标签的全部属性 中文注释说明
2009/03/26 Javascript
Javascript学习笔记6 prototype的提出
2010/01/11 Javascript
ExtJS 工具栏 分页事件参数
2010/03/05 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js实现汉字排序的方法
2015/07/23 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
使用Node.js处理前端代码文件的编码问题
2016/02/16 Javascript
jQuery图片渐变特效的简单实现
2016/06/25 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
JavaScript正则表达式小结(test|match|search|replace|split|exec)
2016/12/08 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
Python的ORM框架中SQLAlchemy库的查询操作的教程
2015/04/25 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python中正则表达式的用法总结
2019/02/22 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
在线学习西班牙语、法语或其他语言:Babbel.com
2018/02/07 全球购物
Myprotein瑞士官方网站:运动营养和健身网上商店
2019/09/25 全球购物
公务员的自我鉴定
2013/10/26 职场文书
个人自我鉴定怎么写
2013/10/28 职场文书
班会关于环保演讲稿
2013/12/29 职场文书
中学校庆方案
2014/03/17 职场文书
北京申奥口号
2014/06/19 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
2016会计专业自荐信范文
2016/01/28 职场文书