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 ...
随机推荐
- 「UVA1185」Big Number 解题报告
UVA1185 Big Number In many applications very large integers numbers are required. Some of these appl ...
- K8S集群搭建
K8S集群搭建 摘要 是借鉴网上的几篇文章加上自己的理解整理得到的结果,去掉了一些文章中比较冗余的组件和操作,力争做到部署简单化. K8S组件说明 Kubernetes包含两种节点角色:master节 ...
- java开源工作流引擎jflow的流程应用类型分类讲解
关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单 拖拽式表单 工作流系统CCBPM节点访问规则接收人规则 适配数据库: o ...
- 初识Activiti工作流
一.背景介绍 公司最近接了一个监狱AB门系统的项目,在对项目进行调研时,发现客户的关注点主要是在AB门流程这块,项目大部分功能都是审批流程和单据流动状态等.而之前公司的项目关于流程主要都是在表中设置状 ...
- 第三篇python用户登录程序实现
需求: 1.通过注册输入用户名和密码 2.能够验证用户名和密码是否正确 3.限制输入一定错误次数后退出程序 4.利用格式化输出方式输出信息 分析: 使用username=input()和passwor ...
- 逆元(inv)
推荐博客 : http://blog.csdn.net/baidu_35643793/article/details/75268911 通常我们在计算除法取模时,并不能直接的取模后再去相除,答案会有问 ...
- day6 云道页面 知识点梳理(1)
关于块级元素.行内元素.行内块元素的梳理 (1)块级元素 特点: a.可以设置宽高,行高,外边距和内边距 b.块级元素会独占一行 c.宽度默认是容器的100% d.可以容纳内联元素 ...
- cocoa pods最新安装说明和使用方法
最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources - ...
- git 其它补充(版本)
1.给源码贡献力量(当自己比较牛逼时) pull request 2..gitignore文件 在创建仓库的时候可以进行设置 3.版本 git tag -a v1.0 -m '版本介绍' 本地创建Ta ...
- xLua下使用lua-protobuf
本文发表于程序员刘宇的博客,转载请注明来源:https://www.cnblogs.com/xiaohutu/p/12168781.html protobuf作为一种通用套接字格式,各种插件里,最本质 ...