详解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 相关文章推荐
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
JavaScript 学习笔记之操作符(续)
Jan 14 Javascript
简介JavaScript中的setHours()方法的使用
Jun 11 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
angular中使用Socket.io实例代码
Jun 03 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
iview form清除校验状态的实现
Sep 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 之入门篇
2006/12/04 PHP
php5 mysql分页实例代码
2008/04/10 PHP
PHP下一个非常全面获取图象信息的函数
2008/11/20 PHP
使用XDebug调试及单元测试覆盖率分析
2011/01/27 PHP
PHP使用数组实现队列
2012/02/05 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP面向对象之工作单元(实例讲解)
2017/06/26 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
在Laravel中使用GuzzleHttp调用第三方服务的API接口代码
2019/10/15 PHP
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
jquery获得同源iframe内body下标签的值的方法
2014/09/25 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
Cocos2d实现刮刮卡效果
2018/12/20 Javascript
详解js常用分割取字符串的方法
2019/05/15 Javascript
基于javascript实现碰撞检测
2020/03/12 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
python如何修改装饰器中参数
2018/03/20 Python
Puppeteer使用示例详解
2019/06/20 Python
Django异步任务线程池实现原理
2019/12/17 Python
python解释器pycharm安装及环境变量配置教程图文详解
2020/02/26 Python
Jupyter Notebook输出矢量图实例
2020/04/14 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
联想台湾官网:Lenovo TW
2018/05/09 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
中专自我鉴定范文
2013/10/16 职场文书
小学生手册家长评语
2014/04/16 职场文书
庆元旦演讲稿
2014/09/15 职场文书
税务职业生涯规划书范文
2014/09/16 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
铁人观后感
2015/06/16 职场文书
Python如何让字典保持有序排列
2022/04/29 Python