一、Overview

angular 入坑记录的笔记第一篇,完成开发环境的搭建,以及如何通过 angular cli 来创建第一个 angular 应用。入坑一个多星期,通过学习官方文档以及手摸手的按教程敲官方的快速上手项目,很像后端,嗯,完美的契合了我这种后端开发人员。

对应官方文档地址:

配套代码地址:angular-practice/src/getting-started

二、Contents

  1. Angular 从入坑到弃坑 - Angular 使用入门

三、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 配置文件


1 工作空间类似于 .NET 项目中的解决方案,在一个工作空间内可以创建多个的项目
2 现代浏览器支持的某些原生 API,当用户使用老版本的浏览器或某些浏览器时并不支持,只要使用了 polyfills 这个库, 即可对于这些无法使用的浏览器添加支持,使用方法也无需更改(PS:针对的是原生的 API)
3 还是因为不同浏览器支持的特性不同,或者是 css 样式前缀不同,通过 browserslist 来告诉项目中的各种前端工具,完成自动配置的过程

Angular 从入坑到挖坑 - Angular 使用入门的更多相关文章

  1. Angular 从入坑到挖坑 - 组件食用指南

    一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...

  2. Angular 从入坑到挖坑 - 表单控件概览

    一.Overview angular 入坑记录的笔记第三篇,介绍 angular 中表单控件的相关概念,了解如何在 angular 中创建一个表单,以及如何针对表单控件进行数据校验. 对应官方文档地址 ...

  3. Angular 从入坑到挖坑 - HTTP 请求概览

    一.Overview angular 入坑记录的笔记第四篇,介绍在 angular 中如何通过 HttpClient 类发起 http 请求,从而完成与后端的数据交互. 对应官方文档地址: Angul ...

  4. Angular 从入坑到挖坑 - Router 路由使用入门指北

    一.Overview Angular 入坑记录的笔记第五篇,因为一直在加班的缘故拖了有一个多月,主要是介绍在 Angular 中如何配置路由,完成重定向以及参数传递.至于路由守卫.路由懒加载等&quo ...

  5. Angular 从入坑到挖坑 - 路由守卫连连看

    一.Overview Angular 入坑记录的笔记第六篇,介绍 Angular 路由模块中关于路由守卫的相关知识点,了解常用到的路由守卫接口,知道如何通过实现路由守卫接口来实现特定的功能需求,以及实 ...

  6. Angular 从入坑到挖坑 - 模块简介

    一.Overview Angular 入坑记录的笔记第七篇,介绍 Angular 中的模块的相关概念,了解相关的使用场景,以及知晓如何通过特性模块来组织我们的 Angular 应用 对应官方文档地址: ...

  7. 【转】angular指令入坑

    独立作用域和函数参数 通过使用本地作用域属性,你可以传递一个外部的函数参数(如定义在控制器$scope中的函数)到指令.这些使用&就可以完成.下面是一个例子,定义一个叫做add的本地作用域属性 ...

  8. web前端入坑第五篇:秒懂Vuejs、Angular、React原理和前端发展历史

    秒懂Vuejs.Angular.React原理和前端发展历史 2017-04-07 小北哥哥 前端你别闹 今天来说说 "前端发展历史和框架" 「前端程序发展的历史」 「 不学自知, ...

  9. 【Angular专题】——(1)Angular,孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

随机推荐

  1. linux tomcat安装

    一.下载tomcat包 下载tomcat包并上传至服务器中 解压文件: tar -zxvf apache-tomcat-8.5.47.tar.gz 为了后期程序的便于管理,我们还需要将Tomcat复制 ...

  2. Appium环境搭建超详细教程

    前言: 本系列教程会从软件的基本安装开始,最终目的是通过完成几个案例后, 大家实现自由抓取App中想要的资源. 本系列以后会更的: Appium基本使用及控制真机及安卓模拟器 Mitmproxy抓包工 ...

  3. React useEffect的源码解读

    前言 对源码的解读有利于搞清楚Hooks到底做了什么,如果您觉得useEffect很"魔法",这篇文章也许对您有些帮助. 本篇博客篇幅有限,只看useEffect,力求简单明了,带 ...

  4. Ant Design框架中不同的组件访问不同的models中的数据

    Ant Design框架中不同的组件访问不同的models中的数据 本文记录了我在使用该框架的时候踩过的坑,方便以后查阅. 一.models绑定 在某个组件(控件或是页面),要想从某个models中获 ...

  5. 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 ...

  6. Java面向对象之异常【一】

    目录 Java面向对象之异常[一] 异常的继承体系 Error Exception 异常是否受检 unchecked exceptions(不受检异常) checked exceptions(受检异常 ...

  7. redis最新版本安装及开机自启

    的系统是ubuntu,安装方式有多种,一种是通过apt仓库,一种是下载源码,编译安装 1.通过apt仓库 具体命令: sudo apt-get update sudo apt-get install ...

  8. Spring学习记录2——简单了解Spring容器工作机制

    简单的了解Spring容器内部工作机制 Spring的AbstractApplicationContext是ApplicationContext的抽象实现类,该抽象类的refresh()方法定义了Sp ...

  9. Airtest入门篇

    Airtest是啥? 简单理解:基于图像识别的UI自动化测试框架 俗人理解:截图即可完成自动化测试 适用场景:游戏.APP.PC软件,支持Window.Android.IOS Airtest官方文档 ...

  10. Vue 组件 传值

    注意 Vue模板只能有一个对象,要想用多个对象时用div包裹 一.父组件->子组件 通过props 1.子组件: 声明:proprs =[‘xx’],xx是在父组件中引用子组件,子组件的属性(t ...