详解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 屏蔽鼠标右键脚本附破解方法
Dec 03 Javascript
javascript中比较字符串是否相等的方法
Jul 23 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
点评js异步加载的4种方式
Dec 22 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
javascript回调函数详解
Feb 06 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
May 22 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 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
PHP5.2下chunk_split()函数整数溢出漏洞 分析
2007/06/06 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Laravel最佳分割路由文件(routes.php)的方式
2016/08/04 PHP
php版微信js-sdk支付接口类用法示例
2016/10/12 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
php注册系统和使用Xajax即时验证用户名是否被占用
2017/08/31 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
php实现的顺序线性表示例
2019/05/04 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
jQuery Div中加载其他页面的实现代码
2009/02/27 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
javascript:history.go()和History.back()的区别及应用
2012/11/25 Javascript
jQuery+CSS实现菜单滑动伸展收缩(仿淘宝)
2013/03/22 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
浅谈JS对html标签的属性的干预以及对CSS样式表属性的干预
2017/06/25 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
调试Python程序代码的几种方法总结
2015/04/28 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python3制作捧腹网段子页爬虫
2017/02/12 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Windows下PyCharm2018.3.2 安装教程(图文详解)
2019/10/24 Python
Python面向对象编程基础实例分析
2020/01/17 Python
python如何使用腾讯云发送短信
2020/09/17 Python
python通过cython加密代码
2020/12/11 Python
戴尔新西兰官网:Dell New Zealand
2020/01/07 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
中式婚礼主持词
2014/03/13 职场文书
企业承诺书格式
2014/05/21 职场文书
vue响应式原理与双向数据的深入解析
2021/06/04 Vue.js
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技