路由配置
首先在开发时应该把相关功能的页面组合到一个ngModule中,然后找到src/config/routing-path.config/routing-path.config.ts,其导出为routingPathConfig。其中只可以配置相应模块中对应的页面或者模块的路由名称。
export const routingPathConfig = {
// 模块字段
cutomModule: {
// 每个模块配置中都应该有一个默认的配置页面
default: "",
// 页面字段
customPage1: "pageName1",
customPage2: "pageName2"
}
}
然后在各个ngModule的路由配置文件中使用它,至于怎么使用,请看一下示例:
// 别忘了导入routingPathConfig
const routes: Routes = [
// 配置页面一的路由
{
path: routingPathConfig.customModule.customPage1,
loadChildren: 'path/to/customPage1Module#customPage1Module',
},
// 配置页面二的路由
{
path: routingPathConfig.customModule.customPage2,
loadChildren: 'path/to/customPage2Module#customPage2Module',
}
];
公共样式
一般,在angular应用中,最好组件里面的样式应该只能作用与该组件中,这样可以防止样式的全局污染,有利于维护。对于一些公共的样式可以写在src目录下style.css文件中。
对于一些比较大的项目,推荐使用一些css预处理器。在Notadd中我们使用的预处理器是scss。你可以在src/@notadd/scss文件夹中找到所有项目中预置的一些样式。
比如,如需更改应用的主题颜色,可以在src/@notadd/scss/theming.scss文件中进行更改。
目录结构
根目录
| 目录/文件 | 用途 |
|---|---|
| e2e | 存放测试代码的目录 |
| src | 项目的开发目录 |
| angular.json | 可以对angular应用进行配置 |
| package.json | 项目的依赖管理 |
| tsconfig.json | TypeScript的配置文件 |
| tslint.json | tslint的配置文件 |
| ngsw-config.json | service worker的配置文件 |
开发目录src
| 目录/文件 | 用途 |
|---|---|
| app | 存放应用代码的地方,所有的业务代码都应该存放到该目录下。 |
| @notadd | 存放一些全局共享的一些文件,比如全局的样式文件,全局用到的组件,还有服务等。 |
| assets | 主要存放一些静态资源,如字体文件或者图片等。 |
| environments | 在该文件夹中可以对开发环境和生产环境进行一些配置。 |
| favicon.ico | 网站的图标文件 |
| karma.conf.js | 测试的配文件 |
| manifest.json | PWA的配置文件,如果想让应用支持PWA,则必须要有该文件。 |
| polyfills.ts | 为了兼容旧浏览器所使用的polyfill库。 |
| styles.scss | 全局的样式文件 |
| index.html | 应用的文档入口文件 |
| main.ts | 应用的主要切入点,引导应用的根模块(AppModule)在浏览器中运行。 |
模块依赖
angular有一个重要的概念就是ngModule,它把组件、指令和管道打包成内聚的功能块,每个模块聚焦于一个特性区域、业务领域、工作流或通用工具。所以,在开发一个功能块的时候最好相关的代码都写到一个ngModule中。然后在需要使用的时候,通过NgModule 的元数据中的imports字段导入,即可使用相关的功能。