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 配置文件
Angular 从入坑到挖坑 - Angular 使用入门的更多相关文章
- Angular 从入坑到挖坑 - 组件食用指南
一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...
- Angular 从入坑到挖坑 - 表单控件概览
一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...
- Angular 从入坑到挖坑 - HTTP 请求概览
一.Overview angular 入坑记录的笔记第四篇,介绍在 angular 中如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互. 对应官方文档地址: Angul ...
- Angular 从入坑到挖坑 - Router 路由使用入门指北
一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...
- Angular 从入坑到挖坑 - 路由守卫连连看
一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...
- Angular 从入坑到挖坑 - 模块简介
一.Overview Angular 入坑记录的笔记第七篇,介绍 Angular 中的模块的相关概念,了解相关的使用场景,以及知晓如何通过特性模块来组织我们的 Angular 应用 对应官方文档地址: ...
- 【转】angular指令入坑
独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...
- web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史
秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...
- 【Angular专题】——(1)Angular,孤傲的变革者
目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...
随机推荐
- linux tomcat安装
一.下载tomcat包 下载tomcat包并上传至服务器中 解压文件: tar -zxvf apache-tomcat-8.5.47.tar.gz 为了后期程序的便于管理,我们还需要将Tomcat复制 ...
- Appium环境搭建超详细教程
前言: 本系列教程会从软件的基本安装开始,最终目的是通过完成几个案例后, 大家实现自由抓取App中想要的资源. 本系列以后会更的: Appium基本使用及控制真机及安卓模拟器 Mitmproxy抓包工 ...
- React useEffect的源码解读
前言 对源码的解读有利于搞清楚Hooks到底做了什么,如果您觉得useEffect很"魔法",这篇文章也许对您有些帮助. 本篇博客篇幅有限,只看useEffect,力求简单明了,带 ...
- Ant Design框架中不同的组件访问不同的models中的数据
Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...
- schedule of 2016-11-7~2016-11-10(Monday~Thursday)——1st semester of 2nd Grade
most important things to do 1.joint phd preparations 2.journal paper to write 3.solid fundamental kn ...
- Java面向对象之异常【一】
目录 Java面向对象之异常[一] 异常的继承体系 Error Exception 异常是否受检 unchecked exceptions(不受检异常) checked exceptions(受检异常 ...
- redis最新版本安装及开机自启
的系统是ubuntu,安装方式有多种,一种是通过apt仓库,一种是下载源码,编译安装 1.通过apt仓库 具体命令: sudo apt-get update sudo apt-get install ...
- Spring学习记录2——简单了解Spring容器工作机制
简单的了解Spring容器内部工作机制 Spring的AbstractApplicationContext是ApplicationContext的抽象实现类,该抽象类的refresh()方法定义了Sp ...
- Airtest入门篇
Airtest是啥? 简单理解:基于图像识别的UI自动化测试框架 俗人理解:截图即可完成自动化测试 适用场景:游戏.APP.PC软件,支持Window.Android.IOS Airtest官方文档 ...
- Vue 组件 传值
注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...