详解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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
Grunt入门教程(自动任务运行器)
Aug 06 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
用图片替换checkbox原始样式并实现同样的功能
Nov 15 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对大文件进行读取操作的实现代码
2013/01/23 PHP
PHP中使用xmlreader读取xml数据示例
2014/12/29 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JS中三目运算符和if else的区别分析与示例
2014/11/21 Javascript
js实现将选中值累加到文本框的方法
2015/08/12 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
AngularJS中ng-options实现下拉列表的数据绑定方法
2018/08/13 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
Python常用内置函数总结
2015/02/08 Python
Python多进程机制实例详解
2015/07/02 Python
通过实例浅析Python对比C语言的编程思想差异
2015/08/30 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
python web框架 django wsgi原理解析
2019/08/20 Python
使用Python为中秋节绘制一块美味的月饼
2019/09/11 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
一款利用html5和css3实现的3D立方体旋转效果教程
2016/04/26 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
给校长的建议书200字
2014/05/16 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
入党积极分子考察意见
2015/06/02 职场文书
雷锋的故事观后感
2015/06/10 职场文书
高中16字霸气押韵班级口号集锦!
2019/06/27 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
详解python的异常捕获
2022/03/03 Python
AngularJS实现多级下拉框
2022/03/25 Javascript
我收到了德劲DE1107
2022/04/05 无线电