angular工程目录结构说明

简介: angular工程目录结构说明

工程目录结构说明



ff5988888caaf5f1efd66b727409f116.jpg


整体结构说明


image.png


src 目录下的说明


  • src
  • app 根节点
  • common 常用文件
  • controller 事件层
  • login.controller.ts login 页面的事件层,代码如下


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.module.ts login 页面的接口定义,代码如下


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



pageCommon 组件复用


  • 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";


相关文章
|
3天前
|
人工智能 自然语言处理 Shell
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
仅用3分钟,百炼调用满血版Deepseek-r1 API,享受百万免费Token。阿里云提供零门槛、快速部署的解决方案,支持云控制台和Cloud Shell两种方式,操作简便。Deepseek-r1满血版在推理能力上表现出色,尤其擅长数学、代码和自然语言处理任务,使用过程中无卡顿,体验丝滑。结合Chatbox工具,用户可轻松掌控模型,提升工作效率。阿里云大模型服务平台百炼不仅速度快,还确保数据安全,值得信赖。
157353 24
深度评测 | 仅用3分钟,百炼调用满血版 Deepseek-r1 API,百万Token免费用,简直不要太爽。
|
5天前
|
人工智能 API 网络安全
用DeepSeek,就在阿里云!四种方式助您快速使用 DeepSeek-R1 满血版!更有内部实战指导!
DeepSeek自发布以来,凭借卓越的技术性能和开源策略迅速吸引了全球关注。DeepSeek-R1作为系列中的佼佼者,在多个基准测试中超越现有顶尖模型,展现了强大的推理能力。然而,由于其爆火及受到黑客攻击,官网使用受限,影响用户体验。为解决这一问题,阿里云提供了多种解决方案。
16969 37
|
13天前
|
机器学习/深度学习 人工智能 自然语言处理
PAI Model Gallery 支持云上一键部署 DeepSeek-V3、DeepSeek-R1 系列模型
DeepSeek 系列模型以其卓越性能在全球范围内备受瞩目,多次评测中表现优异,性能接近甚至超越国际顶尖闭源模型(如OpenAI的GPT-4、Claude-3.5-Sonnet等)。企业用户和开发者可使用 PAI 平台一键部署 DeepSeek 系列模型,实现 DeepSeek 系列模型与现有业务的高效融合。
|
5天前
|
并行计算 PyTorch 算法框架/工具
本地部署DeepSeek模型
要在本地部署DeepSeek模型,需准备Linux(推荐Ubuntu 20.04+)或兼容的Windows/macOS环境,配备NVIDIA GPU(建议RTX 3060+)。安装Python 3.8+、PyTorch/TensorFlow等依赖,并通过官方渠道下载模型文件。配置模型后,编写推理脚本进行测试,可选使用FastAPI服务化部署或Docker容器化。注意资源监控和许可协议。
1310 8
|
13天前
|
人工智能 搜索推荐 Docker
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
DeepSeek R1 + LobeChat + Ollama:快速本地部署模型,创建个性化 AI 助手
3416 117
手把手教你使用 Ollama 和 LobeChat 快速本地部署 DeepSeek R1 模型,创建个性化 AI 助手
|
8天前
|
人工智能 自然语言处理 API
DeepSeek全尺寸模型上线阿里云百炼!
阿里云百炼平台近日上线了DeepSeek-V3、DeepSeek-R1及其蒸馏版本等六款全尺寸AI模型,参数量达671B,提供高达100万免费tokens。这些模型在数学、代码、自然语言推理等任务上表现出色,支持灵活调用和经济高效的解决方案,助力开发者和企业加速创新与数字化转型。示例代码展示了如何通过API使用DeepSeek-R1模型进行推理,用户可轻松获取思考过程和最终答案。
|
5天前
|
人工智能 自然语言处理 程序员
如何在通义灵码里用上DeepSeek-V3 和 DeepSeek-R1 满血版671B模型?
除了 AI 程序员的重磅上线外,近期通义灵码能力再升级全新上线模型选择功能,目前已经支持 Qwen2.5、DeepSeek-V3 和 R1系列模型,用户可以在 VSCode 和 JetBrains 里搜索并下载最新通义灵码插件,在输入框里选择模型,即可轻松切换模型。
934 14
|
12天前
|
API 开发工具 Python
阿里云PAI部署DeepSeek及调用
本文介绍如何在阿里云PAI EAS上部署DeepSeek模型,涵盖7B模型的部署、SDK和API调用。7B模型只需一张A10显卡,部署时间约10分钟。文章详细展示了模型信息查看、在线调试及通过OpenAI SDK和Python Requests进行调用的步骤,并附有测试结果和参考文档链接。
1938 9
阿里云PAI部署DeepSeek及调用
|
9天前
|
人工智能 数据可视化 Linux
【保姆级教程】3步搞定DeepSeek本地部署
DeepSeek在2025年春节期间突然爆火出圈。在目前DeepSeek的网站中,极不稳定,总是服务器繁忙,这时候本地部署就可以有效规避问题。本文以最浅显易懂的方式带读者一起完成DeepSeek-r1大模型的本地部署。
|
12天前
|
缓存 自然语言处理 安全
快速调用 Deepseek API!【超详细教程】
Deepseek 强大的功能,在本教程中,将指导您如何获取 DeepSeek API 密钥,并演示如何使用该密钥调用 DeepSeek API 以进行调试。

热门文章

最新文章

相关实验场景

更多