Notadd使用文档

917 阅读2分钟

路由配置

首先在开发时应该把相关功能的页面组合到一个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字段导入,即可使用相关的功能。