详解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 图片等比例缩放代码
May 13 Javascript
xml文档转换工具,附图表例子(hta)
Nov 17 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
js操作模态窗口及父子窗口间相互传值示例
Jun 09 Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
js图片放大镜实例讲解(必看篇)
Jul 17 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
MockJs结合json-server模拟后台数据
Aug 26 Javascript
在vue中created、mounted等方法使用小结
Jul 21 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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
php递归创建和删除文件夹的代码小结
2012/04/13 PHP
php随机输出名人名言的代码
2012/10/07 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php遍历、读取文件夹中图片并分页显示图片的方法
2016/11/15 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
layer.alert自定义关闭回调事件的方法
2019/09/27 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
使用Python操作Elasticsearch数据索引的教程
2015/04/08 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python+pyqt实现12306图片验证效果
2017/10/25 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
python3+selenium自动化测试框架详解
2019/03/17 Python
详解Python下载图片并保存本地的两种方式
2019/05/15 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
keras.layer.input()用法说明
2020/06/16 Python
树莓派升级python的具体步骤
2020/07/05 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python实现简单的学生管理系统
2021/02/22 Python
New delete 与malloc free 的联系与区别
2013/02/04 面试题
《风娃娃》教学反思
2014/04/19 职场文书
材料物理专业求职信
2014/09/01 职场文书
学生自我评语
2015/01/04 职场文书
期末个人总结范文
2015/02/13 职场文书
讲座开场白台词和结束语
2015/05/29 职场文书
2016年秋季运动会加油稿
2015/12/21 职场文书
如何使用PyCharm及常用配置详解
2021/06/03 Python
常用的Python代码调试工具总结
2021/06/23 Python