用菜鸟的视角去 认识 Angular 2+ （1. 项目结构）

前言

由于工做的缘由，如今是在使用 Angular6+ 对项目进行开发以及 Angular的 UI 框架进行开发，因此对 Angular 也有了必定的了解。 借此系列文章， 也但愿系列文章， 能帮助可能即将使用Angular 的 开发人员，能起到必定的上手的做用， 那就再好不过了。

关于Angular

1. AngularJs !== Angular 2+
2. Angular 2+ 有很好的中文版文档 www.angular.cn/
3. 基于 Angular 咱们能够构建适用于全部平台的应用。好比：Web 应用、移动 Web 应用、移动应用和桌面应用等

为何用 Angular

1. 因为所处环境，后端人员较多，且后端人员也在进行前端任务的开发，那Angular的思想，并结合Typescript，使得后端程序员能很快上手并构建前端页面。
2. Angular是一个真正意义上的框架，全部解决方案都会在Angular里，例如 http 请求， 表单系统， 路由，动态html 等等。
3. Angular有一套属于本身的开发节奏和项目结构， 使得在 大型项目里，可以在很是多人开发的状况下仍然保持着 结构健全和可维护。

为何用 Angular

1. 公司在用
2. Angular在配合 Typescript 的静态检查 能够提早知道许多问题所在。这是 JS 作不到的，且 Typescript 与 Angular已是深度交融了
3. 不须要再去 npm 过多的其余东西 例如 常见的 axios
4. 学习成本对我来讲并不高，完成开发级别 其实很容易入手
5. Google 固然也是一大重要缘由
6. 三个框架确定都得玩玩(哈哈哈哈哈哈哈)

安装Angular

www.angular.cn/cli 请按照文档进行安装，能够说是十分傻瓜了。

部分Angular 项目结构(src里已经有写的东西了，不过正好能够当作看一个在开发的项目)

介绍项目前的必要知识

1. 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 { }
复制代码

我第一次看这个文件

1. routes 使用过 Vue 的就知道， 这是一个路由数组,每一个对象 有 path 路径, component 天然就是加载的组件
2. : Routes 每一篇Typescript的入门教程 都会讲的 类型声明。
3. loadChildren 翻译过来就是加载儿子, 推断一下，应该是加载子集的东西。(是的， 它的做用就是 懒加载 某个子模块)
4. @NgModule({}) 看不太懂，可是 imports exports 是能理解， 导入了路由， 导出了路由。(实际@NgModule 是一个装饰器,详细能够参见 Typescript装饰器(不难),也就明白其运做原理了)
5. exports class ..... 导出这个路由模块

我如今看这个文件

1. 根路由的定义。懒加载与否的设定
2. @NgModule装饰器给当前 AppRoutingModule 添加了 引入和导出的元数据.
3. RouterModule属性的路由对象 为 routes
4. 并导出RouterModule，能给其余模块使用

app.component.ts

我第一次看这个文件

1. @Component() 不太懂， 可是selector templateUrl,styleUrls 能够懂。(@Component也是装饰器, 给AppComponent添加上面三个属性)
2. title = 'condee-ui-ng' 对应就是 组件的数据。 Vue 的 data, react 的 state

我如今看这个文件

1.@Component 装饰器 给 AppComponent 添加了三个元数据,告诉 Angular 到哪里获取它须要的主要构造块，以建立和展现这个组件及其视图。 并导出了AppComponent。 2. AppComponent 里 能够编写组件本身的静态属性。

...

（未完待续）