【源码】基于Angular7框架的兴义人安精神病医院门户网站

项目简介

本项目完全基于Angular7开发，其原型来自于Angular官网中的英雄编辑器示例项目，是兴义人安精神病医院门户网站的二次开发项目。

项目的主要特性和功能

• 基于Angular7框架构建，充分发挥TypeScript优势，避免数据类型错误。
• 采用单页面应用架构，使用路由配置的history api实现页面跳转。
• 开发目录结构清晰，便于进行组件修改和新组件编写等二次开发。

安装使用步骤

前提条件

假设你已经具备一定Angular基础，接触过Node.js环境，且已经安装了Node.js。若尚未安装Node.js，请移步Node.js下载页。

操作步骤

1. 下载依赖：在项目根目录下执行命令 npm install。
2. 启动临时服务器：执行命令 ng serve --open，启动后即可一边修改代码一边预览修改效果。
3. 二次开发：根据需求和业务进行二次开发，如组件修改或编写新组件等。需先熟悉项目的开发目录结构，并可使用一些Angular脚手架的命令行。
4. 打包：执行命令 ng build --prod，打包后的文件均在 dist 目录下，dist 目录下的 index.html 即为本项目生产环境下的入口文件。部署到真正的生产环境需要注意：
   • index.html 中的 base 标签请根据你的环境配置正确的 href 值。
   • index.html 中控制 viewport 的 meta 标签修改为 <meta name="viewport" content="width=1280px">。
   • 本项目是单页面应用，路由配置采取 history api，应用内页面跳转时 url 后会跟随虚拟路径，刷新页面时若仍然想正常显示，请参考此处配置你的 Web 服务器。

Angular CLI 常用命令行

• 生成某 service：ng generate service [yourServicePath]
• 生成某 component：ng generate component [yourComponentPath]

查看更多

开发目录结构

plaintext - app [所有的开发代码都在此处完成] - classes [定义类型，发挥 TypeScript 优势，在项目中使用，避免数据类型错误] - common [公共 class] - fixtures [模拟装数据] - service [连接后台数据服务的 service] - view [所有视图组件]

可能会用到的网站

• TypeScript 官网
• Angular 官网

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】