Angular建立专案(二)(Day17)

今天要来说明Angular专案内部各资料的功能

让我们从上往下讲吧

e2e:

端对端测试(end-to-end tests)

展开後可以看到里面有个src资料夹

打开src找到app.e2e-spec.ts後有没有感觉到，这好像在判断什麽状况，如果不是就印出某段讯息

在code前後还有 beforeEach和afterEach的函式，没错这个e2e资料夹就是在写测试的

import { browser, logging } from 'protractor';
import { AppPage } from './app.po';

describe('workspace-project App', () => {
  let page: AppPage;

  beforeEach(() => {
    page = new AppPage();
  });

  it('should display welcome message', async () => {
    await page.navigateTo();
    expect(await page.getTitleText()).toEqual('StockAngular app is running!');
  });

  afterEach(async () => {
    // Assert that there are no errors emitted from the browser
    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
    expect(logs).not.toContain(jasmine.objectContaining({
      level: logging.Level.SEVERE,
    } as logging.Entry));
  });
});

说到测试很多人应该有听过单元测试(unit testing)，那和端对端测试(end-to-end tests)有何不同呢?

A: 简单来说，单元测试偏向对单个元件(例如:repository、service) 进行测试。
对端对端测试(end-to-end tests)来说，他是针对元件间的相互作用进行测试，你可能会针对多个service&repository进行测试，Angular同时也有提供单元测试&端对端测试对应的指令。


ng test #单元测试

ng e2e #端对端测试

node_modules:

NPM下载套件库

还记得我们在ng new xxx 时的时候，Angular CLI会自动帮我们下载一些套件，它们都会放在这个资料夹

src:

专案程序存放处

app: 主程序区块，我们要写的code都会放在里面。

assets: 储存静态资源(ex:图片)。

environment: 环境配置(正式&非正式)。

里面含有两个ts档，可以配置不同的测试环境

environment.ts:非正式环境
environment.prod.ts:正式环境

favicon.ico: 网站图示

index.html: 因为Angular 就是一个SAP(Single Page Application)网站，这就是那一页。


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>StockAngular</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root> #Angular的组件
</body>
</html>

main.ts: 进入点，由此启动Angular专案。

polyfills.ts: 让专案在不同浏览器间的相容性变高

Angular is built on the latest standards of the web platform. Targeting such a wide range of browsers is challenging because they do not support all features of modern browsers.

style.css: 放置全域的css样式。

test.ts: 单元测试进入点。

.browserslistrc: 配置当Autoprefixer为你的 CSS 加字首时，就会查阅 Browserlist 的配置。

Autoprefixer:分析 CSS 程序码来决定该加上哪一些供应商前缀


#举例来说:

a {
  transition: transform 1s
}

#Autoprefixer後

a {
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

angular.json:

设置专案架构

karma.conf.js:

karma设定档

karma:快速建构及执行 test code 的环境工具

package-lock.json:

当node_modules新增或修改时会自动生成，会追踪npm下载套件的小版本号，让其他开发者可以精确下载套件的版本

The goal of package-lock.json file is to keep track of the exact version of every package that is installed so that a product is 100% reproducible in the same way even if packages are updated by their maintainers.

package.json:

只记录npm下载套件的大版本号

README.md:

专案说明文件

tsconfig.app.json:

.ts档案转译设定

Browsers can't execute TypeScript directly. Typescript must be "transpiled" into JavaScript using the tsc compiler, which requires some configuration.

tsconfig.json:

Angular- .ts档案转译器设定

At the root tsconfig.json file specifies the base TypeScript and Angular compiler options that all projects in the workspace inherit.

tsconfig.spec.json:

.ts测试档案转译设定

tsconfig.spec.json file is used for testing and sets "types": ["jasmine"] to allow using Jasmine's ambient declarations in tests.

tslint.json:

.ts档案检查设定

TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors. It is widely supported across modern editors & build systems and can be customized with your own lint rules, configurations, and formatters.

今天我们简单的对於Angular专案内容进行分析，有些东西如果觉得不清楚的话我以下以提供Angular文件的连结，可以自行去看原文喔。

参考资料:

Angular文件

<<: Day_20 DNS/DDNS/Port Forwards (一)

>>: 【day17】时间格式 X 搜寻结果排序