详解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 相关文章推荐
javascript之典型高阶函数应用介绍
Jan 10 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
通过url查找a元素并点击
Apr 09 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
JavaScript Array对象详解
Mar 01 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
js常用正则表达式集锦
May 17 Javascript
Angular如何由模板生成DOM树的方法
Dec 23 Javascript
vue分页插件的使用方法
Dec 25 Javascript
JS实现长图上下滚动效果
Mar 19 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实现让页面只能被百度gogole蜘蛛访问的方法
2009/12/29 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
php opendir()列出目录下所有文件的实例代码
2016/10/02 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
ztree加载完成后显示勾选节点的实现代码
2018/10/22 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
layer.confirm点击第一个按钮关闭弹出框的方法
2019/09/09 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
[03:58]2014DOTA2国际邀请赛 龙宝赛后解密DK获胜之道
2014/07/14 DOTA
python函数缺省值与引用学习笔记分享
2013/02/10 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
python登录豆瓣并发帖的方法
2015/07/08 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
彻底理解Python list切片原理
2017/10/27 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python制作英语翻译小工具代码实例
2019/09/09 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
师范大学应届生求职信
2013/11/21 职场文书
餐饮总经理岗位职责
2014/03/07 职场文书
意向书范文
2014/03/31 职场文书
工厂车间标语
2014/06/19 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers