详解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 面向对象技术基础教程
Mar 03 Javascript
javascript客户端解决方案 缓存提供程序
Jul 14 Javascript
js 延迟加载 改变JS的位置加快网页加载速度
Dec 11 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
利用Angularjs和bootstrap实现购物车功能
Aug 31 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
JavaScript 中的执行上下文和执行栈实例讲解
Feb 25 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中用文本文件做数据库的实现方法
2008/03/27 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery中加载图片自适应大小主要实现代码
2013/08/23 Javascript
jquery中map函数与each函数的区别实例介绍
2014/06/23 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
2016/04/01 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
关于Vue.nextTick()的正确使用方法浅析
2017/08/25 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
在Python程序中操作MySQL的基本方法
2015/07/29 Python
Python的装饰器用法学习笔记
2016/06/24 Python
python实现聊天小程序
2018/03/13 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python使用turtle库绘制树
2018/06/25 Python
python中计算一个列表中连续相同的元素个数方法
2018/06/29 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
在python3中使用shuffle函数要注意的地方
2020/02/28 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Happy Socks英国官网:购买五颜六色的袜子
2020/11/03 全球购物
项目计划书范文
2014/01/09 职场文书
股权投资意向书
2014/04/01 职场文书
阳光体育活动总结
2014/04/30 职场文书
高校教师个人总结
2015/02/10 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书
Django实现聊天机器人
2021/05/31 Python
一行Python命令实现批量加水印
2022/04/07 Python