Angular-ClI入门教程
官网
https://angular.cn/
建议先学Angular基础教程
然后在去学习Angular-Cli环境搭建
Angular-CLI结构介绍
使用Angular-CLI 创建完项目后结构介绍
app/app.component.{ts,html,css,spec.ts}
使用HTML模板、CSS样式和单元测试定义
AppComponent
组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点app/app.module.ts
定义
AppModule
,这个根模块会告诉Angular如何组装该应用。 目前,它只声明了AppComponent
。 稍后它还会声明更多组件。assets/*
这个文件夹下你可以放图片等任何东西,在构建应用时,它们全都会拷贝到发布包中。
environments/*
这个文件夹中包括为各个目标环境准备的文件,它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在产品环境中使用不同的API端点地址,或使用不同的统计Token参数。 甚至使用一些模拟服务。 所有这些,CLI都替你考虑到了。
favicon.ico
每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。
index.html
这是别人访问你的网站是看到的主页面的HTML文件。 大多数情况下你都不用编辑它。 在构建应用时,CLI会自动把所有
js
和css
文件添加进去,所以你不必在这里手动添加任何<script>
或<link>
标签。main.ts
这是应用的主要入口点。
polyfills.ts
不同的浏览器对Web标准的支持程度也不同。 填充库(polyfill)能帮我们把这些不同点进行标准化。 你只要使用
core-js
和zone.js
通常就够了,不过你也可以查看浏览器支持指南以了解更多信息。styles.css
这里是你的全局样式。 大多数情况下,你会希望在组件中使用局部样式,以利于维护,不过那些会影响你整个应用的样式你还是需要集中存放在这里。
test.ts
这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置,不过你并不需要编辑这里的任何东西。
tsconfig.{app|spec}.json
TypeScript编译器的配置文件。
tsconfig.app.json
是为Angular应用准备的,而tsconfig.spec.json
是为单元测试准备的。
创建组件
ng g component demo
Angular cli帮我们干了如下事情:
src/app/demo 目录被创建
demo 目录下会生成以下四个文件:
demo.component.css
CSS 样式文件,用于设置组件的样式
demo.component.html
HTML 模板文件,用于设置组件的模板
demo.component.ts
TypeScript 文件,里面包含一个 GreatAngular 组件类和组件的元信息
demo.component.spec.ts
Spec 文件,包含组件相关的测试用例
demo 组件会被自动地添加到最近模块app.module.ts
内的 @NgModule 装饰器的 declarations 属性中。
Angular CLI其他命令
https://angular.cn/cli
打包项目
默认使用绝对路径 ,这种打包方式是一般将将项目内嵌到后端项目中使用的
打包后的index.html会发生 Failed to load resource: net::ERR_FILE_NOT_FOUND 错误这是路径问题,
ng build
使用相对路径 , 这种打包方式一般是前后端分离打包
ng build --base-href ./
入门项目: 英雄之旅
我知道大家到这里肯定懵逼,啥都不会学啥啊,学什么,这里解释下,这个项目是为了加快大家对Angular的学习
https://angular.cn/tutorial 官方教程 安装这个写就行了,基本是没啥问题的
下面这个就是英雄之旅的原代码,有略微的改动(包括后端代码(增加了登录系统))
链接:https://pan.baidu.com/s/1iLj3tKZqcZnwR8h61Q2hAg
提取码:1234
注意: 后端项目使用SpringBoot开发的 ,需要找会后端的人给你启动
范例应用
https://angular.cn/guide/example-apps-list#working-with-templates
错误参考和解决方案
https://angular.cn/errors/NG0100
Angular CLI -UI组件 (PC)
https://material.angular.cn/ (官网组件)
https://devui.design/home
https://devui.design/home
https://ng.ant.design/docs/introduce/zh
Angular CLI -UI组件 (手机端)
一般手机端是没有table(表格的) 只有pc端电脑大能展示出来 所以 Ant Design Mobile of Angular 就没有table组件
https://ng.mobile.ant.design/#/docs/introduce/zh
注意: 如果是做pc和手机通用自适应的话那么就是PC组件就行
点赞 -收藏-关注-便于以后复习和收到最新内容 有其他问题在评论区讨论-或者私信我-收到会在第一时间回复 如有侵权,请私信联系我 感谢,配合,希望我的努力对你有帮助^_^
Angular-ClI入门教程相关推荐
- ng命令汇总:Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- Angular CLI 使用教程指南参考
Angular CLI 使用教程指南参考 Angular CLI 现在虽然可以正常使用但仍然处于测试阶段. Angular CLI 依赖 Node 4 和 NPM 3 或更高版本. 安装 要安装Ang ...
- Angular介绍、安装Angular Cli、创建Angular项目入门教程
场景 Angualr 是一款来自谷歌的开源的web 前端框架,诞生于2009 年,由Misko Hevery 等 人创建,后为Google 所收购.是一款优秀的前端JS 框架,已经被用于Google ...
- Angular 4入门教程系列:1:HelloWorld
ngular作为目前前端的一个重要选择,加之背后站着google,得到了越来越多的开发者的青睐.但是发现没有按照由浅入深地实例化的教程,虽然官网的教程已经不错,但是初始入门的细节没有提到,再加之网络等 ...
- Angular 4入门教程系列:1:运行在Docker中的HelloWorld
Angular作为目前前端的一个重要选择,加之背后站着google,得到了越来越多的开发者的青睐.但是发现没有按照由浅入深地实例化的教程,虽然官网的教程已经不错,但是初始入门的细节没有提到,再加之网络 ...
- Angular 4入门教程系列 14 PrimeNG的使用方式
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 这篇文章 ...
- Angular 4入门教程系列:14:PrimeNG的使用方式
这篇文章介绍一下Angular的老牌UI组件库PrimeNG,并演示一下如何使引入PrimeNG到项目之中. Why PrimeNG 使用PrimeNG有很多原因,比如 70多个完善的组件 开源 提高 ...
- angular快速入门教程
angular 安装: 1.安装node.js 2.安装angular npm i -g @angular/cli 3.创建项目 ng new 项目名 4.文件结构: e2e:测试目录src: {in ...
- Angular /Angular cli安装教程
1.安装node.js 在node官网下载安装包,我下载安装的是node-v12.14.0-x64.msi,win10 x64系统,默认安装,一路Next,不用配置环境变量(msi格式的安装文件会 ...
- Angular 4入门教程系列:9:TypeScript:ECMAScript之前世今生
在以例子为主的官方介绍中,我们学习到了npm install typescript,也看过tsconfig.json的typescript配置文件的配置文件,比如里面写的ES5到底是什么.另外那些.t ...
最新文章
- 程序包不存在?无源文件?找不到文件?找不到或无法加载主类?
- 机器学习笔记:时间序列分解(滑动平均)
- Python编程基础:第三节 字符串方法String Methods
- shell执行perl_【编程技巧(一)】在Perl、Shell和Python中传参与输出帮助文档
- Navicat连接Oracle数据库失败,提示无效的用户名和密码(Invalid username and password)
- otdr全部曲线图带解说_副业推荐:电影解说号,4个快速见收益的技巧
- 考研(一):一段不错的经历之考研总结
- 《深入理解Elasticsearch(原书第2版)》一第1章
- APP_FIELD设置Item运行时行为
- android 六边形简书,水波浪贝塞尔效果(六边形)
- Web前端开发技术课程大作业:基于HTML+CSS+JavaScript实现校园主题-萍乡田家炳中学校网站(1页)
- Libra,一场赛博朋克噩梦!
- Intel汇编-带符号乘法
- 转 让FPGA替代GPU的6大顾虑,你确定不看看吗?
- 计算机工程本科旧金山找工,2020年旧金山大学本科热门专业
- 码率控制(二):CRF详解
- 月球太阳轨迹matlab,地球月球太阳轨迹 地球和月球运行轨迹图
- PMP什么样的题库才是好的题库?
- Linux之ubuntu基本命令
- 怀旧单机版游戏菜单,欢迎下载
热门文章
- 【OpenCV】—图像金子塔与图片尺寸缩放
- 【微信小程序】反编译
- mysql5.7数据库删除用户及其权限 drop user ‘root‘@‘%‘; flush privileges;
- 快速排序及TOP K问题
- 使用-ubuntu 12.04 amd显卡驱动安装
- 信号(signal)介绍
- 你知道浪涌保护器的工作原理吗?一张图让你瞬间理解它
- 用计算机创作艺术,【艺术创作论文】计算机编程在平面艺术创作中的应用(共2436字)...
- PCA9685寄存器用法和通信(一)
- Zabbix和agent端部署、图示Zabbix Web端搭建以及添加设备的4种方法、Zabbix API