前言
因为工作的原因，现在是在使用 Angular6+ 对项目进行开发以及 Angular的 UI 框架进行开发，所以对 Angular 也有了一定的了解。 借此系列文章， 也希望系列文章， 能帮助可能即将使用Angular 的 开发人员，能起到一定的上手的作用， 那就再好不过了。
关于Angular
- AngularJs !== Angular 2+
- Angular 2+ 有很好的中文版文档 www.angular.cn/
- 基于 Angular 我们可以构建适用于所有平台的应用。比如：Web 应用、移动 Web 应用、移动应用和桌面应用等
为什么用 Angular
- 由于所处环境，后端人员较多，且后端人员也在进行前端任务的开发，那Angular的思想，并结合Typescript，使得后端程序员能很快上手并构建前端页面。
- Angular是一个真正意义上的框架，所有解决方案都会在Angular里，例如 http 请求， 表单系统， 路由，动态html 等等。
- Angular有一套属于自己的开发节奏和项目结构， 使得在 大型项目里，能够在非常多人开发的情况下仍然保持着 结构健全和可维护。
为什么用 Angular
- 公司在用
- Angular在配合 Typescript 的静态检查 可以提前知道许多问题所在。这是 JS 做不到的，且 Typescript 与 Angular已经是深度交融了
- 不需要再去 npm 过多的其他东西 例如 常见的 axios
- 学习成本对我来说并不高，完成开发级别 其实很容易入手
- Google 当然也是一大重要原因
- 三个框架肯定都得玩玩(哈哈哈哈哈哈哈)
安装Angular
www.angular.cn/cli 请按照文档进行安装，可以说是十分傻瓜了。
部分Angular 项目结构(src里已经有写的东西了，不过正好可以当做看一个在开发的项目)
介绍项目前的必要知识
-
Module 模块
官方也有对这个的着重介绍，很多人的博客也会提到NgModule
这里我想说说我对Module这个概念的理解：
例子： 一台电脑 = 显示器 + 主机 + 键鼠
Angular视角：
一台电脑 = 显示器模块 + 主机模块 + 键鼠模块
显示器模块 = 底座组件(component) + 显示器屏幕组件(component) + 电线组件(component)
主机模块 = 显卡组件(component) + 操作系统服务(service) + 机箱组件(component) + CPU组件(component) + ...
键鼠模块 = 键盘模块(Module) + 鼠标模块(Module)
键盘模块 = 键盘组件(component) + 连接线(component)
鼠标模块 = 鼠标组件(component) + 连接线(component)
...
在我的理解里 模块就是把组件、服务和其他(例如指令,管道)合成一个功能块。 当我引入这个模块之后,就可以使用这个功能块的功能。
src
当然就是我们的页面放的地方啦。
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { RefreshComponent } from './refresh/refresh.component';
import { AlertComponent } from './alert/alert.component';
const routes: Routes = [
{ path: '', component: WelcomeComponent },
{ path: 'layout', loadChildren: './layout/layout.module#LayoutModule' },
{ path: 'refresh', component: RefreshComponent },
{ path: 'alert', component: AlertComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
我第一次看这个文件
- routes 使用过 Vue 的就知道， 这是一个路由数组,每个对象 有 path 路径, component 自然就是加载的组件
- : Routes 每一篇Typescript的入门教程 都会讲的 类型声明。
- loadChildren 翻译过来就是加载儿子, 推断一下，应该是加载子集的东西。(是的， 它的作用就是 懒加载 某个子模块)
- @NgModule({}) 看不太懂，但是 imports exports 是能理解， 导入了路由， 导出了路由。(实际@NgModule 是一个装饰器,详细可以参见 Typescript装饰器(不难),也就明白其运作原理了)
- exports class ..... 导出这个路由模块
我现在看这个文件
- 根路由的定义。懒加载与否的设定
- @NgModule装饰器给当前 AppRoutingModule 添加了 引入和导出的元数据.
- RouterModule属性的路由对象 为 routes
- 并导出RouterModule，能给其他模块使用
app.component.ts
我第一次看这个文件
- @Component() 不太懂， 但是selector templateUrl,styleUrls 可以懂。(@Component也是装饰器, 给AppComponent添加上面三个属性)
- title = 'condee-ui-ng' 对应就是 组件的数据。 Vue 的 data, react 的 state
我现在看这个文件
1.@Component 装饰器 给 AppComponent 添加了三个元数据,告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。 并导出了AppComponent。 2. AppComponent 里 可以编写组件自己的静态属性。
...
（未完待续）
