详解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多物体 任意值 链式 缓冲运动
Aug 10 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
js鼠标滑过图片震动特效的方法
Feb 17 Javascript
JavaScript实现把数字转换成中文
Jun 29 Javascript
jQuery与getJson结合的用法实例
Aug 07 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
AngularJS基础 ng-include 指令示例讲解
Aug 01 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
php结合js实现多条件组合查询
May 28 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
php常用Stream函数集介绍
2013/06/24 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
Thinkphp连表查询及数据导出方法示例
2016/10/15 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
2016/09/01 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
关于js二维数组和多维数组的定义声明(详解)
2016/10/02 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
AngularJS下$http服务Post方法传递json参数的实例
2018/03/29 Javascript
Vue项目全局配置微信分享思路详解
2018/05/04 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
西班牙家用电器和电子产品购物网站:Mi Electro
2019/02/25 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
迪卡侬(Decathlon)加拿大官网:源自法国的运动专业超市
2020/11/22 全球购物
超市开店计划书
2014/04/26 职场文书
高中校园广播稿
2014/10/21 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
世界环境日活动总结
2015/02/11 职场文书
个人工作表现自我评价
2015/03/06 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript