Angular 从入坑到挖坑 - Angular 使用入门
一、Overview
angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用。入坑一个多星期,通过学习官方文档以及手摸手的按教程敲官方的快速上手项目,很像后端,嗯,完美的契合了我这种后端开发人员。
对应官方文档地址:
配套代码地址:angular-practice/src/getting-started
二、Contents
三、Knowledge Graph
四、Step by Step
4.1、通过 Angular CLI 创建第一个 Angular 应用
4.1.1、开发环境搭建
前提条件
- node.js 版本高于 10.9.0
- 包含 npm 客户端
## 查看 node 版本
node -v ## 查看 npm 版本
npm -v
全局安装 Angular CLI
## 在电脑上以全局安装的方式安装 angular cli
npm install -g @angular/cli
验证是否安装成功
## 查看 angular cli 版本
ng v ## 查看 angular cli 中的各种命令解释
ng help
4.1.2、运行第一个 Angular 应用
通过 Angular CLI 命令来创建一个新的应用
## 指定位置,创建新的 angular 应用
ng new my-app
常用命令参数
options | 解释 |
---|---|
--force | 强制覆盖现有文件 |
--skipInstall | 创建项目时跳过 npm install 命令 |
--strict | 在代码中使用更严格的 typescript 编译选项 |
运行项目
## 运行项目
ng serve
常用命令参数
options | 解释 |
---|---|
--open / -o | 是否直接打开浏览器 |
--port | 指定程序运行的端口 |
4.2、项目结构、文件功能了解
e2e - 端到端测试文件
src - 单元测试源代码路径
- app.e2e-spec.ts - 针对当前应用的端到端单元测试文件
- app.po.ts - 单元测试源文件
protractor.conf.js - protractor 测试工具配置文件
tsconfig.json - 继承于工作空间根目录的 typescript 配置文件
src - 工作空间 1 最外层根项目的源代码路径
app - 系统所提供的各种功能
- app-routing.module.ts - 项目的路由模块,用来定义项目的前端路由信息
- app.component.html - 项目的根组件所关联的 HTML 页面
- app.component.scss - 项目的根组件 HTML 页面的样式信息
- app.component.spec.ts - 项目的根组件单元测试文件
- app.component.ts - 项目的根组件逻辑
- app.module.ts - 应用的根模块
assets - 系统需要使用的静态资源文件
environments - 针对不同环境的构建配置选项
favicon.ico - 网站图标
index.html - 应用的主页面
main.ts - 应用的入口程序
polyfills.ts - 针对不同浏览器对于原生 API 的支持程度不相同的情况,用来抹平不同浏览器之间的支持差异 2
styles.scss - 项目的全局样式文件
test.ts - 单元测试的主入口程序
.editorconfig - 针对不同代码编辑器间的代码风格规范
.gitignore - git 忽略的文件
angular.json - 应用于当前工作空间的一些默认配置以及供 angular cli 和开发工具使用的配置信息
browserslist - 项目所针对的目标浏览器 3
karma.conf.js - 基于 node.js 的 javascript 测试执行过程管理工具
package-lock.json - 针对当前工作空间使用到 npm 包,安装到 node_modules 时的版本信息
package.json - 当前工作空间中所有项目会使用到的 npm 包依赖
README.md - 当前工作空间最外层根应用的简介文件
tsconfig.app.json - 当前工作空间最外层根应用的专属 typescript 配置文件
tsconfig.json - 当前工作空间中各个项目的基础 typescript 配置文件
tsconfig.spec.json - 当前工作空间最外层根应用的专属 tslint 配置文件
tslint.json - 当前工作空间中各个项目的基础 tslint 配置文件
最新文章
- 终于解决各种动画问题了,感谢雨松MOMO
- windows 开机启动 CassiniDev(IIS替代软件)
- 深入JVM-锁与并发
- 《The Django Book》实战--第二章--动态网页基础
- Java基础之创建窗口——使用流布局管理器(TryFlowLayout)
- iOS进阶——App生命周期
- 八大Webkit内核浏览器
- android Locat工作日志的使用
- HTML里面Textarea换行总结
- iOS_UIButton 简单操作
- JFrame、JDialog close
- 如何编写Hexo主题
- Python之函数基础
- Architecture : Describable Command and Identifiable Data
- 【JAVA】servlet 定时启动
- request.getRequestDispatcher 页面跳转,样式丢失。
- 在 System.Web.Mvc.DefaultModelBinder.ConvertProviderRe
- ACM-ICPC 2018 徐州赛区网络预赛 C Cacti Lottery(暴力+期望)
- Python在线dlib库地址
- Spring AOP源码分析(二)动态A0P自定义标签