Angular 从入坑到挖坑 - Angular 使用入门

Overview

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

对应官方文档地址:

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

Contents

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

Knowledge Graph

Step by Step

通过 Angular CLI 创建第一个 Angular 应用

开发环境搭建

前提条件

  • 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

运行第一个 Angular 应用

通过 Angular CLI 命令来创建一个新的应用

## 指定位置,创建新的 angular 应用
ng new my-app

常用命令参数

options解释
--force强制覆盖现有文件
--skipInstall创建项目时跳过 npm install 命令
--strict在代码中使用更严格的 typescript 编译选项

运行项目

## 运行项目
ng serve

常用命令参数

options解释
--open / -o是否直接打开浏览器
--port指定程序运行的端口

项目结构、文件功能了解

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

占坑

作者:墨墨墨墨小宇
个人简介:96年生人,出生于安徽某四线城市,毕业于Top 10000000 院校。.NET程序员,枪手死忠,喵星人。于2016年12月开始.NET程序员生涯,微软.NET技术的坚定坚持者,立志成为云养猫的少年中面向谷歌编程最厉害的.NET程序员。
个人博客:yuiter.com
博客园博客:www.cnblogs.com/danvic712



  1. 工作空间类似于 .NET 项目中的解决方案,在一个工作空间内可以创建多个的项目 ↩︎

  2. 现代浏览器支持的某些原生 API,当用户使用老版本的浏览器或某些浏览器时并不支持,只要使用了 polyfills 这个库, 即可对于这些无法使用的浏览器添加支持,使用方法也无需更改(PS:针对的是原生的 API) ↩︎

  3. 还是因为不同浏览器支持的特性不同,或者是 css 样式前缀不同,通过 browserslist 来告诉项目中的各种前端工具,完成自动配置的过程 ↩︎

原文链接:juejin.im

上一篇:@ckeditor/ckeditor5-dev-bundler-rollup
下一篇:babel-preset-babili

相关推荐

  • 高级 Angular 组件模式 (3b)

    03b Enhance Components with Directives 原文: Enhance Components with Directives(https://blog.angula...

    2 年前
  • 高级 Angular 组件模式 (3a)

    03a Communicate Between Components Using Dependency Injection 原文: Communicate Between Components ...

    2 年前
  • 问道Angular——Angular设置别名alias

    设置别名   在根目录下tsconfig.json中添加baseUrl和paths 访问环境变量   添加了@env别名,以便能够import { environment } fro...

    1 年前
  • 问道Angular——Angular刷新当前页面

    onSameUrlNavigation   从angular5.1起提供onSameUrlNavigation来支持路由重新加载。、   有两个值'reload'和'ignore'。

    1 年前
  • 问道Angular——APP_INITIALIZER

    概述   有时需要在加载应用之前运行代码,有时希望暂停应用初始化,直到完成某些限制之后再执行。APPINITIALIZER令牌可以完成这项操作。 APPINITIALIZER是一个函数,在应用改程...

    1 年前
  • 针对angular分页插件tm.pagination二次触发问题三种解决方案

    今天在开发个人博客的时候,需要对列表进行分页操作,因为整体使用的是AngularJs,所以分页插件也就选择了AngularJs pagination.js。可是在调试的时候发现的非常恶心的事情,在加载...

    6 个月前
  • 都 9012了,该选择 Angular、React,还是Vue?

    转载请注明出处:葡萄城官网(https://www.grapecity.com.cn/),葡萄城为开发者提供专业的开发工具、解决方案和服务,赋能开发者。 139239201904181526...

    1 年前
  • 通过框架设计理解react、angular、vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    5 个月前
  • 通过框架设计理解React、Angular、Vue区别

    前言 我们已经通过学习掌握了vue.js这个渐进式的JavaScript 框架,并且大致知道了React、Angular和Vue的区别,那么如何对这三个框架进行深层次的分析,更好地区分它们呢?我们...

    5 个月前
  • 走进AngularJs之过滤器(filter)详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。

    3 年前

官方社区

扫码加入 JavaScript 社区