Angular Demo One - 打造企业级协作平台

create by jsliang on 2018-9-5 11:56:07
Recently revised in 2019-05-31 16:06:16

已断更!缺乏对应基础,补基础去了!

第一章 环境搭建

1. 安装 Angular:

npm i @angular/cli -g

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.1.5
Node: 8.11.2
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.7.5
@angular-devkit/core         0.7.5
@angular-devkit/schematics   0.7.5
@schematics/angular          0.7.5
@schematics/update           0.7.5
rxjs                         6.3.2
typescript                   2.9.2

2. 安装 VS Code 插件:

Debugger for ChromeAngular 6 Snippets

3. 安装开发插件:

安装 Chrome 关于 Angular 的开发插件:点击前往

4. 常用命令:

npm i -S —— 软件开发依赖
npm i -D —— 软件生产依赖
ng new  —— 新建 Angular项目
ng build -prod —— 生产环境编译
ng server —— 启动开发服务器

5. Mock Rest API:

  • json-server: 用户快速搭建 REST API 的利器。
  • 安装:npm i json-server -g,版本为 0.14.0
  • 启动:json-server /json 文件位于的目录/*.json
  • 支持 GET, POST, PUT, PATCH, DELETE 等 REST 命令。

6. 测试 REST API:

  • 几种常用的 API 测试工具:

  • 使用 Postman 测试常用的 API:地址

  • 使用 VS Code 的 REST Client 插件

此刻, jsliangnode 等版本为:
node : 8.11.2
npm : 6.3.0
cnpm : 6.0.0

第二章 项目工程结构介绍

图

2.1 文件组织约定

  • 目录结构按相对独立的功能划分
  • src/app 下第一层子目录中除了模块,还有领域对象、动画和工具文件夹
  • 资源存放在 src/assets 目录下

2.2 命名约定

  • 模块和组件的类文件都使用 index.ts 的命名约定

2.3 新建项目

ng new taskmgr -si --style=scss —— 新建 angular 项目
// 注: -si === --skip-install
cnpm i —— 安装依赖
ng g m core —— 创建核心模块
ng g m shared —— 创建分享模块

图

图

2.4 添加代码

taskmgr/src/app/core/core.module.ts

// 原代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule { }
// 更新后代码
import { NgModule, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class CoreModule { 
  constructor(parent: CoreModule) {
    if(parent) {
      throw new Error("模块已经存在,不能再次加载!");
    }
  }
}

taskmgr/src/app/shared/shared.module.ts

// 原代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule { }
// 更新后代码
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    CommonModule
  ],
  declarations: []
})
export class SharedModule { }

taskmgr/src/app/app.module.ts

// 原代码
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
// 更新后代码
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { CoreModule } from './core/core.module';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三章 UI整体布局

图

3.1 修改代码

  1. ng g c core/header --spec=false
  2. ng g c core/footer --spec=false
  3. ng g c core/sidebar --spec=false

taskmgr/src/app/app.component.html

// 源代码
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to !
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>
// 修改后
<div>
  <header>
    <app-header></app-header>
  </header>
  <main></main>
  <footer>
    <app-footer></app-footer>
  </footer>
</div>

taskmgr/src/app/core/core.module.ts

// 源代码
// 修改后

jsliang 广告推送:
也许小伙伴想了解下云服务器
或者小伙伴想买一台云服务器
或者小伙伴需要续费云服务器
欢迎点击 云服务器推广 查看!

图 图

知识共享许可协议
jsliang 的文档库梁峻荣 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于https://github.com/LiangJunrong/document-library上的作品创作。
本许可协议授权之外的使用权限可以从 https://creativecommons.org/licenses/by-nc-sa/2.5/cn/ 处获得。

Copyright © jsliang.top 2019 all right reserved,powered by Gitbook该文件修订时间: 2019-06-01 19:33:27

results matching ""

    No results matching ""