ChuannBlog

Angular

• Angular 是一个开发平台。它能帮你更轻松的构建 Web 应用。Angular 集声明式模板、依赖注入、端到端工具和一些最佳实践于一身，为你解决开发方面的各种挑战。Angular 为开发者提升构建 Web、手机或桌面应用的能力。

快速上手

设置开发环境

• 检查node和npm
  • node -v 和 npm -v
    • node必须大于8.x
    • npm必须大于5.x
  • 可能遇到的问题：
    • ubuntu系统下apt install nodejs-legacy，然后node -v查看版本仅4.2.6，版本过低
    • 卸载之前的node后按照以下以流程重新安装
      • 安装nodejs
        • apt install nodejs
        • apt install nodejs-legacyn
        • apt install npm
      • 更新npm镜像源
        • npm config set registry https://registry.npm.taobao.org
        • npm config list
      • 安装n管理器(npm下的nodejs版本管理模块)
        • npm install -g n
      • 更新nodejs
        • n latest下载最新版本
        • n stable下载稳定版本
        • 输入n通过上下键选择版本，回车键确认(使用ssh工具可能会导致显示不及时，建议新开窗口查看)
      • node -v查看是否更新了版本
• 安装angular cli(命令行工具)
  • npm install -g @angular/cli

创建新项目

• ng new my-app
• Angular CLI 会安装必要的 NPM 包、创建项目文件，并在该项目中生成一个简单的默认应用。这可能要花一点时间。
  • 你可以使用 ng add 命令往新项目中添加一些预先打包好的功能。 ng add 命令会通过应用来自特定 NPM 包中的图纸（schematic）来转换此项目。 要了解更多，参见 Angular CLI 文档。
  • 比如 Angular Material 就为一些典型布局提供了图纸。参见 Angular Material 文档。

启动服务器

• 进入项目
  • cd my-app
• 启动项目
  • ng server --help获取启动项目的参数说明
  • ng serve --host 0.0.0.0 --port 4200启动服务并接受来自所有ip的请求，监听4200端口，不添加–host和–prot参数默认监听127.0.0.1:4200
• 此时访问ip:4200则可以看到angluar的欢迎页

编辑你的第一个Angluar组件

• CLI 为你创建了第一个 Angular 组件。 它就是名叫 app-root 的根组件。 你可以在 ./src/app/app.component.ts 目录下找到它。
  • 修改title可以修改页面上欢迎语中的字符

• 打开 src/app/app.component.css 并给这个组件设置一些样式

   h1 {
     color: #369;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 250%;
   }
  

项目文件概览

• src文件夹
  • 应用代码位于 src 文件夹中
  • 所有的 Angular 组件、模板、样式、图片以及你的应用所需的任何东西都在那里。
  • 这个文件夹之外的文件都是为构建应用提供支持用的。

文件 File	用途 Purpose
app/app.component.{ts,html,css,spec.ts}	使用 HTML 模板、CSS 样式和单元测试定义 AppComponent 组件。 它是根组件，随着应用的成长它会成为一棵组件树的根节点。 Defines the AppComponent along with an HTML template, CSS stylesheet, and a unit test. It is the root component of what will become a tree of nested components as the application evolves.
app/app.module.ts	定义 AppModule，根模块为 Angular 描述如何组装应用。 目前，它只声明了 AppComponent。 不久，它将声明更多组件。 Defines AppModule, the root module that tells Angular how to assemble the application. Right now it declares only the AppComponent. Soon there will be more components to declare.
assets/*	这个文件夹下你可以放图片等任何东西，在构建应用时，它们全都会拷贝到发布包中。 A folder where you can put images and anything else to be copied wholesale when you build your application.
environments/*	这个文件夹中包括为各个目标环境准备的文件，它们导出了一些应用中要用到的配置变量。 这些文件会在构建应用时被替换。 比如你可能在生产环境中使用不同的 API 端点地址，或使用不同的统计 Token 参数。 甚至使用一些模拟服务。 所有这些，CLI 都替你考虑到了。 This folder contains one file for each of your destination environments, each exporting simple configuration variables to use in your application. The files are replaced on-the-fly when you build your app. You might use a different API endpoint for development than you do for production or maybe different analytics tokens. You might even use some mock services. Either way, the CLI has you covered.
browserslist	一个配置文件，用来在不同的前端工具之间共享目标浏览器。 A configuration file to share target browsers between different front-end tools.
favicon.ico	每个网站都希望自己在书签栏中能好看一点。 请把它换成你自己的图标。 Every site wants to look good on the bookmark bar. Get started with your very own Angular icon.
index.html	这是别人访问你的网站是看到的主页面的 HTML 文件。 大多数情况下你都不用编辑它。 在构建应用时，CLI 会自动把所有 js 和 css 文件添加进去，所以你不必在这里手动添加任何 <script> 或 <link> 标签。 The main HTML page that is served when someone visits your site. Most of the time you'll never need to edit it. The CLI automatically adds all js and css files when building your app so you never need to add any <script> or <link> tags here manually.
karma.conf.js	给Karma的单元测试配置，当运行 ng test 时会用到它。 Unit test configuration for the Karma test runner, used when running ng test.
main.ts	这是应用的主要入口点。 使用JIT 编译器编译本应用，并启动应用的根模块 AppModule，使其运行在浏览器中。 你还可以使用AOT 编译器，而不用修改任何代码 —— 只要给 ng build 或 ng serve 传入 --aot 参数就可以了。 The main entry point for your app. Compiles the application with the JIT compiler and bootstraps the application's root module (AppModule) to run in the browser. You can also use the AOT compiler without changing any code by appending the--aot flag to the ng build and ng serve commands.
polyfills.ts	不同的浏览器对 Web 标准的支持程度也不同。 腻子脚本（polyfill）能把这些不同点进行标准化。 你只要使用 core-js 和 zone.js 通常就够了，不过你也可以查看浏览器支持指南以了解更多信息。 Different browsers have different levels of support of the web standards. Polyfills help normalize those differences. You should be pretty safe with core-js and zone.js, but be sure to check out the Browser Support guide for more information.
styles.css	这里是你的全局样式。 大多数情况下，你会希望在组件中使用局部样式，以利于维护，不过那些会影响你整个应用的样式你还是需要集中存放在这里。 Your global styles go here. Most of the time you'll want to have local styles in your components for easier maintenance, but styles that affect all of your app need to be in a central place.
test.ts	这是单元测试的主要入口点。 它有一些你不熟悉的自定义配置，不过你并不需要编辑这里的任何东西。 This is the main entry point for your unit tests. It has some custom configuration that might be unfamiliar, but it's not something you'll need to edit.
tsconfig.{app|spec}.json	TypeScript 编译器的配置文件。tsconfig.app.json 是为 Angular 应用准备的，而 tsconfig.spec.json 是为单元测试准备的。 TypeScript compiler configuration for the Angular app (tsconfig.app.json) and for the unit tests (tsconfig.spec.json).
tslint.json	额外的 Linting 配置。当运行 ng lint 时，它会供带有 Codelyzer 的 TSLint 使用。 Linting 可以帮你们保持代码风格的一致性。 Additional Linting configuration for TSLint together with Codelyzer, used when running ng lint. Linting helps keep your code style consistent.