完成 Angular8 构建简单CRM 系统

落日映苍穹つ 2024-04-17 20:27 48阅读 0赞

######  ######

### 一、 Angular 简介 ###

1.  框架和库
    
     *  框架(Framework)包含库(Library)
     *  框架制定了一套规范或者规则 AngulatJS 、 BackBone 、 Vue
     *  React + React-Router+ React-Redux

1.  Angular 概述
    
     *  一套框架多平台 TypeScript 书写
     *  优势： AngularJS -> Angular (1.0 版本之后) 借鉴和吸收了 emben 和 react 精华, 组件分离、 可伸缩性、 跨平台、生产率(模版、cli、 编辑器) , 测试(端到端，单元测试)

## 二、 Angular 开发环境配置 ##

1.  安装环境
    
     *  安装 node
        
        > node -v npm -v
     *  安装 yarn
        
        > yarn -v
     *  yarn global add @angular/cli
        
        > ng version
2.  cli-new
    
     *  创建项目
     *  参数
     *  –routing = true | false
     *  –style = css | less | sass
    
      
    
    
    > ng new --routing --style=less
    
    > ng new newAngular–routing=true–style=less
3.  cli-serve
    
     *  启动项目 参数
     *  端口 --port 4200
     *  打开 --open=true|false  
          
        
    
    > yarn install
    
    > ng serve --port 4200 --open
4.  cli-build
    
     *  参数
     *  –aot=true|false
     *  –prod=true|false
     *  –baseHref=baseHref  
          
        
    
    > ng build --aot --prod --baseHref=/static/
5.  cli-generate
    
     *  创建模块、组件、服务
     *  module < name > – routing
     *  component < name >
     *  service < name > / < name >
     *  创建一个 myInfo 的模块  
          
        
    
    > ng generate module myInfo --routing

*  创建一个 myComponent 的组件
    
    > ng generate component myComponent
 *  创建一个 myserve 服务
    
    > ng generate service myServe/myServe
    
    > 可首字母简写 ng g m + < name > …

## 三、 Angular 项目目录及文件说明 ##

1.  目录结构
    
     *  编辑器配置.editorconfig
     *  项目配置 angular.json
     *  浏览器兼容 browserslist
     *  包管理 package
     *  ts 设置 tsconfig.app
     *  代码规范 tsconfig.json
     *  静态文件 assets
     *  图标 favicon.ico
     *  类型环境判断 environments 文件
     *  index.html 根文件
     *  main.ts 根模块
     *  polyfills.ts 兼容 IE 浏览器，做兼容
     *  style.less 通用样式文件
     *  test.ts 单元测试文件
     *  e2e 端到端测试文件
2.  应用源码目录 app/
    
     *  app.module.ts > bootstrap 加载根
     *  组件、模块、服务
3.  文件加载顺序
    
    > main.ts -> app.modules -> app.component -> app.component.html -> index.html

## 四、 Angular 模块 ##

1.  Anguler 模块化
    
     *  javascript 模块， class 类
     *  @NgModule 元数据
     *  export 共享模块
     *  bootstrap 加载的时候读哪个组件 展示页面
     *  providers 不常用 常用于动态组件
2.  创建模块

## 五、 Angular 组件 ##

*  组件是 Angular 应用中最基本的 UI 构造块
 *  组件必须从属于某个 NgModule 才能被其他组件或应用使用
 *  组件在@NgModule : declarations 声明组件
    
    providers 引入服务
    
    export
    
    imports
    
    bootstrap 主
    
    entryComoinents 动态组件
 *  元数据@Component: selector:'app-root
    
    templateUrl: ‘url’
    
    template:\`\`
    
    stylesUrls: \[\]
    
    styles
    
    animations

1.  组件模板  
    组件： 屏幕上的一小片区域 核心—组件， 是 angular 中最基本的 UI 构造块  
    模块： 组件必须从属模块并通过 declarations 引入  
    元数据：  
    ng g m input  
    ng g c input
2.  绑定语法
    
     *  插值表达式
     *  .ts: public footer = ‘@ 2019 rockshang.cn 杭 ICP 备案 120000-号’
     *  .html: \{ \{footer\}\}
     *  模版表达式: \{ \{year+10\}\}
     *  添加属性: < a \[ href \]=“info”></ a >
     *  添加事件: < a ( click )=“jumper()”></ a >
     *  双向数据绑定: \[\{ … \}\]

1.  内置属性型指令
    
     *  内置属性绑定
        
         *  添加 class:
         *  < a \[ ngClass \]=" ‘first second’ "> </ a >
         *  < a \[ ngClass \]=" \[‘first’ , ‘second’\] "> </ a >
         *  < a \[ ngClass \]=" \{‘first’: true, ‘second’ : false \} "> </ a >
         *  内联 style
         *  < a \[ ngStyle \]="\{‘color’:’\#f00’\}">Test4< /a >
         *  双向绑定: NgModel
     *  内置结构型指令(for if)
     *  \*ngIf=“变量”
    
    > < div \*ngIf=“isInfo”>暂无数据</ div>
    
     *  \*ngFor=“变量”
    
    > < tr \*ngFor=“let info of infos”>
    
     *  \*ngSwitch （用的不多）

1.  生命周期钩子(8 个)
    
     *  ngOnchanges 组件初始化之前
     *  ngOnInit 初始化时(1 次)
     *  ngDoCheck 组件发送变化执行
     *  ngAfterContentInit 初始化之后调用
     *  ngAfterContentCheked 初始化后检测变更
     *  ngAfterViewInit 模版内容初始化调用
     *  ngAfterViewChecked 模版内容初始化后检测变化
     *  ngOnDestory 销毁组件

## 六、 Angular 路由 ##

1.  路由模块
    
    > cli --routing  
    > app-router.module.ts
2.  路由配置
    
    基本得分路径与组件配置
    
    > 在 app-router.module.ts 中配置路由
    
    懒加载自模块，自模块需要路由设置启动子组件
3.  加载路由
    
        const routes: Routes = [
        {
         path: 'info', component: InfoComponent,
         children: []
        },
        { path: 'input', component: InputComponent },
        { path: '', redirectTo: 'info', pathMatch: 'full' },  // 完整路径下重定向
        { path: '**', redirectTo: 'info', pathMatch: 'full' }
        ];
4.  链接及访问
    
     *  模版属性访问路由： < a \[ routerLink \]="\[ ‘/info’ \]" > </ a >
     *  通过路由模块的内置方法访问路由
    
    > import \{ Router \} from ‘@angular/router’;  
    > constructor(private router: Router) \{ \}  
    > this.router.navigate(\[‘input’\]);
    
     *  控制路由激活状态样式
    
    > routerLinkActive=“router-link-active”

1.  传递参数
    
     *  传递一个路径参数
    
    > path: ‘info/:id’, component: InfoComponent,  
    > constructor 中接收 constructor(private routeInfo: ActivatedRoute) \{ \}  
    > 获取 console.log(this.routeInfo.snapshot.params\[‘id’\]);
    
     *  传递多个
    
    > \[ queryParams \]="\{id:1,name:‘crm’\}"  
    > 获取 console.log(this.routeInfo.snapshot.queryParams\[‘id’\]);

## 七、 Angular 服务 & 通讯 ##

1.  Angular 服务
    
     *  依赖注入
     *  HttpClient 模块 封装好了的 ajax
     *  server 中调取接口
     *  订阅服务, 在组件中调用，依赖注入
     *  于 info/info.service.ts
    
        import { Injectable } from '@angular/core';
        // import { HttpClient } from '@angular/common/http';
        import { HttpClient } from '@angular/common/http';
    
        @Injectable({
         providedIn: 'root'
         })
         export class InfoService {
         // 获取 json
         private infoUrl = '/assets/json/info.json';
         constructor(private http: HttpClient) {
        
         }
         public getInfoList() {
         return this.http.get(this.infoUrl);
         }

预览：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]

代码： [github][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDE2MDM4NQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/8778a810d4554090bbd7972edd9fae3d.png
[github]: https://github.com/s2265681/angular8.git