一、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. 「UVA1185」Big Number 解题报告

    UVA1185 Big Number In many applications very large integers numbers are required. Some of these appl ...

  2. K8S集群搭建

    K8S集群搭建 摘要 是借鉴网上的几篇文章加上自己的理解整理得到的结果,去掉了一些文章中比较冗余的组件和操作,力争做到部署简单化. K8S组件说明 Kubernetes包含两种节点角色:master节 ...

  3. java开源工作流引擎jflow的流程应用类型分类讲解

    关键字: 驰骋工作流程快速开发平台 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 开发者表单  拖拽式表单 工作流系统CCBPM节点访问规则接收人规则 适配数据库: o ...

  4. 初识Activiti工作流

    一.背景介绍 公司最近接了一个监狱AB门系统的项目,在对项目进行调研时,发现客户的关注点主要是在AB门流程这块,项目大部分功能都是审批流程和单据流动状态等.而之前公司的项目关于流程主要都是在表中设置状 ...

  5. 第三篇python用户登录程序实现

    需求: 1.通过注册输入用户名和密码 2.能够验证用户名和密码是否正确 3.限制输入一定错误次数后退出程序 4.利用格式化输出方式输出信息 分析: 使用username=input()和passwor ...

  6. 逆元(inv)

    推荐博客 : http://blog.csdn.net/baidu_35643793/article/details/75268911 通常我们在计算除法取模时,并不能直接的取模后再去相除,答案会有问 ...

  7. day6 云道页面 知识点梳理(1)

    关于块级元素.行内元素.行内块元素的梳理 (1)块级元素 特点:   a.可以设置宽高,行高,外边距和内边距   b.块级元素会独占一行    c.宽度默认是容器的100%    d.可以容纳内联元素 ...

  8. cocoa pods最新安装说明和使用方法

    最新版 CocoaPods 的安装流程 1.移除现有Ruby默认源 $gem sources --remove https://rubygems.org/ 2.使用新的源 $gem sources - ...

  9. git 其它补充(版本)

    1.给源码贡献力量(当自己比较牛逼时) pull request 2..gitignore文件 在创建仓库的时候可以进行设置 3.版本 git tag -a v1.0 -m '版本介绍' 本地创建Ta ...

  10. xLua下使用lua-protobuf

    本文发表于程序员刘宇的博客,转载请注明来源:https://www.cnblogs.com/xiaohutu/p/12168781.html protobuf作为一种通用套接字格式,各种插件里,最本质 ...