工程目录结构说明

整体结构说明

src 目录下的说明

app 根节点

common 常用文件

controller 事件层

import { Component, OnInit, Input } from "@angular/core";
import { Router } from "@angular/router";
// 引用login的接口
import { userInfoModel } from "../../modules/login0000/login.module";
@Component({
  selector: "",
  template: "",
})
export class LoginController {
  constructor(private router: Router) {}
  // 创建变量使用接口类型进行赋值。注意赋值的类型必须和定义接口的类型一致，否则会报错
  loginInfo: userInfoModel = {
    userName: "",
    userPassword: "",
    remember: false,
  };
}

modules 数据接口定义文件

//定义login的接口并暴露出去
export interface userInfoModel {
  userName: string;
  userPassword: string;
  remember?: boolean;
}

pageCommon 组件复用

header文件夹

header.component.html 写 ui 的文件

header.component.scss 写 css 的文件
header.component.spec.ts 测试文件，不用管
header.component.ts 写 js 事件的文件

// header.component.ts文件
// 页面使用header组件只需要在html顶部引入<app-header></app-header>就行了
// <app-header></app-header>就是selector的名称，selector修改了引入的也要修改
import { Component, OnInit } from "@angular/core";
@Component({
  selector: "app-header",
  templateUrl: "./header.component.html",
  styleUrls: ["./header.component.scss"],
})
export class HeaderComponent implements OnInit {
  constructor() {}
  ngOnInit(): void {}
}

components

home (home 页面)
login0000 (login 页面)

requests

api.ts

import { get, post } from "./http";
//post(url,params)
export const login = (params: any, headers: any) =>
  post("/raku0000/login", params);

config.ts

let mockPort = 4200;
export default {
  isMock: true,
  mockHost: "http://localhost:" + mockPort + "/",
  mockPort: mockPort,
};

http.ts

/**
 * 网络请求配置
 */
import axios from "axios";
import config from "./config";
axios.defaults.timeout = 50000;
const mockHost = config.mockHost;
axios.defaults.baseURL = "http://localhost:4200";
/**
 * http request 拦截器
 */
axios.interceptors.request.use(
  (config: any) => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      "Content-Type": "application/json",
    };
    return config;
  },
  (error: any) => {
    return Promise.reject(error);
  }
);
/**
 * http response 拦截器
 */
axios.interceptors.response.use(
  (response: any) => {
    if (response.data.errCode === 2) {
      console.log("过期");
    }
    return response;
  },
  (error: any) => {
    console.log("请求出错：", error);
  }
);
/**
 * 封装get方法
 * @param url  请求url
 * @param params  请求参数
 * @returns {Promise}
 */
export function get(url: string, params: any) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params,
      })
      .then((response: any) => {
        landing(url, params, response.data);
        resolve(response.data);
      })
      .catch((error: any) => {
        reject(error);
        axios
          .get(mockHost + "assets/mock-data" + url + ".json")
          .then((response: any) => {
            //关闭进度条
            resolve(response.data);
          });
      });
  });
}
/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url: string, data: any) {
  return new Promise((resolve, reject) => {
    axios
      .post(url, data)
      .then((response: any) => {
        //关闭进度条
        resolve(response.data);
      })
      .catch((error: any) => {
        reject(error);
        axios
          .get(mockHost + "assets/mock-data" + url + ".json")
          .then((response: any) => {
            //关闭进度条
            resolve(response.data);
          });
      });
  });
}
/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url: string, data: any) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data).then(
      (response: any) => {
        resolve(response.data);
      },
      (err: any) => {
        msag(err);
        reject(err);
      }
    );
  });
}
/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url: string, data: any) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(
      (response: any) => {
        resolve(response.data);
      },
      (err: any) => {
        msag(err);
        reject(err);
      }
    );
  });
}
export function fecth(
  fecth: any,
  mockUrl: any,
  url: string,
  param: any
) {
  return new Promise((resolve, reject) => {
    switch (fecth) {
      case "get":
        get(url, param)
          .then(function (response) {
            resolve(response);
          })
          .catch(function (error) {
            reject(error);
          });
        break;
      case "post":
        post(url, param)
          .then(function (response) {
            resolve(response);
          })
          .catch(function (error) {
            reject(error);
          });
        break;
      default:
        break;
    }
  });
}
//失败提示
function msag(err: any) {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        alert(err.response.data.error.details);
        break;
      case 401:
        alert("未授权，请登录");
        break;
      case 403:
        alert("拒绝访问");
        break;
      case 404:
        alert("请求地址出错");
        break;
      case 408:
        alert("请求超时");
        break;
      case 500:
        alert("服务器内部错误");
        break;
      case 501:
        alert("服务未实现");
        break;
      case 502:
        alert("网关错误");
        break;
      case 503:
        alert("服务不可用");
        break;
      case 504:
        alert("网关超时");
        break;
      case 505:
        alert("HTTP版本不受支持");
        break;
      default:
    }
  }
}
/**
 * 查看返回的数据
 * @param url
 * @param params
 * @param data
 */
function landing(url: string, params: any, data: any) {
  if (data.code === -1) {
  }
}

service 共同文件
app.component.html 页面的根节点里面放的是看路由输出标签

<router-outlet></router-outlet>

app.component.scss
app.component.spec.ts
app.component.ts
app.module.ts 挂在文件，所有安装的依赖、组件都要在这里面挂载

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
import { HeaderComponent } from "./common/pageCommon/header/header.component";
import { FooterComponent } from "./common/pageCommon/footer/footer.component";
import { HomeComponent } from "./components/home/home.component";
import { AppRoutingModule } from "./router/app-routing.module";
import { Login0000Component } from "./components/login0000/login0000.component";
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    HomeComponent,
    Login0000Component,
  ],
  imports: [BrowserModule, AppRoutingModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

assets 静态资源文件

images 图片文件
styles 样式文件

bacs.scss 基本的样式

body,
textarea,
input,
select,
option {
  font-size: 14px;
  color: #333;
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New";
  -webkit-font-smoothing: antialiased;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
ol,
ul,
dl,
dd,
p,
textarea,
input,
select,
option,
form {
  margin: 0;
}
ol,
ul,
textarea,
input,
option,
th,
td {
  padding: 0;
}
table {
  border-collapse: collapse;
}
ul,
li {
  list-style: none;
}

index.html 入口页面

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>DefaultAngularApp</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

main.ts 入口文件

import { enableProdMode } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { AppModule } from "./app/app.module";
import { environment } from "./environments/environment";
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

polyfills.ts 兼容不同的浏览器

import "zone.js";

angular工程目录结构说明

工程目录结构说明

整体结构说明

src 目录下的说明

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

angular工程目录结构说明

工程目录结构说明

整体结构说明

src 目录下的说明

热门文章

最新文章

相关课程

相关电子书