详解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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
优化 JavaScript 代码的方法小结
Jul 16 Javascript
javascript 遍历验证所有文本框的值
Aug 27 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
自动设置iframe大小的jQuery代码
Sep 11 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
AngularJS Module方法详解
Dec 08 Javascript
ReactJs快速入门教程(精华版)
Nov 28 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
vue自定义指令和动态路由实现权限控制
Aug 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
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
CI框架装载器Loader.php源码分析
2014/11/04 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
PHP编写简单的App接口
2016/08/28 PHP
php简单构造json多维数组的方法示例
2017/06/08 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
javascript 面向对象的JavaScript类
2010/05/04 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
jQuery实现手机版页面翻页效果的简单实例
2016/10/05 Javascript
Javascript生成带参数的二维码示例
2016/10/10 Javascript
Angularjs 动态改变title标题(兼容ios)
2016/12/29 Javascript
Node.js学习入门
2017/01/03 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
vue中render函数的使用详解
2018/10/12 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python3.6正式版新特性预览
2016/12/15 Python
设置python3为默认python的方法
2018/10/31 Python
Python实现微信小程序支付功能
2019/07/25 Python
django项目中使用云片网发送短信验证码的实现
2021/01/19 Python
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
出国留学介绍信
2014/01/13 职场文书
青年教师培训方案
2014/02/06 职场文书
小学生环保倡议书
2014/05/15 职场文书
村党支部公开承诺书
2014/05/29 职场文书
预备党员介绍人意见
2015/06/01 职场文书
礼貌问候语大全
2015/11/10 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
甜美蛋糕店的创业计划书模板,拿来即用!
2019/08/21 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript