\u5f53\u4f60\u5728\u4f7f\u7528 ng g ng-alain:list \u6765\u751f\u6210\u9875\u9762\u65f6\uff0c\u4f1a\u53d1\u73b0\u5e76\u4e0d\u4f1a\u4ea7\u751f Less \u6587\u4ef6\uff0c\u4e3b\u8981\u662f NG-ALAIN \u6709\u81ea\u5df1\u7684\u4e00\u5957\u4e3b\u9898\u7cfb\u7edf\uff0cNG-ALAIN \u5e0c\u671b\u5229\u7528\u8fd9\u5957\u4e3b\u9898\u7cfb\u7edf\u6765\u6784\u5efa\u7ec4\u4ef6\uff0c\u8ba9 CSS \u53d8\u6210\u7f16\u7a0b\u5316\u3002\u7136\u800c\u5b83\u5e76\u4e0d\u80fd\u6ee1\u8db3\u6240\u6709\u9700\u6c42\uff0c\u672c\u6587\u4f1a\u9488\u5bf9\u8fd9\u65b9\u9762\u505a\u4e00\u4e2a\u5168\u9762\u63cf\u8ff0\u3002
\u5b83\u5305\u5bb9\u4e86 NG-ZORRO\u3001@delon/theme\u3001@delon/abc\u3001@delon/chart \u4e3b\u9898\u7cfb\u7edf\u6240\u6709\u7684 Less \u53d8\u91cf\u540d\uff0c\u53ea\u6709\u8fd9\u6837\u5bfc\u5165\u624d\u80fd\u4f7f\u6211\u4eec\u5728\u4e0b\u9762\u5f15\u7528 @text-color \u8fd9\u7c7b Less \u53d8\u91cf\uff0c\u5b83\u8868\u793a\u9ed8\u8ba4\u7684\u989c\u8272\u503c\u3002
\u5982\u679c\u4f60\u6b63\u5728\u4f7f\u7528\u5546\u4e1a\u4e3b\u9898\uff0c\u4f8b\u5982 PRO \u4f1a\u4f7f\u7528\u5176\u4ed6\u8def\u5f84\uff1a@import \'src/styles/theme.less\';\u3002
Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
Less variables
We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
Customize theme with schematics
Run ng add ng-alain, set up custom theme file, then modified the file src/styles/theme.less.
Official Themes
We have some official themes, try them out and give us some feedback!
\u{1f311} Dark Theme (supported in 9+)
\u{1f4e6} Compact Theme (supported in 9+)
Method 1
In the style file src/styles/theme.less, change default to dark or compact to override theme variables.
// - `default` Default Theme\n// - `dark` \u{1f311} Dark Theme (supported in 9+)\n// - `compact` \u{1f4e6} Compact Theme (supported in 9+)\n@import \'@delon/theme/theme-default.less\';\n\n// ==========The following is the custom theme variable area==========\n// @primary-color: #f50;
Method 2
If the project does not use Less, you can include dark.css or compact.css in the CSS file or add to the angular.json config.
When using @angular/cli to configure themes, you must build applications for each theme. When you want to switch themes without reloading the application (like this website), you can use the following method to compile the theme into a style file, and switch at runtime:
Note: Make sure theme variables exist in global styles, not in component scope styles, because component styles that have higher priority will prevent the theme override.
Note: If you use @delon/chart or third-party component, you may need to manually modify the component to support the corresponding theme.
Component development issues
The above theme switching method is based on the fact that all Less style content is independent of src/styles.less. Sometimes, it is also defined in the component, like:
Because the styles defined in the component run independently under Angular, it is impossible to switch to the dark theme as a whole according to the introduction of @import \'@delon/theme/theme-compact.less\';, if you want the same in the component To use the dark series, you must:
',meta:{order:5,title:"Customize Theme",type:"Documents"},toc:[{id:"Lessvariables",title:"Less variables",h:2,children:[{id:"Customizethemewithschematics",title:"Customize theme with schematics",h:3}]},{id:"OfficialThemes",title:"Official Themes",h:2,children:[{id:"Method1",title:"Method 1",h:3},{id:"Method2",title:"Method 2",h:3}]},{id:"SwitchTheming",title:"Switch Theming",h:2},{id:"Componentdevelopmentissues",title:"Component development issues",h:2},{id:"Relatedarticles",title:"Related articles",h:2}]},"zh-CN":{content:'
Ant Design \u8bbe\u8ba1\u89c4\u8303\u4e0a\u652f\u6301\u4e00\u5b9a\u7a0b\u5ea6\u7684\u6837\u5f0f\u5b9a\u5236\uff0c\u4ee5\u6ee1\u8db3\u4e1a\u52a1\u548c\u54c1\u724c\u4e0a\u591a\u6837\u5316\u7684\u89c6\u89c9\u9700\u6c42\uff0c\u5305\u62ec\u4f46\u4e0d\u9650\u4e8e\u4e3b\u8272\u3001\u5706\u89d2\u3001\u8fb9\u6846\u548c\u90e8\u5206\u7ec4\u4ef6\u7684\u89c6\u89c9\u5b9a\u5236\u3002
\u5b9a\u5236\u65b9\u5f0f
Ant Design \u7684\u6837\u5f0f\u4f7f\u7528\u4e86 Less \u4f5c\u4e3a\u5f00\u53d1\u8bed\u8a00\uff0c\u5e76\u5b9a\u4e49\u4e86\u4e00\u7cfb\u5217\u5168\u5c40/\u7ec4\u4ef6\u7684\u6837\u5f0f\u53d8\u91cf\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u76f8\u5e94\u8c03\u6574\uff0c\u9ed8\u8ba4\u6837\u5f0f\u53d8\u91cf\uff1aNG-ZORRO\u3001NG-ALAIN \u4e24\u90e8\u5206\u3002
\u52a8\u6001\u521b\u5efa link \u6807\u7b7e\uff0c\u5c06\u6837\u5f0f\u6587\u4ef6\u52a8\u6001\u52a0\u8f7d\u5728\u5e94\u7528\u4e2d\uff0c\u53cd\u4e4b\u79fb\u9664\u3002
\u4ee5\u4e0a\u4e3b\u9898\u5207\u6362\u65b9\u5f0f\u662f\u5728\u4e00\u4e2a\u5c06\u6240\u6709 Less \u6837\u5f0f\u5185\u5bb9\u72ec\u7acb\u4e8e src/styles.less \u4e0b\u9762\uff0c\u5f53\u6b63\u5e38\u60c5\u51b5\u4e0b\uff0c\u8fd8\u4f1a\u5728\u7ec4\u4ef6\u5185\u5b9a\u4e49\uff0c\u5c31\u50cf\uff1a
@delon/theme is the only must be imported to ng-alain scaffold. It contains a lot of style parameters and several generalities services, pipes.
Style
ng-alain defaults to using less as the style language, we recommend that you learn about the features of less before using it or sometimes when you have some questions. If you want to get a basic knowledge of CSS or look for properties usage, you can refer to the MDN doc.
Layout
Scaffolding include two layouts: default layout, blank layout, scaffolding does not contain these style files, it\'s in the @delon/theme library.
Scaffold Style
You can use the toolset provided by ng-alain to adjust spacing, color, size, borders, etc. It\'s a set of like bootstrap style tools.
Or customize your styles with theme.less, which will work in global applications, in the style development process, there are two prominent problems:
Global Pollution - CSS selectors are globally valid. Selectors with the same name in different files will be built together, and the former will be overrided by the latter.
Complex Selector - in order to avoid the above problem, we have to be careful when writing styles. The increase in flags for range restriction will lead to a growing class name, besides that, naming style confusion in multi person development and an increasing number of selectors on an element is hard to avoid.
We should use component styles property to create component styles. For how use Angular styles, please refer to About Angular Style Packaging.
Style file category
In a project, style files can be divided into different categories depending on their function.
theme.less
Global style file, where you can make some common settings.
Specific page-related style, such as monitor.component.less, the content is only related to the content of this page. Under normal circumstances, if it is not particularly complex page, with the previous global style and tools style, there should be little to write.
How to override parameters
We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
The changes parameters put into the theme.less LESS file, all parameters include:
ng-alain \u9ed8\u8ba4\u4f7f\u7528 less \u4f5c\u4e3a\u6837\u5f0f\u8bed\u8a00\uff0c\u5efa\u8bae\u5728\u4f7f\u7528\u524d\u6216\u8005\u9047\u5230\u7591\u95ee\u65f6\u5b66\u4e60\u4e00\u4e0b less \u7684\u76f8\u5173\u7279\u6027\uff0c\u5982\u679c\u60f3\u83b7\u53d6\u57fa\u7840\u7684 CSS \u77e5\u8bc6\u6216\u67e5\u9605\u5c5e\u6027\uff0c\u53ef\u4ee5\u53c2\u8003 MDN\u6587\u6863\u3002
ng-alain \u7684\u6837\u5f0f\u4f7f\u7528\u4e86 Less \u4f5c\u4e3a\u5f00\u53d1\u8bed\u8a00\uff0c\u5e76\u5b9a\u4e49\u4e86\u4e00\u7cfb\u5217\u5168\u5c40/\u7ec4\u4ef6\u7684\u6837\u5f0f\u53d8\u91cf\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u76f8\u5e94\u8c03\u6574\u3002
If you can\'t find your language, you are welcome to create a locale package based on en_US (You can also refer to #308 to contribute language package to us) and send us a pull req
',meta:{order:2,title:"Internationalization",type:"Documents"},toc:[{id:"Usage",title:"Usage",h:2,children:[{id:"Providers",title:"Providers",h:3},{id:"Service",title:"Service",h:3}]},{id:"Supportedlanguages",title:"Supported languages",h:2},{id:"Addanewlanguage",title:"Add a new language",h:2}]},"zh-CN":{content:'
ng-alain also includes a set of like bootstrap style tools, And built on the design principles developed by Ant Design. If you are familiar with Bootstrap, it will be very friendly, because all naming as close as it. Also, Install ng-alain snippets plugin in VSCode for intellisense these class names.
Usage
We have hundreds of Less variables (including ng-zorro-antd, ng-alain), some of which contain the -enabled suffix, which means that these libraries are optional.
You can to theme.less set to false, which can reduce css file size.
// I don\'t need masonry style\n@masonry-enabled: false
\u6211\u4eec\u5305\u542b\u7740\u4e0a\u767e\u79cd Less \u53d8\u91cf\uff08\u5305\u542bng-zorro-antd\u3001ng-alain\uff09\uff0c\u8fd9\u4e9b\u53d8\u66f4\u6709\u90e8\u5206\u662f\u5305\u542b\u7740-enabled \u540e\u7f00\uff0c\u5b83\u8868\u793a\u8fd9\u4e9b\u7c7b\u5e93\u662f\u53ef\u9009\u7684\u3002
ng-alain builds a set of style tools for size, spacing, color, and more based on Ant Design.
Install ng-alain snippets plugin in VSCode for intellisense these class names.
Spacing
ng-alain believes that these styles tool only using in the content area. Built on the design principles developed by Ant Design, A spacing width is based on 8px as a reference unit, and derived from three rule sizes.
Name
Formula
Size
Description
xs
$gutter / 2
4px
Smaller
sm
$gutter
8px
Small
md
$gutter * 2
16px
Medium
lg
$gutter * 3
24px
Large
xl
$gutter * 4
32px
Extra Large
xxl
$gutter * 6
48px
Oversized
According these rules, derived from margin\uff0cpadding, and naming rules as follows:
Type: padding, margin
Direction(Optional): top, right, bottom, left, x(equal to left, right), y(equal to top, bottom)
Ant Design\'s base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.
',meta:{type:"Theme",order:2,title:"Style Tools"},toc:[{id:"Spacing",title:"Spacing",h:2},{id:"Color",title:"Color",h:2,children:[{id:"Aliase",title:"Aliase",h:3}]},{id:"Clearfix",title:"Clearfix",h:2},{id:"Display",title:"Display",h:2},{id:"Position",title:"Position",h:2},{id:"Text",title:"Text",h:2,children:[{id:"Sizing",title:"Sizing",h:3},{id:"Alignment",title:"Alignment",h:3},{id:"Overflow",title:"Overflow",h:3},{id:"Transformation",title:"Transformation",h:3},{id:"Weightanditalics",title:"Weight and italics",h:3},{id:"Other",title:"Other",h:3}]},{id:"Borders",title:"Borders",h:2,children:[{id:"Border",title:"Border",h:3},{id:"Color",title:"Color",h:3},{id:"Rounded",title:"Rounded",h:3}]},{id:"Width",title:"Width",h:2},{id:"Responsive",title:"Responsive",h:2},{id:"Rotate",title:"Rotate",h:2},{id:"Other",title:"Other",h:2},{id:"Widgets",title:"Widgets",h:2,children:[{id:"Masonry",title:"Masonry",h:3}]},{id:"ng-zorro",title:"ng-zorro",h:2,children:[{id:"nz-card",title:"nz-card",h:3},{id:"nz-modal",title:"nz-modal",h:3},{id:"nz-table",title:"nz-table",h:3},{id:"nz-tag",title:"nz-tag",h:3}]}]},"zh-CN":{content:'
ng-alain \u5728 Ant Design \u7684\u57fa\u7840\u4e0a\u751f\u4ea7\u4e00\u5957\u5c3a\u5bf8\u3001\u95f4\u8ddd\u3001\u989c\u8272\u7b49\u5de5\u5177\u7c7b\u3002
Ant Design \u5e76\u6ca1\u6709\u6309\u94ae\u8272\u8fd9\u4e00\u8bf4\uff0c\u800c\u662f\u4ee5\u89c6\u89c9\u6548\u679c\u4e3a\u57fa\u51c6\u3002\u9ed8\u8ba4\u662f\u84dd\u8272\u7cfb\uff08\u62c2\u6653\u84dd\uff09\uff0c\u4f8b\u5982\uff1anz-button \u7684\u6309\u94ae\u7c7b\u578b primary\u3002
normal \u672c\u8eab\u5373\u662f\u57fa\u672c\u8272\uff0c\u6240\u4ee5\u53ef\u4ee5\u88ab\u5ffd\u7565\ngrey \u53ef\u80fd\u4f1a\u66f4\u5e38\u7528\uff0c\u6240\u4ee5\u989d\u5916\u589e\u52a0 grey-lighter\u3001grey-darker \u522b\u540d\u8868\u793a\u6df1\u5ea6
The layout can be dynamically managed at runtime through the LayoutDefaultService service. In addition, in layout operations, you can subscribe to layout changes through SettingsService.notify (for example: sidebar show and hide, etc.). Note that all layout-related changes will pass through this interface, so you need to do filter operation.
Parameters are adjustable as needed by the src/styles/theme.less file.
Top area
location\uff1asrc/app/layout/base/header
Scaffolding provides some regular top-level components by default, which are stored in the components directory. At the same time @delon/abc also provides several top components (eg\uff1anotice-icon Notification menu component. You can build it yourself or develop it yourself based on the components provided.
Scaffolding supports responsive layout. For the top area, you may need to hide some components under the small screen, so you can add hidden-xs to the corresponding DOM node to automatically hide when the screen is smaller than 768px.
Side area
location\uff1asrc/app/layout/default/sidebar
Only one user information and main menu are included. The main menu is a layout-default-nav component.
Internal area
The content area is the business page area, the specification details\uff1a
Content distance page standard, side, right scroll bar, bottom, this margin is based on a standard Dashboard Gutter width 24px.
Less Parameters
Name
Default
Description
@alain-default-prefix
.alain-default
Style name prefix
@alain-default-ease
cubic-bezier(.25, 0, .15, 1)
Animation filter function
@alain-default-header-hg
64px
Height of header
@alain-default-header-bg
@primary-color
Background-color of header
@alain-default-header-padding
@layout-gutter * 2
Horizontal padding of header
@alain-default-header-search-enabled
true
Whether top search
@alain-default-header-icon-fs
18px
Font size of icon
@alain-default-header-logo-max-height
36px
Max height of logo
@alain-default-aside-wd
200px
Width of aside
@alain-default-aside-bg
#fff
Background-color of aside
@alain-default-aside-scrollbar-width
0
Scrollbar width of aside
@alain-default-aside-scrollbar-height
0
Scrollbar height of aside
@alain-default-aside-scrollbar-track-color
transparent
Scrollbar track color of aside
@alain-default-aside-scrollbar-thumb-color
transparent
Scrollbar thumb color of aside
@alain-default-aside-nav-fs
14px
Font size of nav name
@alain-default-aside-nav-icon-width
14px
Width of nav icon
@alain-default-aside-nav-img-wh
14px
Width & height of nav image
@alain-default-aside-nav-padding-top-bottom
@layout-gutter
Vertical padding of nav
@alain-default-aside-nav-padding-left-right
@layout-gutter * 2
Horizontal padding of nav
@alain-default-aside-nav-text-color
rgba(0, 0, 0, 0.65)
Nav text color
@alain-default-aside-nav-text-hover-color
#108ee9
Nav text hover color
@alain-default-aside-nav-group-text-color
rgba(0, 0, 0, 0.43)
Group text color
@alain-default-aside-nav-selected-text-color
#108ee9
Nav selected text color
@alain-default-aside-nav-selected-bg
#fcfcfc
Nav selected background color
@alain-default-aside-collapsed-wd
@layout-gutter * 8
Width of aside collapsed
@alain-default-aside-collapsed-nav-fs
24px
Font size of aside collapsed
@alain-default-aside-collapsed-nav-img-wh
24px
Width & height nav image of aside collapsed
@alain-default-content-heading-bg
#fafbfc
Heading background color of content area
@alain-default-content-heading-border
#efe3e5
Heading bottom border color of content area
@alain-default-content-padding
@layout-gutter * 3
Padding of content area
@alain-default-content-bg
#f5f7fa
Background color of content area
@alain-default-widget-app-icons-enabled
true
Whether the app-icon widget styles
@alain-default-aside-user-enabled
true
Whether the user styles of aside
FAQ
Why are there two shortcut menus?
The shortcut menu generation rules are uniformly searched under the 0 index\uff0cand get in the following order:
Recommended children have shortcutRoot: true which is the highest priority
Otherwise, find the link with the word dashboard, if it exists, create a shortcut entry below the menu.
Otherwise placed at the 0 node position
Therefore, it\'s recommended to keep a valid shortcutRoot: true data under the 0 index of the menu data.
FAQ
Hide main menu item
You can set hide: true in the menu.
Hide auto-generated navigation hide breadcrumbs
You can set hideInBreadcrumb: true in the menu.
About level
Although unlimited levels are supported, please keep no more than four levels (including groups) for user experience.
How to update a menu item
The menu will be re-rendered via calling MenuService.setItem(key, newValue), please refer to the definition of Menu.
How to control menu expand
Use LayoutDefaultService.toggleCollapsed() for manual control at runtime.
',meta:{type:"Theme",order:100,title:"Default Layout"},toc:[{id:"Usage",title:"Usage",h:2,children:[{id:"1.Styleimport",title:"1. Style import",h:3},{id:"2.Usinglayout-defaultcomponent",title:"2. Using layout-default component",h:3}]},{id:"API",title:"API",h:2,children:[{id:"layout-default",title:"layout-default",h:3},{id:"LayoutDefaultOptions",title:"LayoutDefaultOptions",h:3},{id:"layout-default-nav",title:"layout-default-nav",h:3},{id:"layout-default-header-item",title:"layout-default-header-item",h:3},{id:"layout-default-header-item-trigger",title:"layout-default-header-item-trigger",h:3},{id:"layout-default-top-menu-item",title:"layout-default-top-menu-item",h:3}]},{id:"Layoutdescription",title:"Layout description",h:2},{id:"LessParameters",title:"Less Parameters",h:2},{id:"FAQ",title:"FAQ",h:2,children:[{id:"Whyaretheretwoshortcutmenus",title:"Why are there two shortcut menus?",h:3},{id:"FAQ",title:"FAQ",h:3}]}]},"zh-CN":{content:'
Used for any top and side areas, typically for highly customizable pages such as large screen data. The blank layout all parameters are prefixed with @alain-blank-.
When the dark.css file can't be found, you need to run it once: npm run theme
[deployUrl]
\u6587\u4ef6\u5c06\u90e8\u7f72\u5230\u7684 URL\uff0c\u4e00\u822c\u5230\u4f7f\u7528 ng b --deploy-url \u65f6\u9700\u8981
String
-
(themeChange)
\u4e3b\u9898\u53d8\u66f4\u901a\u77e5
EventEmitter<string>
-
",meta:{type:"Theme",title:"theme-btn",subtitle:"\u7ec4\u4ef6-\u5207\u6362\u6837\u5f0f",cols:1,order:1001,module:"import { ThemeBtnModule } from '@delon/theme/theme-btn';"},toc:[{id:"API",title:"API",h:2,children:[{id:"layout-default",title:"layout-default",h:3}]}]}},demo:!1},this.codes=[]}}return(t=a).\u0275fac=function(e){return new(e||t)},t.\u0275cmp=d.Xpm({type:t,selectors:[["app-theme-theme-btn"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(e,o){1&e&&d._UZ(0,"app-docs",0),2&e&&d.Q6J("codes",o.codes)("item",o.item)},dependencies:[r.P],styles:["[_nghost-%COMP%]{display:block}"]}),a})(),A=(()=>{var t;class a{constructor(){this.item={cols:1,urls:{"en-US":"packages/theme/src/router/index.en-US.md","zh-CN":"packages/theme/src/router/index.zh-CN.md"},content:{"en-US":{content:"
Optional pre-loading module loading, when it's necessary to load the resource at the first page load for some lazy routes. For example, by default, the order module must first access the /order route before it will actually start download resource files. When using PreloadOptionalModules and specifying preload: true, it will automatically download resource files after the Angular project is started.
Based on the NzDrawerService package, it solves some known issues:
More friendly handling callbacks
Support responsive
create
this.drawerHelper.create(\'Edit\', FormEditComponent, { i }).subscribe(res => this.load());\n// Ok callback\n// 1. considered successful\nthis.NzDrawerRef.close(data);\nthis.NzDrawerRef.close(true);\n\n// Close\nthis.NzDrawerRef.close();\nthis.NzDrawerRef.close(false);\n\n// Close all open drawers\nthis.DrawerHelper.closeAll();
There are includes create & static methods to open the normal & static drawer.
Custom component HTML template
Your body content\n<div class="drawer-footer">\n // The bottom toolbar need wrapped by `drawer-footer`\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div>
If you don\'t bottom toolbar, you need specify footer: false.
',api:'
API
Property
Description
Type
Default
size
Specify drawer size, responsive only supports non-numeric values
sm,md,lg,xl,number
md
footer
Whether toolbar
boolean
true
footerHeight
Toolbar height
number
55
exact
Exact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error.
\u7f51\u7edc\u8bf7\u6c42\u4e00\u822c\u60c5\u51b5\u4e0b\u662f\u540c Object \u5bf9\u8c61\u505a\u4e3a\u53c2\u6570\u4e00\u8d77\u4f7f\u7528\uff0c\u4f8b\u5982\u4e00\u4e2a get \u8bf7\u6c42\uff0c\u539f\u59cb\u5199\u6cd5\uff1a
The data format is an array of Menu, where text text property muse be required, And it\'s not affected by external components (such as sidebar-nav),
This is because menus it\'s essential part of the applications, And it can be used more effectively as a service, such as: dynamically generate navigation, title etc.
Suggest: Start up Angular (startup.service.ts) After get menu data from remote, call the add() method.
',api:'
API
MenuService
Method
Description
add
Setting menu data
clear
Clear menu data
resume
Reset menu, may need call when I18N, user acl changed
find
Find a menu item by url or key
getItem
Get menu item based on key
getPathByUrl
Get menu list based on url
setItem
Set menu item
open
Open of the menu
toggleOpen
Toggle menu open or close
openAll
Toggle all menu open or close
recursive
Recursive upward find, for example, the menu data source contains /ware, then /ware/1 is equivalent to /ware.
Menu
Property
Description
Type
Default
text
Text of menu item, can be choose one of text or i18n (Support HTML)
string
-
i18n
I18n key of menu item, can be choose one of text or i18n (Support HTML)
string
-
group
Whether to display the group name
boolean
true
link
Routing for the menu item, can be choose one of link or externalLink
string
-
externalLink
External link for the menu item, can be choose one of link or externalLink
string
-
target
Specifies externalLink where to display the linked URL
_blank,_self,_parent,_top
-
icon
Icon for the menu item, only valid for the first level menu
\u83dc\u5355\u670d\u52a1\u7684\u6570\u636e\u683c\u5f0f\u662f\u4e00\u4e2a Menu \u6570\u7ec4\uff0c\u5176\u4e2d text \u5c5e\u6027\u8868\u793a\u83dc\u5355\u6587\u672c\u4e3a\u5fc5\u586b\u9879\uff0c\u800c\u4e14\u672c\u8eab\u5e76\u4e0d\u53d7\u5916\u90e8\u7ec4\u4ef6\u7684\u5f71\u54cd\uff08\u4f8b\u5982sidebar-nav\u7ec4\u4ef6\uff09\uff0c\u8fd9\u662f\u56e0\u4e3a\u83dc\u5355\u662f\u8d2f\u7a7f\u6574\u4e2a\u9879\u76ee\u5fc5\u4e0d\u53ef\u5c11\u7684\u7ec4\u6210\u90e8\u5206\uff0c\u800c\u5c06\u5176\u72ec\u7acb\u6210\u4e00\u4e2a\u670d\u52a1\u53ef\u4ee5\u66f4\u6709\u6548\u88ab\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a\u52a8\u6001\u751f\u6210\u5bfc\u822a\u3001\u6807\u9898\u7b49\u3002
Based on the NzModalService package, it solves some known issues:
More friendly handling callbacks
Usage
this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());\n\n// Ok callback, Where `nzModalRef` refers to the variable name of the target component in the constructor `NzModalRef`\n// 1. considered successful\nthis.nzModalRef.close(true);\nthis.nzModalRef.close({ other: 1 });\n// 2. considered error\nthis.nzModalRef.close();\n\n// Close\nthis.nzModalRef.destroy();
There are includes create & createStatic methods to open the normal & static modal. Add a few parameters based on NzModalService.
Exact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error.
boolean
true
includeTabs
Whether to wrap the tab page
boolean
false
drag
Drag
boolean, ModalHelperDragOptions
-
useNzData
Whether it is mandatory to use nzData to pass parameters. If it is false, it means that the parameters will be directly mapped to the component instance, and other values \u200b\u200bcan only be obtained through NZ_MODAL_DATA.
More friendly use responsive rules, the original xs, sm etc. reduced to col property, the default response rule:
col
<576px
\u2265576px
\u2265768px
\u2265992px
\u22651200px
\u22651600px
1
1
1
1
1
1
1
2
1
2
2
2
2
2
3
1
2
3
3
3
3
4
1
2
3
4
4
4
5
1
2
3
4
6
6
6
1
2
3
4
6
12
In order to better develop responsives this view or edit pages, the rule will be used by default in sg, sv, se components. You can via ResponsiveConfig to override the default rules.
\u66f4\u53cb\u597d\u7684\u4f7f\u7528\u54cd\u5e94\u5f0f\u89c4\u5219\uff0c\u5c06\u539f xs\u3001sm \u7b49\u5c5e\u6027\u7b80\u5316\u6210 col \u680f\uff0c\u9ed8\u8ba4\u54cd\u5e94\u5f0f\u89c4\u5219\uff1a
Project config data, includes App, Layout, User, three data types And store persistence in localStorage (Please refer to #1737 to switch to sessionStorage).
Suggest: Call the setApp(), setUser() methods to restore project config data, via Angular startup service (startup.service.ts).
',meta:{order:4,title:"TitleService",subtitle:"\u9875\u9762\u6807\u9898\u670d\u52a1",type:"Service"},toc:[{id:"\u83b7\u53d6\u987a\u5e8f",title:"\u83b7\u53d6\u987a\u5e8f",h:2},{id:"API",title:"API",h:2}]}},demo:!1},this.codes=[]}}return(t=a).\u0275fac=function(e){return new(e||t)},t.\u0275cmp=d.Xpm({type:t,selectors:[["app-theme-title"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(e,o){1&e&&d._UZ(0,"app-docs",0),2&e&&d.Q6J("codes",o.codes)("item",o.item)},dependencies:[r.P],styles:["[_nghost-%COMP%]{display:block}"]}),a})()}]}];let V=(()=>{var t;class a{}return(t=a).\u0275fac=function(e){return new(e||t)},t.\u0275mod=d.oAB({type:t}),t.\u0275inj=d.cJS({imports:[Q.m,q.Bz.forChild(J)]}),a})()}}]);
\ No newline at end of file
diff --git a/160.8933dcb761850593.js b/160.8933dcb761850593.js
new file mode 100644
index 0000000000..bb53bcdcc1
--- /dev/null
+++ b/160.8933dcb761850593.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[160],{79160:(V,g,r)=>{r.r(g),r.d(g,{ThemeModule:()=>J});var Z=r(52787),q=r(89359),Q=r(93285),d=r(65879),c=r(28749);let b=(()=>{class t{constructor(){this.item={cols:1,urls:{"zh-CN":"packages/theme/docs/component-styles.md"},content:{"zh-CN":{content:'
\u5f53\u4f60\u5728\u4f7f\u7528 ng g ng-alain:list \u6765\u751f\u6210\u9875\u9762\u65f6\uff0c\u4f1a\u53d1\u73b0\u5e76\u4e0d\u4f1a\u4ea7\u751f Less \u6587\u4ef6\uff0c\u4e3b\u8981\u662f NG-ALAIN \u6709\u81ea\u5df1\u7684\u4e00\u5957\u4e3b\u9898\u7cfb\u7edf\uff0cNG-ALAIN \u5e0c\u671b\u5229\u7528\u8fd9\u5957\u4e3b\u9898\u7cfb\u7edf\u6765\u6784\u5efa\u7ec4\u4ef6\uff0c\u8ba9 CSS \u53d8\u6210\u7f16\u7a0b\u5316\u3002\u7136\u800c\u5b83\u5e76\u4e0d\u80fd\u6ee1\u8db3\u6240\u6709\u9700\u6c42\uff0c\u672c\u6587\u4f1a\u9488\u5bf9\u8fd9\u65b9\u9762\u505a\u4e00\u4e2a\u5168\u9762\u63cf\u8ff0\u3002
\u5b83\u5305\u5bb9\u4e86 NG-ZORRO\u3001@delon/theme\u3001@delon/abc\u3001@delon/chart \u4e3b\u9898\u7cfb\u7edf\u6240\u6709\u7684 Less \u53d8\u91cf\u540d\uff0c\u53ea\u6709\u8fd9\u6837\u5bfc\u5165\u624d\u80fd\u4f7f\u6211\u4eec\u5728\u4e0b\u9762\u5f15\u7528 @text-color \u8fd9\u7c7b Less \u53d8\u91cf\uff0c\u5b83\u8868\u793a\u9ed8\u8ba4\u7684\u989c\u8272\u503c\u3002
\u5982\u679c\u4f60\u6b63\u5728\u4f7f\u7528\u5546\u4e1a\u4e3b\u9898\uff0c\u4f8b\u5982 PRO \u4f1a\u4f7f\u7528\u5176\u4ed6\u8def\u5f84\uff1a@import \'src/styles/theme.less\';\u3002
Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
Less variables
We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
Customize theme with schematics
Run ng add ng-alain, set up custom theme file, then modified the file src/styles/theme.less.
Official Themes
We have some official themes, try them out and give us some feedback!
\u{1f311} Dark Theme (supported in 9+)
\u{1f4e6} Compact Theme (supported in 9+)
Method 1
In the style file src/styles/theme.less, change default to dark or compact to override theme variables.
// - `default` Default Theme\n// - `dark` \u{1f311} Dark Theme (supported in 9+)\n// - `compact` \u{1f4e6} Compact Theme (supported in 9+)\n@import \'@delon/theme/theme-default.less\';\n\n// ==========The following is the custom theme variable area==========\n// @primary-color: #f50;
Method 2
If the project does not use Less, you can include dark.css or compact.css in the CSS file or add to the angular.json config.
When using @angular/cli to configure themes, you must build applications for each theme. When you want to switch themes without reloading the application (like this website), you can use the following method to compile the theme into a style file, and switch at runtime:
Note: Make sure theme variables exist in global styles, not in component scope styles, because component styles that have higher priority will prevent the theme override.
Note: If you use @delon/chart or third-party component, you may need to manually modify the component to support the corresponding theme.
Component development issues
The above theme switching method is based on the fact that all Less style content is independent of src/styles.less. Sometimes, it is also defined in the component, like:
Because the styles defined in the component run independently under Angular, it is impossible to switch to the dark theme as a whole according to the introduction of @import \'@delon/theme/theme-compact.less\';, if you want the same in the component To use the dark series, you must:
',meta:{order:5,title:"Customize Theme",type:"Documents"},toc:[{id:"Lessvariables",title:"Less variables",h:2,children:[{id:"Customizethemewithschematics",title:"Customize theme with schematics",h:3}]},{id:"OfficialThemes",title:"Official Themes",h:2,children:[{id:"Method1",title:"Method 1",h:3},{id:"Method2",title:"Method 2",h:3}]},{id:"SwitchTheming",title:"Switch Theming",h:2},{id:"Componentdevelopmentissues",title:"Component development issues",h:2},{id:"Relatedarticles",title:"Related articles",h:2}]},"zh-CN":{content:'
Ant Design \u8bbe\u8ba1\u89c4\u8303\u4e0a\u652f\u6301\u4e00\u5b9a\u7a0b\u5ea6\u7684\u6837\u5f0f\u5b9a\u5236\uff0c\u4ee5\u6ee1\u8db3\u4e1a\u52a1\u548c\u54c1\u724c\u4e0a\u591a\u6837\u5316\u7684\u89c6\u89c9\u9700\u6c42\uff0c\u5305\u62ec\u4f46\u4e0d\u9650\u4e8e\u4e3b\u8272\u3001\u5706\u89d2\u3001\u8fb9\u6846\u548c\u90e8\u5206\u7ec4\u4ef6\u7684\u89c6\u89c9\u5b9a\u5236\u3002
\u5b9a\u5236\u65b9\u5f0f
Ant Design \u7684\u6837\u5f0f\u4f7f\u7528\u4e86 Less \u4f5c\u4e3a\u5f00\u53d1\u8bed\u8a00\uff0c\u5e76\u5b9a\u4e49\u4e86\u4e00\u7cfb\u5217\u5168\u5c40/\u7ec4\u4ef6\u7684\u6837\u5f0f\u53d8\u91cf\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u76f8\u5e94\u8c03\u6574\uff0c\u9ed8\u8ba4\u6837\u5f0f\u53d8\u91cf\uff1aNG-ZORRO\u3001NG-ALAIN \u4e24\u90e8\u5206\u3002
\u52a8\u6001\u521b\u5efa link \u6807\u7b7e\uff0c\u5c06\u6837\u5f0f\u6587\u4ef6\u52a8\u6001\u52a0\u8f7d\u5728\u5e94\u7528\u4e2d\uff0c\u53cd\u4e4b\u79fb\u9664\u3002
\u4ee5\u4e0a\u4e3b\u9898\u5207\u6362\u65b9\u5f0f\u662f\u5728\u4e00\u4e2a\u5c06\u6240\u6709 Less \u6837\u5f0f\u5185\u5bb9\u72ec\u7acb\u4e8e src/styles.less \u4e0b\u9762\uff0c\u5f53\u6b63\u5e38\u60c5\u51b5\u4e0b\uff0c\u8fd8\u4f1a\u5728\u7ec4\u4ef6\u5185\u5b9a\u4e49\uff0c\u5c31\u50cf\uff1a
@delon/theme is the only must be imported to ng-alain scaffold. It contains a lot of style parameters and several generalities services, pipes.
Style
ng-alain defaults to using less as the style language, we recommend that you learn about the features of less before using it or sometimes when you have some questions. If you want to get a basic knowledge of CSS or look for properties usage, you can refer to the MDN doc.
Layout
Scaffolding include two layouts: default layout, blank layout, scaffolding does not contain these style files, it\'s in the @delon/theme library.
Scaffold Style
You can use the toolset provided by ng-alain to adjust spacing, color, size, borders, etc. It\'s a set of like bootstrap style tools.
Or customize your styles with theme.less, which will work in global applications, in the style development process, there are two prominent problems:
Global Pollution - CSS selectors are globally valid. Selectors with the same name in different files will be built together, and the former will be overrided by the latter.
Complex Selector - in order to avoid the above problem, we have to be careful when writing styles. The increase in flags for range restriction will lead to a growing class name, besides that, naming style confusion in multi person development and an increasing number of selectors on an element is hard to avoid.
We should use component styles property to create component styles. For how use Angular styles, please refer to About Angular Style Packaging.
Style file category
In a project, style files can be divided into different categories depending on their function.
theme.less
Global style file, where you can make some common settings.
Specific page-related style, such as monitor.component.less, the content is only related to the content of this page. Under normal circumstances, if it is not particularly complex page, with the previous global style and tools style, there should be little to write.
How to override parameters
We are using Less as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
The changes parameters put into the theme.less LESS file, all parameters include:
ng-alain \u9ed8\u8ba4\u4f7f\u7528 less \u4f5c\u4e3a\u6837\u5f0f\u8bed\u8a00\uff0c\u5efa\u8bae\u5728\u4f7f\u7528\u524d\u6216\u8005\u9047\u5230\u7591\u95ee\u65f6\u5b66\u4e60\u4e00\u4e0b less \u7684\u76f8\u5173\u7279\u6027\uff0c\u5982\u679c\u60f3\u83b7\u53d6\u57fa\u7840\u7684 CSS \u77e5\u8bc6\u6216\u67e5\u9605\u5c5e\u6027\uff0c\u53ef\u4ee5\u53c2\u8003 MDN\u6587\u6863\u3002
ng-alain \u7684\u6837\u5f0f\u4f7f\u7528\u4e86 Less \u4f5c\u4e3a\u5f00\u53d1\u8bed\u8a00\uff0c\u5e76\u5b9a\u4e49\u4e86\u4e00\u7cfb\u5217\u5168\u5c40/\u7ec4\u4ef6\u7684\u6837\u5f0f\u53d8\u91cf\uff0c\u4f60\u53ef\u4ee5\u6839\u636e\u9700\u6c42\u8fdb\u884c\u76f8\u5e94\u8c03\u6574\u3002
If you can\'t find your language, you are welcome to create a locale package based on en_US (You can also refer to #308 to contribute language package to us) and send us a pull req
',meta:{order:2,title:"Internationalization",type:"Documents"},toc:[{id:"Usage",title:"Usage",h:2,children:[{id:"Providers",title:"Providers",h:3},{id:"Service",title:"Service",h:3}]},{id:"Supportedlanguages",title:"Supported languages",h:2},{id:"Addanewlanguage",title:"Add a new language",h:2}]},"zh-CN":{content:'
ng-alain also includes a set of like bootstrap style tools, And built on the design principles developed by Ant Design. If you are familiar with Bootstrap, it will be very friendly, because all naming as close as it. Also, Install ng-alain snippets plugin in VSCode for intellisense these class names.
Usage
We have hundreds of Less variables (including ng-zorro-antd, ng-alain), some of which contain the -enabled suffix, which means that these libraries are optional.
You can to theme.less set to false, which can reduce css file size.
// I don\'t need masonry style\n@masonry-enabled: false
\u6211\u4eec\u5305\u542b\u7740\u4e0a\u767e\u79cd Less \u53d8\u91cf\uff08\u5305\u542bng-zorro-antd\u3001ng-alain\uff09\uff0c\u8fd9\u4e9b\u53d8\u66f4\u6709\u90e8\u5206\u662f\u5305\u542b\u7740-enabled \u540e\u7f00\uff0c\u5b83\u8868\u793a\u8fd9\u4e9b\u7c7b\u5e93\u662f\u53ef\u9009\u7684\u3002
ng-alain builds a set of style tools for size, spacing, color, and more based on Ant Design.
Install ng-alain snippets plugin in VSCode for intellisense these class names.
Spacing
ng-alain believes that these styles tool only using in the content area. Built on the design principles developed by Ant Design, A spacing width is based on 8px as a reference unit, and derived from three rule sizes.
Name
Formula
Size
Description
xs
$gutter / 2
4px
Smaller
sm
$gutter
8px
Small
md
$gutter * 2
16px
Medium
lg
$gutter * 3
24px
Large
xl
$gutter * 4
32px
Extra Large
xxl
$gutter * 6
48px
Oversized
According these rules, derived from margin\uff0cpadding, and naming rules as follows:
Type: padding, margin
Direction(Optional): top, right, bottom, left, x(equal to left, right), y(equal to top, bottom)
Ant Design\'s base color palette totals 120 colors, including 12 primary colors and their derivative colors. These colors can basically include the need for color in background applications design.
',meta:{type:"Theme",order:2,title:"Style Tools"},toc:[{id:"Spacing",title:"Spacing",h:2},{id:"Color",title:"Color",h:2,children:[{id:"Aliase",title:"Aliase",h:3}]},{id:"Clearfix",title:"Clearfix",h:2},{id:"Display",title:"Display",h:2},{id:"Position",title:"Position",h:2},{id:"Text",title:"Text",h:2,children:[{id:"Sizing",title:"Sizing",h:3},{id:"Alignment",title:"Alignment",h:3},{id:"Overflow",title:"Overflow",h:3},{id:"Transformation",title:"Transformation",h:3},{id:"Weightanditalics",title:"Weight and italics",h:3},{id:"Other",title:"Other",h:3}]},{id:"Borders",title:"Borders",h:2,children:[{id:"Border",title:"Border",h:3},{id:"Color",title:"Color",h:3},{id:"Rounded",title:"Rounded",h:3}]},{id:"Width",title:"Width",h:2},{id:"Responsive",title:"Responsive",h:2},{id:"Rotate",title:"Rotate",h:2},{id:"Other",title:"Other",h:2},{id:"Widgets",title:"Widgets",h:2,children:[{id:"Masonry",title:"Masonry",h:3}]},{id:"ng-zorro",title:"ng-zorro",h:2,children:[{id:"nz-card",title:"nz-card",h:3},{id:"nz-modal",title:"nz-modal",h:3},{id:"nz-table",title:"nz-table",h:3},{id:"nz-tag",title:"nz-tag",h:3}]}]},"zh-CN":{content:'
ng-alain \u5728 Ant Design \u7684\u57fa\u7840\u4e0a\u751f\u4ea7\u4e00\u5957\u5c3a\u5bf8\u3001\u95f4\u8ddd\u3001\u989c\u8272\u7b49\u5de5\u5177\u7c7b\u3002
Ant Design \u5e76\u6ca1\u6709\u6309\u94ae\u8272\u8fd9\u4e00\u8bf4\uff0c\u800c\u662f\u4ee5\u89c6\u89c9\u6548\u679c\u4e3a\u57fa\u51c6\u3002\u9ed8\u8ba4\u662f\u84dd\u8272\u7cfb\uff08\u62c2\u6653\u84dd\uff09\uff0c\u4f8b\u5982\uff1anz-button \u7684\u6309\u94ae\u7c7b\u578b primary\u3002
normal \u672c\u8eab\u5373\u662f\u57fa\u672c\u8272\uff0c\u6240\u4ee5\u53ef\u4ee5\u88ab\u5ffd\u7565\ngrey \u53ef\u80fd\u4f1a\u66f4\u5e38\u7528\uff0c\u6240\u4ee5\u989d\u5916\u589e\u52a0 grey-lighter\u3001grey-darker \u522b\u540d\u8868\u793a\u6df1\u5ea6
The layout can be dynamically managed at runtime through the LayoutDefaultService service. In addition, in layout operations, you can subscribe to layout changes through SettingsService.notify (for example: sidebar show and hide, etc.). Note that all layout-related changes will pass through this interface, so you need to do filter operation.
Parameters are adjustable as needed by the src/styles/theme.less file.
Top area
location\uff1asrc/app/layout/base/header
Scaffolding provides some regular top-level components by default, which are stored in the components directory. At the same time @delon/abc also provides several top components (eg\uff1anotice-icon Notification menu component. You can build it yourself or develop it yourself based on the components provided.
Scaffolding supports responsive layout. For the top area, you may need to hide some components under the small screen, so you can add hidden-xs to the corresponding DOM node to automatically hide when the screen is smaller than 768px.
Side area
location\uff1asrc/app/layout/default/sidebar
Only one user information and main menu are included. The main menu is a layout-default-nav component.
Internal area
The content area is the business page area, the specification details\uff1a
Content distance page standard, side, right scroll bar, bottom, this margin is based on a standard Dashboard Gutter width 24px.
Less Parameters
Name
Default
Description
@alain-default-prefix
.alain-default
Style name prefix
@alain-default-ease
cubic-bezier(.25, 0, .15, 1)
Animation filter function
@alain-default-header-hg
64px
Height of header
@alain-default-header-bg
@primary-color
Background-color of header
@alain-default-header-padding
@layout-gutter * 2
Horizontal padding of header
@alain-default-header-search-enabled
true
Whether top search
@alain-default-header-icon-fs
18px
Font size of icon
@alain-default-header-logo-max-height
36px
Max height of logo
@alain-default-aside-wd
200px
Width of aside
@alain-default-aside-bg
#fff
Background-color of aside
@alain-default-aside-scrollbar-width
0
Scrollbar width of aside
@alain-default-aside-scrollbar-height
0
Scrollbar height of aside
@alain-default-aside-scrollbar-track-color
transparent
Scrollbar track color of aside
@alain-default-aside-scrollbar-thumb-color
transparent
Scrollbar thumb color of aside
@alain-default-aside-nav-fs
14px
Font size of nav name
@alain-default-aside-nav-icon-width
14px
Width of nav icon
@alain-default-aside-nav-img-wh
14px
Width & height of nav image
@alain-default-aside-nav-padding-top-bottom
@layout-gutter
Vertical padding of nav
@alain-default-aside-nav-padding-left-right
@layout-gutter * 2
Horizontal padding of nav
@alain-default-aside-nav-text-color
rgba(0, 0, 0, 0.65)
Nav text color
@alain-default-aside-nav-text-hover-color
#108ee9
Nav text hover color
@alain-default-aside-nav-group-text-color
rgba(0, 0, 0, 0.43)
Group text color
@alain-default-aside-nav-selected-text-color
#108ee9
Nav selected text color
@alain-default-aside-nav-selected-bg
#fcfcfc
Nav selected background color
@alain-default-aside-collapsed-wd
@layout-gutter * 8
Width of aside collapsed
@alain-default-aside-collapsed-nav-fs
24px
Font size of aside collapsed
@alain-default-aside-collapsed-nav-img-wh
24px
Width & height nav image of aside collapsed
@alain-default-content-heading-bg
#fafbfc
Heading background color of content area
@alain-default-content-heading-border
#efe3e5
Heading bottom border color of content area
@alain-default-content-padding
@layout-gutter * 3
Padding of content area
@alain-default-content-bg
#f5f7fa
Background color of content area
@alain-default-widget-app-icons-enabled
true
Whether the app-icon widget styles
@alain-default-aside-user-enabled
true
Whether the user styles of aside
FAQ
Why are there two shortcut menus?
The shortcut menu generation rules are uniformly searched under the 0 index\uff0cand get in the following order:
Recommended children have shortcutRoot: true which is the highest priority
Otherwise, find the link with the word dashboard, if it exists, create a shortcut entry below the menu.
Otherwise placed at the 0 node position
Therefore, it\'s recommended to keep a valid shortcutRoot: true data under the 0 index of the menu data.
FAQ
Hide main menu item
You can set hide: true in the menu.
Hide auto-generated navigation hide breadcrumbs
You can set hideInBreadcrumb: true in the menu.
About level
Although unlimited levels are supported, please keep no more than four levels (including groups) for user experience.
How to update a menu item
The menu will be re-rendered via calling MenuService.setItem(key, newValue), please refer to the definition of Menu.
How to control menu expand
Use LayoutDefaultService.toggleCollapsed() for manual control at runtime.
',meta:{type:"Theme",order:100,title:"Default Layout"},toc:[{id:"Usage",title:"Usage",h:2,children:[{id:"1.Styleimport",title:"1. Style import",h:3},{id:"2.Usinglayout-defaultcomponent",title:"2. Using layout-default component",h:3}]},{id:"API",title:"API",h:2,children:[{id:"layout-default",title:"layout-default",h:3},{id:"LayoutDefaultOptions",title:"LayoutDefaultOptions",h:3},{id:"layout-default-nav",title:"layout-default-nav",h:3},{id:"layout-default-header-item",title:"layout-default-header-item",h:3},{id:"layout-default-header-item-trigger",title:"layout-default-header-item-trigger",h:3},{id:"layout-default-top-menu-item",title:"layout-default-top-menu-item",h:3}]},{id:"Layoutdescription",title:"Layout description",h:2},{id:"LessParameters",title:"Less Parameters",h:2},{id:"FAQ",title:"FAQ",h:2,children:[{id:"Whyaretheretwoshortcutmenus",title:"Why are there two shortcut menus?",h:3},{id:"FAQ",title:"FAQ",h:3}]}]},"zh-CN":{content:'
Used for any top and side areas, typically for highly customizable pages such as large screen data. The blank layout all parameters are prefixed with @alain-blank-.
When the dark.css file can't be found, you need to run it once: npm run theme
[deployUrl]
\u6587\u4ef6\u5c06\u90e8\u7f72\u5230\u7684 URL\uff0c\u4e00\u822c\u5230\u4f7f\u7528 ng b --deploy-url \u65f6\u9700\u8981
String
-
(themeChange)
\u4e3b\u9898\u53d8\u66f4\u901a\u77e5
EventEmitter<string>
-
",meta:{type:"Theme",title:"theme-btn",subtitle:"\u7ec4\u4ef6-\u5207\u6362\u6837\u5f0f",cols:1,order:1001,module:"import { ThemeBtnModule } from '@delon/theme/theme-btn';"},toc:[{id:"API",title:"API",h:2,children:[{id:"layout-default",title:"layout-default",h:3}]}]}},demo:!1},this.codes=[]}static#t=this.\u0275fac=function(e){return new(e||t)};static#e=this.\u0275cmp=d.Xpm({type:t,selectors:[["app-theme-theme-btn"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(e,o){1&e&&d._UZ(0,"app-docs",0),2&e&&d.Q6J("codes",o.codes)("item",o.item)},dependencies:[c.P],styles:["[_nghost-%COMP%]{display:block}"]})}return t})(),A=(()=>{class t{constructor(){this.item={cols:1,urls:{"en-US":"packages/theme/src/router/index.en-US.md","zh-CN":"packages/theme/src/router/index.zh-CN.md"},content:{"en-US":{content:"
Optional pre-loading module loading, when it's necessary to load the resource at the first page load for some lazy routes. For example, by default, the order module must first access the /order route before it will actually start download resource files. When using PreloadOptionalModules and specifying preload: true, it will automatically download resource files after the Angular project is started.
Based on the NzDrawerService package, it solves some known issues:
More friendly handling callbacks
Support responsive
create
this.drawerHelper.create(\'Edit\', FormEditComponent, { i }).subscribe(res => this.load());\n// Ok callback\n// 1. considered successful\nthis.NzDrawerRef.close(data);\nthis.NzDrawerRef.close(true);\n\n// Close\nthis.NzDrawerRef.close();\nthis.NzDrawerRef.close(false);\n\n// Close all open drawers\nthis.DrawerHelper.closeAll();
There are includes create & static methods to open the normal & static drawer.
Custom component HTML template
Your body content\n<div class="drawer-footer">\n // The bottom toolbar need wrapped by `drawer-footer`\n <button nz-button [nzType]="\'default\'" (click)="cancel()">\n Cancel\n </button>\n <button nz-button [nzType]="\'primary\'" (click)="ok()">\n OK\n </button>\n</div>
If you don\'t bottom toolbar, you need specify footer: false.
',api:'
API
Property
Description
Type
Default
size
Specify drawer size, responsive only supports non-numeric values
sm,md,lg,xl,number
md
footer
Whether toolbar
boolean
true
footerHeight
Toolbar height
number
55
exact
Exact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error.
\u7f51\u7edc\u8bf7\u6c42\u4e00\u822c\u60c5\u51b5\u4e0b\u662f\u540c Object \u5bf9\u8c61\u505a\u4e3a\u53c2\u6570\u4e00\u8d77\u4f7f\u7528\uff0c\u4f8b\u5982\u4e00\u4e2a get \u8bf7\u6c42\uff0c\u539f\u59cb\u5199\u6cd5\uff1a
The data format is an array of Menu, where text text property muse be required, And it\'s not affected by external components (such as sidebar-nav),
This is because menus it\'s essential part of the applications, And it can be used more effectively as a service, such as: dynamically generate navigation, title etc.
Suggest: Start up Angular (startup.service.ts) After get menu data from remote, call the add() method.
',api:'
API
MenuService
Method
Description
add
Setting menu data
clear
Clear menu data
resume
Reset menu, may need call when I18N, user acl changed
find
Find a menu item by url or key
getItem
Get menu item based on key
getPathByUrl
Get menu list based on url
setItem
Set menu item
open
Open of the menu
toggleOpen
Toggle menu open or close
openAll
Toggle all menu open or close
recursive
Recursive upward find, for example, the menu data source contains /ware, then /ware/1 is equivalent to /ware.
Menu
Property
Description
Type
Default
text
Text of menu item, can be choose one of text or i18n (Support HTML)
string
-
i18n
I18n key of menu item, can be choose one of text or i18n (Support HTML)
string
-
group
Whether to display the group name
boolean
true
link
Routing for the menu item, can be choose one of link or externalLink
string
-
externalLink
External link for the menu item, can be choose one of link or externalLink
string
-
target
Specifies externalLink where to display the linked URL
_blank,_self,_parent,_top
-
icon
Icon for the menu item, only valid for the first level menu
\u83dc\u5355\u670d\u52a1\u7684\u6570\u636e\u683c\u5f0f\u662f\u4e00\u4e2a Menu \u6570\u7ec4\uff0c\u5176\u4e2d text \u5c5e\u6027\u8868\u793a\u83dc\u5355\u6587\u672c\u4e3a\u5fc5\u586b\u9879\uff0c\u800c\u4e14\u672c\u8eab\u5e76\u4e0d\u53d7\u5916\u90e8\u7ec4\u4ef6\u7684\u5f71\u54cd\uff08\u4f8b\u5982sidebar-nav\u7ec4\u4ef6\uff09\uff0c\u8fd9\u662f\u56e0\u4e3a\u83dc\u5355\u662f\u8d2f\u7a7f\u6574\u4e2a\u9879\u76ee\u5fc5\u4e0d\u53ef\u5c11\u7684\u7ec4\u6210\u90e8\u5206\uff0c\u800c\u5c06\u5176\u72ec\u7acb\u6210\u4e00\u4e2a\u670d\u52a1\u53ef\u4ee5\u66f4\u6709\u6548\u88ab\u4f7f\u7528\uff0c\u4f8b\u5982\uff1a\u52a8\u6001\u751f\u6210\u5bfc\u822a\u3001\u6807\u9898\u7b49\u3002
Based on the NzModalService package, it solves some known issues:
More friendly handling callbacks
Usage
this.modalHelper.create(FormEditComponent, { i }).subscribe(res => this.load());\n\n// Ok callback, Where `nzModalRef` refers to the variable name of the target component in the constructor `NzModalRef`\n// 1. considered successful\nthis.nzModalRef.close(true);\nthis.nzModalRef.close({ other: 1 });\n// 2. considered error\nthis.nzModalRef.close();\n\n// Close\nthis.nzModalRef.destroy();
There are includes create & createStatic methods to open the normal & static modal. Add a few parameters based on NzModalService.
Exact match return value, default is true, If the return value is not null (null or undefined) is considered successful, otherwise it is considered error.
boolean
true
includeTabs
Whether to wrap the tab page
boolean
false
drag
Drag
boolean, ModalHelperDragOptions
-
useNzData
Whether it is mandatory to use nzData to pass parameters. If it is false, it means that the parameters will be directly mapped to the component instance, and other values \u200b\u200bcan only be obtained through NZ_MODAL_DATA.
More friendly use responsive rules, the original xs, sm etc. reduced to col property, the default response rule:
col
<576px
\u2265576px
\u2265768px
\u2265992px
\u22651200px
\u22651600px
1
1
1
1
1
1
1
2
1
2
2
2
2
2
3
1
2
3
3
3
3
4
1
2
3
4
4
4
5
1
2
3
4
6
6
6
1
2
3
4
6
12
In order to better develop responsives this view or edit pages, the rule will be used by default in sg, sv, se components. You can via ResponsiveConfig to override the default rules.
\u66f4\u53cb\u597d\u7684\u4f7f\u7528\u54cd\u5e94\u5f0f\u89c4\u5219\uff0c\u5c06\u539f xs\u3001sm \u7b49\u5c5e\u6027\u7b80\u5316\u6210 col \u680f\uff0c\u9ed8\u8ba4\u54cd\u5e94\u5f0f\u89c4\u5219\uff1a
Project config data, includes App, Layout, User, three data types And store persistence in localStorage (Please refer to #1737 to switch to sessionStorage).
Suggest: Call the setApp(), setUser() methods to restore project config data, via Angular startup service (startup.service.ts).
',meta:{order:4,title:"TitleService",subtitle:"\u9875\u9762\u6807\u9898\u670d\u52a1",type:"Service"},toc:[{id:"\u83b7\u53d6\u987a\u5e8f",title:"\u83b7\u53d6\u987a\u5e8f",h:2},{id:"API",title:"API",h:2}]}},demo:!1},this.codes=[]}static#t=this.\u0275fac=function(e){return new(e||t)};static#e=this.\u0275cmp=d.Xpm({type:t,selectors:[["app-theme-title"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(e,o){1&e&&d._UZ(0,"app-docs",0),2&e&&d.Q6J("codes",o.codes)("item",o.item)},dependencies:[c.P],styles:["[_nghost-%COMP%]{display:block}"]})}return t})()}]}];let J=(()=>{class t{static#t=this.\u0275fac=function(e){return new(e||t)};static#e=this.\u0275mod=d.oAB({type:t});static#d=this.\u0275inj=d.cJS({imports:[q.m,Z.Bz.forChild(Y)]})}return t})()}}]);
\ No newline at end of file
diff --git a/274.47324d5c64562525.js b/274.47324d5c64562525.js
deleted file mode 100644
index 4a2e09646d..0000000000
--- a/274.47324d5c64562525.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[274],{47274:(Ht,G,c)=>{c.r(G),c.d(G,{ChartModule:()=>Xt});var zt=c(52787),At=c(89359),_t=c(93285),e=c(65879),s=c(28749);let x=(()=>{var a;class o{constructor(){this.item={cols:1,urls:{"en-US":"packages/chart/docs/faq.en-US.md","zh-CN":"packages/chart/docs/faq.zh-CN.md"},content:{"en-US":{content:'
How to auto-resize of the container?
The G2 uses window.addEventListener(\'resize\', this.onResize) to detect a change in parent dom element\'s size. So you need to manually monitor the change in the size of the container and call chart.forceFit() to force resize.
\x3c!--demo(resi',meta:{order:100,title:"FAQ",type:"Documents"},toc:[{id:"Howtoauto-resizeofthecontainer",title:"How to auto-resize of the container?",h:2}]},"zh-CN":{content:'
Chart provides the well-designed abstract chart components based on the G2. These components provide the ability to use with complex mixed view or just use along for common business usage.
Usage
G2 class library loading
By default, the class library CDN address has been specified in Global Configuration:
// global-config.module.ts\nconst alainConfig: AlainConfig = {\n chart: { \n // The following is the default configuration. If the project cannot be accessed from the Internet, you can directly use the `./assets***` path for the dependent package according to the `angular.json` configuration\n libs: [\n \'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js\',\n \'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js\',\n ],\n },\n};\n\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: ALAIN_CONFIG, useValue: alainConfig }\n ]\n };\n }\n}
Of course, you can also directly import the CDN address in index.html, for example:
<!-- Introduce online resources, select the g2 version you need and replace the version variable -->\n<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>
You can also configure the assets (About assets Document) option in angular.json to obtain the G2 library from node_modules, for example:
',meta:{title:"g2-chart",subtitle:"Custom Chart",cols:1,type:"G2",module:"import { G2CustomModule } from '@delon/chart/custom';"},toc:[{id:"Howtouse",title:"How to use",h:2,children:[{id:"HowtodevelopG2",title:"How to develop G2",h:3}]},{id:"Links",title:"Links",h:2},{id:"API",title:"API",h:2,children:[{id:"g2-custom",title:"g2-custom",h:3}]}]},"zh-CN":{content:'
\u901a\u8fc7\u7b80\u5316 pie \u5c5e\u6027\u7684\u8bbe\u7f6e\uff0c\u53ef\u4ee5\u5feb\u901f\u7684\u5b9e\u73b0\u6781\u7b80\u7684\u997c\u72b6\u56fe\uff0c\u53ef\u914d\u5408 chart-card \u7ec4\u5408\u5c55\u73b0\u66f4\u591a\u4e1a\u52a1\u573a\u666f\u3002
",code:'import { Component } from \'@angular/core\';\n\n@Component({\n selector: \'chart-pie-mini\',\n template: `\n
',meta:{title:"g2-water-wave",subtitle:"\u6c34\u6ce2\u56fe",cols:1,type:"G2",module:"import { G2WaterWaveModule } from '@delon/chart/water-wave';"},toc:[{id:"API",title:"API",h:2,children:[{id:"g2-water-wave",title:"g2-water-wave",h:3}]}]}},demo:!0},this.codes=[{id:"chart-water-wave-basic",meta:{order:0,title:{"zh-CN":"\u57fa\u7840","en-US":"Basic"}},summary:"
\u57fa\u7840\u7528\u6cd5\u3002
",code:"import { Component } from '@angular/core';\n\n@Component({\n selector: 'chart-water-wave-basic',\n template: `\n \n `,\n host: {\n '[class.d-block]': 'true'\n }\n})\nexport class ChartWaterWaveBasicComponent {}",name:"basic",urls:"packages/chart/water-wave/demo/basic.md",type:"demo",lang:"ts",componentName:"ChartWaterWaveBasicComponent",point:0}]}}return(a=o).\u0275fac=function(t){return new(t||a)},a.\u0275cmp=e.Xpm({type:a,selectors:[["app-chart-water-wave"]],decls:5,vars:5,consts:[[3,"codes","item"],["nz-row","",3,"nzGutter"],["nz-col","","nzSpan","24"],[3,"item"]],template:function(t,n){1&t&&(e.TgZ(0,"app-docs",0)(1,"div",1)(2,"div",2)(3,"code-box",3),e._UZ(4,"chart-water-wave-basic"),e.qZA()()()()),2&t&&(e.Q6J("codes",n.codes)("item",n.item),e.xp6(1),e.Q6J("nzGutter",16),e.xp6(2),e.Q6J("item",n.codes[0]),e.uIk("id",n.codes[0].id))},dependencies:[l.t3,l.SK,s.P,m.e,Tt],styles:["[_nghost-%COMP%]{display:block}"]}),o})()}]}];let Xt=(()=>{var a;class o{}return(a=o).\u0275fac=function(t){return new(t||a)},a.\u0275mod=e.oAB({type:a}),a.\u0275inj=e.cJS({imports:[At.m,zt.Bz.forChild(Wt)]}),o})()}}]);
\ No newline at end of file
diff --git a/274.5054fb0545474495.js b/274.5054fb0545474495.js
new file mode 100644
index 0000000000..f0c715262e
--- /dev/null
+++ b/274.5054fb0545474495.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[274],{47274:(Wt,G,i)=>{i.r(G),i.d(G,{ChartModule:()=>Xt});var Dt=i(52787),zt=i(89359),At=i(93285),t=i(65879),s=i(28749);let x=(()=>{class n{constructor(){this.item={cols:1,urls:{"en-US":"packages/chart/docs/faq.en-US.md","zh-CN":"packages/chart/docs/faq.zh-CN.md"},content:{"en-US":{content:'
How to auto-resize of the container?
The G2 uses window.addEventListener(\'resize\', this.onResize) to detect a change in parent dom element\'s size. So you need to manually monitor the change in the size of the container and call chart.forceFit() to force resize.
\x3c!--demo(resi',meta:{order:100,title:"FAQ",type:"Documents"},toc:[{id:"Howtoauto-resizeofthecontainer",title:"How to auto-resize of the container?",h:2}]},"zh-CN":{content:'
Chart provides the well-designed abstract chart components based on the G2. These components provide the ability to use with complex mixed view or just use along for common business usage.
Usage
G2 class library loading
By default, the class library CDN address has been specified in Global Configuration:
// global-config.module.ts\nconst alainConfig: AlainConfig = {\n chart: { \n // The following is the default configuration. If the project cannot be accessed from the Internet, you can directly use the `./assets***` path for the dependent package according to the `angular.json` configuration\n libs: [\n \'https://gw.alipayobjects.com/os/lib/antv/g2/4.1.4/dist/g2.min.js\',\n \'https://gw.alipayobjects.com/os/lib/antv/data-set/0.11.7/dist/data-set.js\',\n ],\n },\n};\n\nexport class DelonModule {\n static forRoot(): ModuleWithProviders {\n return {\n ngModule: DelonModule,\n providers: [\n { provide: ALAIN_CONFIG, useValue: alainConfig }\n ]\n };\n }\n}
Of course, you can also directly import the CDN address in index.html, for example:
<!-- Introduce online resources, select the g2 version you need and replace the version variable -->\n<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>
You can also configure the assets (About assets Document) option in angular.json to obtain the G2 library from node_modules, for example:
',meta:{title:"g2-chart",subtitle:"Custom Chart",cols:1,type:"G2",module:"import { G2CustomModule } from '@delon/chart/custom';"},toc:[{id:"Howtouse",title:"How to use",h:2,children:[{id:"HowtodevelopG2",title:"How to develop G2",h:3}]},{id:"Links",title:"Links",h:2},{id:"API",title:"API",h:2,children:[{id:"g2-custom",title:"g2-custom",h:3}]}]},"zh-CN":{content:'
\u901a\u8fc7\u7b80\u5316 pie \u5c5e\u6027\u7684\u8bbe\u7f6e\uff0c\u53ef\u4ee5\u5feb\u901f\u7684\u5b9e\u73b0\u6781\u7b80\u7684\u997c\u72b6\u56fe\uff0c\u53ef\u914d\u5408 chart-card \u7ec4\u5408\u5c55\u73b0\u66f4\u591a\u4e1a\u52a1\u573a\u666f\u3002
",code:'import { Component } from \'@angular/core\';\n\n@Component({\n selector: \'chart-pie-mini\',\n template: `\n
',meta:{title:"g2-water-wave",subtitle:"\u6c34\u6ce2\u56fe",cols:1,type:"G2",module:"import { G2WaterWaveModule } from '@delon/chart/water-wave';"},toc:[{id:"API",title:"API",h:2,children:[{id:"g2-water-wave",title:"g2-water-wave",h:3}]}]}},demo:!0},this.codes=[{id:"chart-water-wave-basic",meta:{order:0,title:{"zh-CN":"\u57fa\u7840","en-US":"Basic"}},summary:"
\u57fa\u7840\u7528\u6cd5\u3002
",code:"import { Component } from '@angular/core';\n\n@Component({\n selector: 'chart-water-wave-basic',\n template: `\n \n `,\n host: {\n '[class.d-block]': 'true'\n }\n})\nexport class ChartWaterWaveBasicComponent {}",name:"basic",urls:"packages/chart/water-wave/demo/basic.md",type:"demo",lang:"ts",componentName:"ChartWaterWaveBasicComponent",point:0}]}static#t=this.\u0275fac=function(a){return new(a||n)};static#e=this.\u0275cmp=t.Xpm({type:n,selectors:[["app-chart-water-wave"]],decls:5,vars:5,consts:[[3,"codes","item"],["nz-row","",3,"nzGutter"],["nz-col","","nzSpan","24"],[3,"item"]],template:function(a,o){1&a&&(t.TgZ(0,"app-docs",0)(1,"div",1)(2,"div",2)(3,"code-box",3),t._UZ(4,"chart-water-wave-basic"),t.qZA()()()()),2&a&&(t.Q6J("codes",o.codes)("item",o.item),t.xp6(1),t.Q6J("nzGutter",16),t.xp6(2),t.Q6J("item",o.codes[0]),t.uIk("id",o.codes[0].id))},dependencies:[c.t3,c.SK,s.P,l.e,Mt],styles:["[_nghost-%COMP%]{display:block}"]})}return n})()}]}];let Xt=(()=>{class n{static#t=this.\u0275fac=function(a){return new(a||n)};static#e=this.\u0275mod=t.oAB({type:n});static#a=this.\u0275inj=t.cJS({imports:[zt.m,Dt.Bz.forChild(Lt)]})}return n})()}}]);
\ No newline at end of file
diff --git a/311.640905cecd79cc2d.js b/311.640905cecd79cc2d.js
new file mode 100644
index 0000000000..00ba8305a2
--- /dev/null
+++ b/311.640905cecd79cc2d.js
@@ -0,0 +1 @@
+"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[311],{30311:(E,l,s)=>{s.r(l),s.d(l,{DocsModule:()=>F});var R=s(52787),G=s(89359),O=s(93285),a=s(65879),i=s(28749);const D=[{path:"",component:O.S,children:[{path:"",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"acl",redirectTo:"acl/zh",pathMatch:"full"},{path:"acl/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"zh-CN":"docs/acl.md"},content:{"zh-CN":{content:'',meta:{order:50,title:"ACL",type:"Advance",url:"/acl/getting-started"},toc:[]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-acl"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()},{path:"architecture",redirectTo:"architecture/zh",pathMatch:"full"},{path:"architecture/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"en-US":"docs/architecture.en-US.md","zh-CN":"docs/architecture.zh-CN.md"},content:{"en-US":{content:'
NG-ALAIN scaffold is a front-end solution to support middleware and back-end application. It is based on Angular and ng-zorro-antd(Angular implementation of Ant Design). The scaffold includes a set of common functionalities and business component libraries. It reduces lots of infrastructure development overwhelmingly and let you focus on business logic development.
Architecture Diagram
@delon/theme
Theme library of scaffold, we publish the theme library to NPM, which extremely simplifies upgrade effort.
Theme library includes not only essential styles(CSS tool like bootstrap) required by NG-ALAIN, but also a set of common data rendering(Pipe) and service tools(page title, scroll bar, etc..), which are needed during daily development.
@delon/abc
Scaffold provides a default set of business components, which abstract commonly used block/area in console service. We will continue to maintain and iterate the components. Provide more advanced abstract components than Ant Design base components to middleware and back-end business.
@delon/chart
@delon/chart chart library is customised based on G2. Providing commonly used chart suite in business development. It can be used alone or composed together to achieve more complex and fancy display effect.
The following is a description and use of each directory and file.
_mock
The Mock data rules directory, if you create a project via Command Line Tools, you can specify the --mock parameter to determine if the Mock function is required.
src/app/core/core.module.ts
The core module will only be imported once. Therefore, core service classes (eg, messages, data access, etc.) that are required for the entire ** business module should exist here.
src/app/core/i18n
Internationalization data loading and processing related classes. If you create a project via Command Line Tool, you can specify the -di parameter to determine whether internationalization support is required.
src/app/core/net
The default interceptor, where you can handle request parameters, request exceptions, business exceptions, and so on.
src/app/core/services/startup.service.ts
Useful when you need to execute some remote data (eg application information, user information, etc.) before Angular launches.
It is a simple method and returns a Promise object, unless Angular will abort the launch unless resolve(null) is explicitly executed.
src/app/layout
Layout file code, refer to the page structure section.
src/app/routes
Business module, all your business code will be here.
src/app/shared/shared.module.ts
The shared module means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here. In addition, for @delon & NG-ZORRO, two shared secondary module imports, shared-delon.module.ts andshared-zorro.module.ts.
src/app/global-config.module.ts
Global configuration for @delon & NG-ZORRO.
src/environments
The application environment variable contains the following values:
\u811a\u624b\u67b6\u5185\u63d0\u4f9b\u4e86\u4e00\u5957\u9ed8\u8ba4\u4e1a\u52a1\u7ec4\u4ef6\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u62bd\u8c61\u4e86\u63a7\u5236\u53f0\u4e1a\u52a1\u4e2d\u7684\u4e00\u4e9b\u5e38\u89c1\u533a\u5757\u3002\u6211\u4eec\u5c06\u6301\u7eed\u7ef4\u62a4\u548c\u8fed\u4ee3\u8fd9\u4e9b\u7ec4\u4ef6\uff0c\u4e3a\u4e2d\u540e\u53f0\u4e1a\u52a1\u63d0\u4f9b\u6bd4 Ant Design \u57fa\u7840\u7ec4\u4ef6\u66f4\u9ad8\u7ea7\u522b\u7684\u62bd\u8c61
abc:pdf: fix ignore dependency pdfjs-dist (If you use local path to load the libary, you need to install the dependency yourself. pdfjs-dist depends on canvas, which may be slow to install dependencies due to environmental factors) (#1641) (#1641) (b987bab)
form:select: fix ignore reset option data when set onSearch (#1644) (1f8def7)
theme:http: fix missing content of HttpOptions (#1640) (28eeceb)
We have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Open Development
All work on ng-alain\u3001delon happens directly. Both core team members and external contributors send pull requests which go through the same review process.
Bugs
We are using GitHub Issues for bug tracing. The best way to get your bug fixed via GitHub Issues and provide a reprduction with this template.
Before you reporting a bug, please make sure you\'ve searched exists issues, and read our FAQ.
Proposing a Change
If you intend to change the public API or introduce new feature that via GitHub Issues.
Your First Pull Request
Working on your first Pull Request? You can learn how from this free video series:
To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs or small features that have a relatively limited scope. This is a great place to get started.
If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don\u2019t accidentally duplicate your effort.
If somebody claims an issue but doesn\u2019t follow up for more than two weeks, it\u2019s fine to take over it but you should still leave a comment.
Sending a Pull Request
The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation.
Before submitting a pull request, please make sure the following is done:
Run yarn in the repository root.
If you\u2019ve fixed a bug or added code that should be tested, add tests!
Ensure the test suite passes (npm run test).
Make sure your code lints (npm run lint). Tip: Lint runs automatically when you git commit.
Make sure rebase your code to keep the history clean.
',meta:{order:40,title:"Contributing",type:"Other"},toc:[{id:"CodeofConduct",title:"Code of Conduct",h:2},{id:"OpenDevelopment",title:"Open Development",h:2},{id:"Bugs",title:"Bugs",h:2},{id:"ProposingaChange",title:"Proposing a Change",h:2},{id:"YourFirstPullRequest",title:"Your First Pull Request",h:2},{id:"SendingaPullRequest",title:"Sending a Pull Request",h:2},{id:"DevelopmentWorkflow",title:"Development Workflow",h:2,children:[{id:"delon",title:"delon",h:3},{id:"ng-alain",title:"ng-alain",h:3}]}]},"zh-CN":{content:'
\u5982\u679c\u4f60\u6709\u6539\u8fdb\u6211\u4eec\u7684 API \u6216\u8005\u65b0\u589e\u529f\u80fd\u7684\u60f3\u6cd5\uff0c\u540c\u6837\u6309\u7167 issues \u5448\u73b0\u7684\u6a21\u677f\u8ba4\u771f\u586b\u5199\u6bcf\u4e00\u9879\u3002
\u4e3a\u4e86\u80fd\u5e2e\u52a9\u4f60\u5f00\u59cb\u4f60\u7684\u7b2c\u4e00\u6b21\u5c1d\u8bd5\uff0c\u6211\u4eec\u7528 good first issues \u6807\u8bb0\u4e86\u4e00\u4e9b\u6bd4\u8f83\u6bd4\u8f83\u5bb9\u6613\u4fee\u590d\u7684 bug \u548c\u5c0f\u529f\u80fd\u3002\u8fd9\u4e9b issue \u53ef\u4ee5\u5f88\u597d\u5730\u505a\u4e3a\u4f60\u7684\u9996\u6b21\u5c1d\u8bd5\u3002
When the project is developed, you can package your app with just one line of command:
npm run build
NG-ALAIN itself is an Angular CLI project, so you can also complete more complex build requirements with Build. After the package is successfully packaged, the dist folder will be generated in the root directory, which is to build the packaged file, including several static files such as *.js, *.css, index.html.
JavaScript heap out of memory
Avoid executing ng build when throw error JavaScript heap out of memory:
When you need to distinguish between development and deployment, and test environments, you can configure the corresponding parameters according to different environments through the src/environments folder. The configuration items can also be called directly in the application. At the same time, you need to configure the configuration items in angular.json. Finally, you can change the environment configuration through commands.
Analyze the build file volume
If the build file is large, you can optimize your code by building and analyzing the volume distribution of dependent modules with the analyze command.
npm run analyze
View the analyze page:
npm run analyze:view
Release
When you are ready to deploy (release) your the app, you need only to publish the generated build artifacts - that is, the files in the dist folder - to your cdn or static server. Note that the index.html is usually the entry page for your app and handles all missing file requests. You may need to change the import path of the page after determining the static of js and css.
The default static resource reference path directly points to the directory where the dist folder is published. For example, if you post dist to the root directory of the ng-alain.com site, the requested URL is //ng-alain.com/***.js, //ng-alain.com/***.css, if dist is posted to a directory under a certain directory, such as v2, request The URL is //ng-alain.com/v2/***.js, //ng-alain.com/v2/***.css.
If your static resource is deployed to another domain name (such as a separate CDN address), you can specify a CDN address with the --deployUrl parameter.
ng build -deployUrl=//cdn.ng-alain.com/
The generated index.html with its *.js, *.css files will automatically refer to //cdn.ng-alain.com/*.js, //cdn.ng-alain.com/*css, respectively.
Routing strategy
Angular front-end routing has two different strategies: HashLocationStrategy and PathLocationStrategy. The former is routed by appending a # before a path, and the front-end routing management is performed by HTML5 History, while the latter is similar, but the path does not have # appended before it. Through the configuration of the server, the specified URL can be accessed to the current page, enabling front-end routing management.
If you want to use PathLocationStrategy, you need to replace RouterModule.forRoot(routes, { useHash: true }) of ./src/app/routes/routes-routing.module.ts with RouterModule.forRoot(routes), since that is the default Angular behavior. You might notice that this can also be done by changing the useHash variable in the src/environments/environment.*.ts files, depending on your project configulation. Importantly, your server needs to be correctly configured, such that is returns the index.html for any 404 errors:
Express server example:
app.use(express.static(path.join(__dirname, \'build\')));\n\napp.get(\'/*\', function (req, res) {\n res.sendFile(path.join(__dirname, \'build\', \'index.html\'));\n});
For more questions about Angular routing, please read official website.
Docker
NG-ALAIN provides a complete image file for building Angular projects based on the nginx WEB service. Where nginx is a mirror using nginx:1.13.5-alpine, which basically satisfies NG-ALAIN The project\'s good operating environment, if there are more needs, you can easily specify nginx.conf with docker run.
1. Building the image
Build a complete image of the runtime environment required by NG-ALAIN based on the Dockerfile.
docker build -t ng-alain .
2. Running
Based on compose (Recommended)
docker-compose up -d
The details can be modified with docker-compose.yml.
',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"Construct",title:"Construct",h:2,children:[{id:"JavaScriptheapoutofmemory",title:"JavaScript heap out of memory",h:3},{id:"Environmentalvariables",title:"Environmental variables",h:3},{id:"Analyzethebuildfilevolume",title:"Analyze the build file volume",h:3}]},{id:"Release",title:"Release",h:2,children:[{id:"Routingstrategy",title:"Routing strategy",h:3},{id:"Docker",title:"Docker",h:3},{id:"Containerdeployment",title:"Container deployment",h:3}]}]},"zh-CN":{content:'
',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"\u6784\u5efa",title:"\u6784\u5efa",h:2,children:[{id:"JavaScriptheapoutofmemory",title:"JavaScript heap out of memory",h:3},{id:"\u73af\u5883\u53d8\u91cf",title:"\u73af\u5883\u53d8\u91cf",h:3},{id:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",title:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",h:3}]},{id:"\u53d1\u5e03",title:"\u53d1\u5e03",h:2,children:[{id:"\u8def\u7531\u7b56\u7565",title:"\u8def\u7531\u7b56\u7565",h:3},{id:"Docker",title:"Docker",h:3},{id:"\u5bb9\u5668\u90e8\u7f72",title:"\u5bb9\u5668\u90e8\u7f72",h:3}]}]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-deploy"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()},{path:"faq",redirectTo:"faq/zh",pathMatch:"full"},{path:"faq/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"en-US":"docs/faq.en-US.md","zh-CN":"docs/faq.zh-CN.md"},content:{"en-US":{content:'
Please check the FAQ below before asking questions.
Basic
Can\'t Bind to since it isn\'t a known property of
When you have multiple lazy modules, you want each submodule to use the component library (for example: NgZorroAntdModule, NgxTinymceModule) should be exported in ShareModule, please refer to module registration guidelines.
Expression Changed After It Has Been Checked Error
Common mistakes under Angular, this article will help you understand why.
Can\'t bind to \'formGroup\' since it isn\'t a known property of \'form\'
Common mistakes under Angular, the use of Reactive Forms requires the introduction of ReactiveFormsModule, refer to official documentation.
Why is the page not updated after the data is modified?
The NG-ZORRO and @delon/* components work in OnPush mode by default. Mutate objects or arrays do not trigger Angular\'s change detection. Use the immutable method.
How to use @delon daily build version
NG-ALAIN provides a delon-builds repository as a daily build version. It\'s not the final stable version, but contains the latest fixed BUG, To use the latest features, you can create delon.sh in the root directory:
When you need to use the daily build version of @delon, you only need to run:
bash delon.sh
If in Windows environment, please use WSL to execute Bash scripts.
Installation
Why can\'t I find the ng-zorro-antd/src/*.less style?
Two situations:
Using cnpm to install dependencies, you will not be able to find style files. This is because cnpm is in the form of a soft link path, which causes the ng-zorro-antd folder name to change, so it is recommended to use the yarn install dependency package instead.
The ng-zorro-antd version is too old to cause some components to fail to load into the appropriate style
yarn config set registry https://registry.npmmirror.com\nyarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass\n# restore\nyarn config delete registry\nyarn config delete sass_binary_site
Configuration
How do I deploy the antd icon locally?
First, the latest iconfont file can go to this link (mirror) Download.
Finally, redefine the new path in src/styles/theme.less:
@icon-url: "/assets/iconfont";
Use an absolute path or CDN address.
Missing locale data for the locale "zh-cn"
For missing language imports, refer to app.module.ts.
How to deploy ng-alain.com documentation site in local
Online documents will only retain the data of the last three major version numbers. If the version is low, you can view it through local deployment:
git clone --depth 1 -b full https://github.com/ng-alain/archive-docs.git ng-alain-doc\ncd ng-alain-doc\nyarn\nyarn start
Fix the abnormal display of the lower part of the 360 browser
The built-in Chrome core of some 360 browsers is too low, resulting in some CSS3 not supported, you can manually increase .browserslistrc For more details, refer to #2310
',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"Basic",title:"Basic",h:2,children:[{id:"Can'tBindtosinceitisn'taknownpropertyof",title:"Can't Bind to since it isn't a known property of",h:3},{id:"ExpressionChangedAfterItHasBeenCheckedError",title:"Expression Changed After It Has Been Checked Error",h:3},{id:"Can'tbindto'formGroup'sinceitisn'taknownpropertyof'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"Whyisthepagenotupdatedafterthedataismodified",title:"Why is the page not updated after the data is modified?",h:3},{id:"Howtouse@delondailybuildversion",title:"How to use @delon daily build version",h:3}]},{id:"Installation",title:"Installation",h:2,children:[{id:"Whycan'tIfindtheng-zorro-antd/src/*.lessstyle",title:"Why can't I find the ng-zorro-antd/src/*.less style?",h:3},{id:"HowtouseTaobaosourcecorrectly",title:"How to use Taobao source correctly?",h:3}]},{id:"Configuration",title:"Configuration",h:2,children:[{id:"HowdoIdeploytheantdiconlocally",title:"How do I deploy the antd icon locally?",h:3},{id:'Missinglocaledataforthelocale"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"Howtodeployng-alain.comdocumentationsiteinlocal",title:"How to deploy ng-alain.com documentation site in local",h:3},{id:"Fixtheabnormaldisplayofthelowerpartofthe360browser",title:"Fix the abnormal display of the lower part of the 360 browser",h:3}]}]},"zh-CN":{content:'
',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"\u57fa\u7840",title:"\u57fa\u7840",h:2,children:[{id:"Can'tBindtosinceitisn'taknownpropertyof",title:"Can't Bind to since it isn't a known property of",h:3},{id:"ExpressionChangedAfterItHasBeenCheckedError\u9519\u8bef",title:"Expression Changed After It Has Been Checked Error \u9519\u8bef",h:3},{id:"Can'tbindto'formGroup'sinceitisn'taknownpropertyof'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",title:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",h:3},{id:"\u5982\u4f55\u4f7f\u7528@delon\u6bcf\u65e5\u6784\u5efa\u7248\u672c",title:"\u5982\u4f55\u4f7f\u7528@delon\u6bcf\u65e5\u6784\u5efa\u7248\u672c",h:3}]},{id:"\u5b89\u88c5",title:"\u5b89\u88c5",h:2,children:[{id:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230ng-zorro-antd/src/*.less\u6837\u5f0f\uff1f",title:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230 ng-zorro-antd/src/*.less \u6837\u5f0f\uff1f",h:3},{id:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",title:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",h:3}]},{id:"\u914d\u7f6e",title:"\u914d\u7f6e",h:2,children:[{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72antd\u56fe\u6807\uff1f",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72 antd \u56fe\u6807\uff1f",h:3},{id:'Missinglocaledataforthelocale"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",h:3},{id:"\u4fee\u590d360\u6d4f\u89c8\u5668\u4e0b\u90e8\u5206\u663e\u793a\u5f02\u5e38",title:"\u4fee\u590d360\u6d4f\u89c8\u5668\u4e0b\u90e8\u5206\u663e\u793a\u5f02\u5e38",h:3}]}]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-faq"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()},{path:"getting-started",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"en-US":"docs/getting-started.en-US.md","zh-CN":"docs/getting-started.zh-CN.md"},content:{"en-US":{content:'
Foreword
NG-ALAIN is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.
Please make sure global Angular Cli is latest version via ng version command, please refer to CLI Command Reference for how to upgrade.
yarn global add @angular/cli\nng new my-project --style less --routing --package-manager yarn\ncd my-project\nng add ng-alain\nyarn start\n# Or use HMR mode by: yarn run hmr
git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project\ncd my-project\nyarn\nyarn start\n# Or use HMR mode by: yarn run hmr
Note: Installing with the CLI is a clean scaffolding; using clone the git repository include all example pages.
Scaffolding
NG-ALAIN is a standard Angular CLI project that includes common routes for admins and demonstrates our component library. The project layout is as follows:
For questions on how to use ng-alain, please post questions to using the ng-alain tag.
As always, we encourage experienced users to help those who are not familiar with ng-alain!
DONATE
If you would like to \n to NG-A
',meta:{order:10,title:"Getting Started",type:"Basic",i18n:"need-update"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Preparation",title:"Preparation",h:2},{id:"Installation",title:"Installation",h:2,children:[{id:"CLIRecommend",title:"CLI (Recommend)",h:3},{id:"ClonetheGitRepository",title:"Clone the Git Repository",h:3}]},{id:"Scaffolding",title:"Scaffolding",h:2},{id:"Development",title:"Development",h:2},{id:"EnvironmentSupport",title:"Environment Support",h:2},{id:"Contributing",title:"Contributing",h:2},{id:"NeedHelp",title:"Need Help?",h:2},{id:"DONATE",title:"DONATE",h:2}]},"zh-CN":{content:'
\u4ec0\u4e48\u662fNG-ALAIN
NG-ALAIN \u662f\u4e00\u4e2a\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u524d\u7aef/\u8bbe\u8ba1\u89e3\u51b3\u65b9\u6848\u811a\u624b\u67b6\uff0c\u6211\u4eec\u79c9\u627f Ant Design \u7684\u8bbe\u8ba1\u4ef7\u503c\u89c2\uff0c\u76ee\u6807\u4e5f\u975e\u5e38\u7b80\u5355\uff0c\u5e0c\u671b\u5728Angular\u4e0a\u9762\u5f00\u53d1\u4f01\u4e1a\u540e\u53f0\u66f4\u7b80\u5355\u3001\u66f4\u5feb\u901f\u3002\u968f\u7740\u300e\u8bbe\u8ba1\u8005\u300f\u7684\u4e0d\u65ad\u53cd\u9988\uff0c\u5c06\u6301\u7eed\u8fed\u4ee3\uff0c\u9010\u6b65\u6c89\u6dc0\u548c\u603b\u7ed3\u51fa\u66f4\u591a\u8bbe\u8ba1\u6a21\u5f0f\u548c\u76f8\u5e94\u7684\u4ee3\u7801\u5b9e\u73b0\uff0c\u9610\u8ff0\u4e2d\u540e\u53f0\u4ea7\u54c1\u6a21\u677f/\u7ec4\u4ef6/\u4e1a\u52a1\u573a\u666f\u7684\u6700\u4f73\u5b9e\u8df5\uff0c\u4e5f\u5341\u5206\u671f\u5f85\u4f60\u7684\u53c2\u4e0e\u548c\u5171\u5efa\u3002
\u5b89\u88c5\u4e4b\u524d\u8bf7\u5148\u786e\u4fdd\u672c\u5730\u5df2\u7ecf\u5b89\u88c5\u5168\u5c40 Angular Cli\uff0c\u53ea\u6709\u8fd9\u6837\u624d\u80fd\u968f\u65f6\u968f\u5730\u5728\u7ec8\u7aef\u4f7f\u7528 ng \u547d\u4ee4\uff0c\u53ef\u4ee5\u901a\u8fc7\u7ec8\u7aef\u7a97\u53e3\u4e2d\u8fd0\u884c\uff1a
We add support of global configuration to many components. You can define the default behavior of the component through global configuration, thus reducing the code that needs to be written in the template, and support changing global config at runtime.
How to Use?
If you want to provide default configurations to some components, you should provide an object that implements the interface AlainConfig with the injection token ALAIN_CONFIG, in the root module (in another word, to the root injector). Like this:
',meta:{order:90,title:{"en-US":"Global Configuration","zh-CN":"\u5168\u5c40\u914d\u7f6e\u9879"},type:"Dev"},toc:[{id:"HowtoUse",title:"How to Use?",h:2},{id:"AboutNG-ZORRO",title:"About NG-ZORRO",h:2}]},"zh-CN":{content:'
As you begin your business development on NG-ALAIN, i recommend that you first review the following documents, which is very helpful for everyone on the team.
NG-ALAIN\'s base component library comes from NG-ZORRO, so you can get a very detailed API documentation for its use on the official website. For ng components provided by -alain are obtained through the component page.
Second, the startup process
NG-ALAIN is a scaffold that can be used directly in production environments. The prerequisite for understanding these details is that you have a certain knowledge of Angular. The following documents may be helpful to you before you start:
When running an app via ng serve, a complete Angular startup process would look like this:
Trigger APP_INITIALIZER (the scaffolding implementation is implemented in StartupService.load) to get the application information.
Trigger service routing (src/app/routes/routes-routing.module.ts` for scaffolding)
Rendering components
1) APP_INITIALIZER
From a mid and back-office perspective, NG-ALAIN always believes that a network request is required to get some application information (eg menu data, user data, etc.) before Angular starts.startup.service.ts\uff1bIt returns a Promise object, which always needs to be called: resolve() to ensure that Angular starts normally.
Network requests may encounter a 403 error because the scaffolding uses the user authentication module by default and always assumes that all requests must be a valid user authorization. For more documentation see:
After obtaining the application information, you need to assign some values \u200b\u200bto the built-in services of the scaffolding, including:
Application Information
Including: application name, description, year, information can be directly injected into the SettingsService (API) and directly in the HTML template.
this.settingService.setApp(res.app);
User Info
Including: name, avatar, email address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.
this.settingService.setUser(res.user);
Layout information
Including: name, avatar, email, address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.
// Whether to fix the top menu\nthis.settingService.setLayout(`fixed`, false);\n// Whether to collapse the right menu\nthis.settingService.setLayout(`collapsed`, false);
Menu data
NG-ALAIN takes menu from the remote and can also inject MenuService (API) to change the menu data. Of course, it is more reasonable to perform menu assignment before Angular starts.
Menu data Make sure ensure Menu format, menu data throughout Applications, for example: page header auto navigation page-header, page title text TitleService Wait.
this.menuService.add(res.menu);
Page title
If the page title always wants to add the application name as a suffix, you can re-adjust the suffix attribute value by injecting TitleService(API).
// Set the suffix of the page title\nthis.titleService.suffix = res.app.name;
ACL
this.aclService.setFull(true);
It is recommended to load the ACL access control permission data before starting. For more details, please refer to Access Control List.
Globalization
It is recommended to load the internationalization package first before starting, which will ensure that the page is rendered as the target language after the project is started. See Internationalization for more details.
Above we used the LayoutDefaultComponent base layout in the business module. User authorization uses LayoutPassportComponent user authorization layout and the full screen layout.
It is recommended that all submodules be loaded using a lazy module, such as the TradeModule order module, which organizes the code structure more efficiently.
Under what circumstances do you not use lazy loading?
Angular startup from the top-level component. When a lazy module is encountered, it will initiate a script request. At this time, the dashboard or login page will be blank due to network requests, which is not good for the experience.
Routing permission control
The routing URL may be affected by the browser\'s own historical memory, so that users may access the unprivileged route. If you want a better experience, you need to configure the canActivate option on the route. When the user has no permission, it will utomatically jump to the relevant page. see the ACL Routing Guard section for details.
IDE
A developer must first sharpen his tools if he is to do his work well, NG-ALAIN recommended to use the Visual Studio Code IDE, because ng-alain adds some extra features to VSCode to better help you. Development.
',meta:{order:0,title:"How to start",type:"Dev",i18n:"need-update"},toc:[{id:"First,pre-orderpreparation",title:"First, pre-order preparation",h:2},{id:"Second,thestartupprocess",title:"Second, the startup process",h:2,children:[{id:"1APP_INITIALIZER",title:"1) APP_INITIALIZER",h:3},{id:"2Businessrouting",title:"2) Business routing",h:3},{id:"Underwhatcircumstancesdoyounotuselazyloading",title:"Under what circumstances do you not use lazy loading?",h:3},{id:"Routingpermissioncontrol",title:"Routing permission control",h:3}]},{id:"IDE",title:"IDE",h:2,children:[{id:"Codefragment",title:"Code fragment",h:3},{id:"Classstylesmartreminder",title:"Class style smart reminder",h:3}]}]},"zh-CN":{content:'
Angular\u4e2d\u6587\u6587\u6863\uff0c\u5efa\u8bae\u4e00\u5b9a\u8981\u82b1\u65f6\u95f4\u9605\u8bfb\u6587\u6863\u90e8\u5206\uff0c\u900f\u8fc7\u5b83\u57fa\u672c\u4e0a\u5c31\u53ef\u4ee5\u5b66\u4f1a Angular\uff1b\u540c\u65f6\uff0c\u4e5f\u662f Angular API \u63a5\u53e3\u6587\u6863
Ant Design \u6307\u5f15\u6587\u7ae0\uff0c\u5b66\u4e60 Ant Design \u7684\u8bbe\u8ba1\u7406\u5ff5\uff0c\u975e\u5e38\u503c\u5f97\u9605\u8bfb\u7684\u90e8\u5206
Angular internationalization provides a solution for extracting language files, but for NG-ALAIN, this is not the best way; this is mainly limited by @Delon/* The component library needs to provide a set of dynamic translation Service, therefore, NG-ALAIN has built-in a simple internationalized service ALAIN_I18N_TOKEN interface.
How to configure
Scaffolding is composed of two important parts: ng-zorro-antd and @delon/*. These two libraries have their own international configuration. When internationalizing, they need to be the same for these libraries. Language configuration.
Angular
Angular configuration is mainly for currency, date format, etc., such as Chinese version:
import { registerLocaleData } from \'@angular/common\';\nimport zh from \'@angular/common/locales/zh\';\nregisterLocaleData(zh);
ng-zorro-antd
ng-zorro-antd internationalization defaults to the Chinese version, for example the default English version:
import { en_US, provideNzI18n } from \'ng-zorro-antd/i18n\';\n@NgModule({\n providers: [provideNzI18n(en_US)]\n})\nexport class App1Module {}
@delon/* class library has many data interface properties with the i18n typeface (for example: page-header, st column description, Menu menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for ALAIN_I18N_TOKEN (for example: I18NService /master/src/app/core/i18n/i18n.service.ts)) and register under the root module.
import { ALAIN_I18N_TOKEN } from \'@delon/theme\';\nimport { I18NService } from \'@core\';\n\n@NgModule({\n ...\n providers: [\n { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }\n ]\n})\nexport class AppModule {}
i18n pipe
In order not to be named by the third-party pipes, the scaffolding contains a i18n pipe, which is equivalent to calling the fanAIN method of ALAIN_I18N_TOKEN directly.
| i18n will not listen to language change notifications, so there will be better performance. When you explicitly re-render the Angular project after switching languages, | i18n will be more suitable.
How to add
When creating scaffolding from command lineng add ng-alain, it is allowed to specify --i18n to indicate whether the internationalized sample code is included.
How to delete
The sample code covers the following:
src/app/core/i18n directory
Replace the pipe of i18n that may appear in the default layout using | i18n
Default language
Regardless of whether internationalization is required or not, since the default languages \u200b\u200bof class libraries such as Angular, ng-zorro-antd, @delon/* are different, it is also necessary to ensure that the default language of these libraries is the same type. A simple example approach to understand the current language situation for each type of library:
import { Component } from \'@angular/core\';\n\n@Component({\n selector: \'app-i18n-test\',\n template: `\n <h2>angular</h2>\n <p>Date: {{now | date}}</p>\n <h2>ng-zorro-antd</h2>\n <nz-transfer [nzDataSource]="[]"></nz-transfer>\n <h2>@delon</h2>\n <div style="width: 200px">\n <tag-select>\n <nz-tag>1</nz-tag>\n </tag-select>\n </div>`,\n})\nexport class I18nTestComponent {\n now = new Date();\n}
Example
In order to make language uniformity, NG-ALAIN provides a simple unified configuration in the AppModule root module.
Chinese Version
// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/zh\';\nimport { provideNzI18n, zh_CN as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, zh_CN as delonLang } from \'@delon/theme\';\nconst LANG = {\n abbr: \'zh\',\n ng: ngLang,\n zorro: zorroLang,\n delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n { provide: LOCALE_ID, useValue: LANG.abbr },\n provideNzI18n(LANG.zorro),\n { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}
English version
// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/en\';\nimport { provideNzI18n, en_US as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, en_US as delonLang } from \'@delon/theme\';\nconst LANG = {\n abbr: \'en\',\n ng: ngLang,\n zorro: zorroLang,\n delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n { provide: LOCALE_ID, useValue: LANG.abbr },\n provideNzI18n(LANG.zorro),\n { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}
Command Line
Use the defaultLanguage plugin to quickly switch between the default locales.
Internationalized routing
If you want to toggle internationalization by routed URLs, e.g. by accessing /zh and /en to change the language, just use the alainI18nCanActivate guard in the root route:
Where :i18n is a fixed value of the parameter, which can be adjusted by the Global ConfigurationparamNameOfUrlGuard.
',meta:{order:30,title:{"en-US":"I18n","zh-CN":"\u56fd\u9645\u5316"},type:"Advance"},toc:[{id:"Howtoconfigure",title:"How to configure",h:2,children:[{id:"Angular",title:"Angular",h:3},{id:"ng-zorro-antd",title:"ng-zorro-antd",h:3},{id:"@delon",title:"@delon",h:3}]},{id:"ALAIN_I18N_TOKEN",title:"ALAIN_I18N_TOKEN",h:2,children:[{id:"i18npipe",title:"i18n pipe",h:3}]},{id:"Howtoadd",title:"How to add",h:2},{id:"Howtodelete",title:"How to delete",h:2},{id:"Defaultlanguage",title:"Default language",h:2,children:[{id:"Example",title:"Example",h:3},{id:"CommandLine",title:"Command Line",h:3}]},{id:"Internationalizedrouting",title:"Internationalized routing",h:2}]},"zh-CN":{content:'
In addition to the NG-ALAIN base component and the @delon business component, sometimes we need to reference other external class libraries, the following is how to use the rich text component ngx-tinymce:
Angular Component
Installing dependencies
yarn add ngx-tinymce
Import module
You may need to use rich editor in all submodules, as it\'s recommended to import and export them in the SharedModule module.
// #region third libs\nimport { NgxTinymceModule } from \'ngx-tinymce\';\nconst THIRDMODULES = [ NgxTinymceModule ];\n// #endregion
The region: third libs region is a coding convention for NG-ALAIN, register all third-party components into the THIRDMODULES variable, for more coding conventions, refer to Style Guide.
For some third-party components, may be required global configuration. It\'s recommended to register in the root module, for example:
import { NgxTinymceModule } from \'ngx-tinymce\';\n@NgModule({\n imports: [\n BrowserModule,\n NgxTinymceModule.forRoot({\n baseURL: \'//cdn.bootcss.com/tinymce/4.7.13/\'\n })\n ]\n})\nexport class AppModule { }
Next you can use ngx-tinymce in any submodule:
<tinymce [(ngModel)]="html"></tinymce>
Non-Angular Component
Referencing a non-Angular component is actually loading a JavaScript class library file, such as the QR code library qrious:
Installing dependencies
yarn add qrious
Import Scripts
Add qrious.min.js to the scripts node in angular.json:
If the third-party library requires additional styles, you also need to add a path to styles.
Note: You need to re-run ng s.
Lazy loading script
The above import script method will package the code directly into scripts.js, which will cause the scripts.js to become larger. NG-ALAIN provides another delayed loading CDN library script solution for low-usage services. (Example: zip compression), you can use LazyService to delay loading remote CDN scripts.
declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n constructor() {\n const qr = new QRious();\n }\n}',meta:{order:60,title:"Use a third-party lib",type:"Dev"},toc:[{id:"AngularComponent",title:"Angular Component",h:2,children:[{id:"Installingdependencies",title:"Installing dependencies",h:3},{id:"Importmodule",title:"Import module",h:3}]},{id:"Non-AngularComponent",title:"Non-Angular Component",h:2,children:[{id:"Installingdependencies",title:"Installing dependencies",h:3},{id:"ImportScripts",title:"Import Scripts",h:3},{id:"Howtouse",title:"How to use",h:3}]}]},"zh-CN":{content:'
declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n constructor() {\n const qr = new QRious();\n }\n}',meta:{order:60,title:"\u4f7f\u7528\u7b2c\u4e09\u65b9\u7c7b\u5e93",type:"Dev"},toc:[{id:"Angular\u7ec4\u4ef6",title:"Angular\u7ec4\u4ef6",h:2,children:[{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u6ce8\u518c",title:"\u6ce8\u518c",h:3}]},{id:"\u975eAngular\u7ec4\u4ef6",title:"\u975eAngular\u7ec4\u4ef6",h:2,children:[{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u5bfc\u5165\u811a\u672c",title:"\u5bfc\u5165\u811a\u672c",h:3},{id:"\u4f7f\u7528",title:"\u4f7f\u7528",h:3}]}]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-import"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()},{path:"mock",redirectTo:"mock/zh",pathMatch:"full"},{path:"mock/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"zh-CN":"docs/mock.md"},content:{"zh-CN":{content:'',meta:{order:60,title:"Mock",type:"Advance",url:"/mock/getting-started"},toc:[]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-mock"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()},{path:"module",redirectTo:"module/zh",pathMatch:"full"},{path:"module/:lang",component:(()=>{class e{constructor(){this.item={cols:1,urls:{"en-US":"docs/module.en-US.md","zh-CN":"docs/module.zh-CN.md"},content:{"en-US":{content:'
The AppModule, CoreModule, and SharedModule modules have not been used very clearly, and it is easy to use them. The goal of the Angular module is to make components, instructions, services, and pipeline function blocks more cohesive, and each functional area forms a separate set of business domains or utilities.
1) Classification description
AppModule
The root module is used to guide Angular startup. It is very suitable for importing some modules that need to be used everywhere in the application. Such as: theme system, user master authentication module, permission module, global HTTP interceptors, international services, etc..
CoreModule
The core module will only be imported once. It is equivalent to AppModule, but we should treat it as a pure service class module. For example: message, data access, etc.
SharedModule
We call it a shared module. It should not have providers because ShareModule will be imported in all business modules. Which will cause the service to be overwritten.
NG-ZORRO, @delon/abc, @delon/chart, etc. have changed from all import to on-demand import since version 11. For this reason, NG-ALAIN has refined two files shared-delon.module.ts and shared -zorro.module.ts merges some modules frequently used throughout the project into a module called SharedModule, which is why it is necessary to import it in the business module for the first time. Although this method can reduce unnecessary import code, it will also cause compilation speed. Therefore, it is not recommended to put all components into SharedModule, and try to put the modules that need to be used more than three times before putting them here; Otherwise, you must import it yourself in the business module.
For some functional modules that may be referenced in multiple places, it is recommended to refine the management into unified management of business components. These components generally have the following characteristics:
Only responsible for a relatively independent, stable function;
no separate routing configuration;
May be purely static, controlled only by parameters passed by the parent component (usually a page).
Let\'s take a simple static component as an example. Suppose your app often needs to display images. These images are fixed in width, have a gray background and a certain padding, and have text descriptions, like the following:
You can do this with a component that has a default style and can receive the parameters passed by the parent component for display.
Create a new file
Create a new folder named components under src/app/shared. Create folder called image-wrapper and component file. If required add ts files index.ts and style files index.less. Provide README.md for component API descriptions in this folder.
When using components, the default is to look for the export object in index.ts. If your component is more complex, you can split it into multiple files, and finally unify the export in index.ts, like this:
// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';
Where you want to use this component, just follow the component-defined API input parameters and use it directly:
<image-wrapper\n src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"\n desc="schematic-diagram"></image-wrapper>',meta:{order:20,title:{"en-US":"New Component","zh-CN":"\u65b0\u589e\u4e1a\u52a1\u7ec4\u4ef6"},type:"Dev"},toc:[{id:"Createanewfile",title:"Create a new file",h:2},{id:"Register",title:"Register",h:2},{id:"Use",title:"Use",h:2}]},"zh-CN":{content:'
// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';
\u5728\u8981\u4f7f\u7528\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u5730\u65b9\uff0c\u6309\u7167\u7ec4\u4ef6\u5b9a\u4e49\u7684 API \u4f20\u5165\u53c2\u6570\uff0c\u76f4\u63a5\u4f7f\u7528\u5c31\u597d\uff1a
Angular renders a page in a component tree, the actual development is to organize the code in a module tree to make it better to resuse code. For module granularity depends on the requirements, ng-alain is positioned in the middle of the front-end. Therefore, it is recommended to organize your code structure from a business perspective.
NG-ALAIN provides a very rich set of Schematics templates to quickly create templates and pages that match NG-ALAIN features, as well as a variety of pluggable plugins.
Additionally: NG-ALAIN is a standard Angular CLI project, you can still use the default command line.
First, the module
To create a page, you need to create a module first. If you need a system to set the relevant module, execute the command:
ng g ng-alain:module sys
The CLI will automatically create sys.module.ts and sys-routing.module.ts files under src/app/routes/sys, the former is the system setup module component definition file; the latter is the system setup module routing Configuration file.
// sys.module.ts\nimport { NgModule, Type } from \'@angular/core\';\nimport { SharedModule } from \'@shared\';\nimport { SysRoutingModule } from \'./sys-routing.module\';\n\nconst COMPONENTS: Type[] = [];\n\n@NgModule({\n imports: [SharedModule, SysRoutingModule],\n declarations: COMPONENTS,\n})\nexport class SysModule {}
The function of the module is to import the modules we need. All NG-ZORRO, @delon/abc, @delon/chart, etc. are loaded on demand. The external components are imported wherever the current business page needs. In order to reduce these import actions, NG -ALAIN has refined two files shared-delon.module.ts and shared-zorro.module.ts to merge some modules frequently used throughout the project into a module called SharedModule, which is why it is necessary Import it in the business module for the first time. Note: It is not recommended to put all the components in SharedModule, as far as possible, put the modules that need to be used two or three times or more.
And the routing configuration module:
// sys-routing.module.ts\nimport { NgModule } from \'@angular/core\';\nimport { RouterModule, Routes } from \'@angular/router\';\n\nconst routes: Routes = [];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule],\n})\nexport class SysRoutingModule {}
By now, you can safely start developing business pages like menu management, logging, system configuration, etc. in the sys directory.
Second, the page
Use the ng generate (abbreviated as: ng g) command to create a log list page in the sys directory:
Of course, the log may be a very rich piece of information, you can add a view page opened in a modal box to display more details.
ng g ng-alain:view view -m=sys -t=log
-t=log indicates that you want to put the created file under sys/log/view',meta:{order:10,title:{"en-US":"New Page","zh-CN":"\u65b0\u589e\u9875\u9762"},type:"Dev"},toc:[{id:"First,themodule",title:"First, the module",h:2},{id:"Second,thepage",title:"Second, the page",h:2}]},"zh-CN":{content:'
Divided into JavaScript script files and CSS files. The following only describes the script part. For the CSS file, please refer to Optimize Theme System.
Note: It is recommended to always prioritize business, optimize to the post- criteria, and have some understanding of NG-ALAIN before starting to optimize. The optimization scheme in this chapter will change with the change of the version. Please pay attention to the details.
Structure description
In general, there are two files that are larger after the build: scripts.js and main.js, and our optimization is mainly for these two items.
scripts.js
It comes from a collection of scripts nodes of angular.json, so the size of this file depends on the size of the third-party component referenced by the scripts node.
In general, you should put it under scripts when you are using non-Angular third-party components.
main.js
Using ng build by default will package all @angular/*, ng-zorro-antd, @delon/* and some third-party Angular components. Unless you use the --vendor-chunk parameter to separate these classes library.
Optimization object
We know that the resource file packaged by Angular Cli will contain the hashing value of the file. Which is like the unique identifier of the file. If the module is not modified, no new hashing value will be generated. This ensures that after the user downloads the resource for the first time. No matter how we build the user again, there is no need to download it again.
In fact, Angular Cli defaults to --vendor-chunk. The main factor is that these @angular/* are very fast relative to iteration.
According to NG-ALAIN\'s module registration guidelines, generate two shared-delon.module.ts andshared-zorro.module.ts produced are the summary of the import of secondary modules shared by @Delon and NG-ZORRO.
@delon/abc,@delon/chart, ng-zorro-antd The three main libraries all support secondary imports. Only selecting the modules required by the project will effectively solve the problem of package size.
Conclusion
After NG-ZORRO provides better optimization support, we will release #684 and hope to have a better package size. Expected res
NG-ALAIN is a single-page application based on the Angular technology stack. We provide development models for front-end code and native analog data.\nWork in the form of the Restful API with the server application of any technology stack. The basics of interacting with the server are briefly described below.
Front-end request process
In NG-ALAIN, a complete front-end UI interaction to the server-side processing flow looks like this:
Start Angular for the first time to execute APP_INITIALIZER;
UI component interaction;
Send the request using the encapsulated _HttpClient;
Trigger the user authentication interceptor @delon/auth and add the token parameter uniformly;
If there is no token or an expired interrupt subsequent request, jump directly to the login page;
Trigger the default interceptor to process the prefix and other information;
Get the server back;
Trigger the default interceptor to handle request exceptions, business exceptions, etc.
Update the data and refresh the UI.
Interceptor
By default, two interceptors are registered in the root module.SimpleInterceptor with DefaultInterceptorAnd the execution order is executed in the registration order.
SimpleInterceptor
User Authentication has built-in interceptors for automatically adding token parameters to requests. There is also a JWTInterceptor interceptor, which is a standard JWT specification. If the backend uses standard JWT, it can be directly replaced with a JWTInterceptor interceptor.
DefaultInterceptor
DefaultInterceptor The interceptor simply provides an interceptor. By default, it contains sample code that handles server request prefixes, handles request exceptions, and business exceptions. You can make adjustments based on your own needs.
Important point
We can put the next.handle(req) as the demarcation point in the interceptor intercept method. The first part is the request and the pipe part is the post. This will make it clearer which part is to be done before the request and which part will be executed after the request. For more information on interceptors, please refer to the official website.
Development environment
Under normal circumstances, the development environment and the production environment are not the same back-end request source. You can actually configure it under the environment directory. environment.ts and environment.prod.ts Change the request source for different environments.
environment is actually a JSON object, you can organize different forms to meet the problem of multiple request sources.
Mock
Sometimes when you want to develop the front-end first, you can use @delon/mock to simulate the request data. The actual principle is to use the interceptor to directly return the data to the matching URL instead of sending an HTTP request. By default, it is only valid for the test environment. Of course, you usually need to make sure that the data of the Mock interface is consistent with the backend. You can create the corresponding Mock interface in the _mock directory:
So for the test environment, when the /users request is encountered, the {users: [1, 2], total: 2 } data is returned directly. See here for more Mock syntax and usage.
Note: When you don\'t need a Mock interface for a request, be sure to comment out or remove it.
Cors
Most applications will be front-end is separate from the back-end, which leads to CORS factors when a request is made to the back end, such as:
Note: If the request does not start with http, each request will add environment.SERVER_URL as the leading edge of the request URL.
The following error is returned directly:
Access to XMLHttpRequest at \'http://192.168.1.100/api/app\' from origin \'http://localhost:4200\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource.
There are usually two ways to solve cross-domain problems. One is to allow the back-end development environment to directly support CORS requests (not recommended, but simplest), the second is to use Angular Cli to provide Proxy Support, the development proxy server will forward the domain and port of the request sent by Angular to the backend Server, CORS is a security restriction of the browser. There is no problem with CORS before the proxy server and the backend server. This is why many people try to make it clear that they can be requested in Postman but not in Angular.
Assuming that all backend requests are prefixed with /api, you can configure all this prefix in proxy.conf.js to forward to the new backend, for example:
secure If the proxy target address is https, it should be set to true, otherwise it is false
pathRewrite Rewrite the address, such as pathRewrite: {\'^/api\':\'/\'} to change the prefix /api to /
changeOrigin Change the host of the host header to the target URL. Some backends will judge whether it is valid according to its value. You may need to set true
logLevel Set to debug to display the message forwarded by the agent on the terminal
Q: The request may be rejected or returned directly to 401?
Scaffolding uses the SimpleInterceptor interceptor of @delon/auth by default, which causes an error to be returned directly if a token cannot be obtained during the request.
Access to XMLHttpRequest at \'http://192.168.1.100/api/app\' from origin \'http://localhost:4200\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource.
The project built by Angular CLI is already very good in terms of its directory structure. Official website also has an Angular Style Guide (Chinese version) Style guide. It is recommended to read it several times. In addition, NG-ALAIN also has a part of the coding style, the following instructions may be useful for reading the code.
Consistent code style
NG-ALAIN uses ESLint to guarantee code quality and Prettier to optimize the code style.
It is recommended to install several plugins for more friendly development in vscode:
Of course, NG-ALAIN has prepared a complete set of extension packs for everyone, just install NG-ALAIN Extension Pack.
Git - pre commit Hook
The ng lint command provided by Angular, can be very effective in helping us find bugs and readability earlier. Isn\'t it cool if we can guarantee that the lint of the file in staged is automatically done before each commit in the team development process?
NG-ALAIN is configured to do lint each time you commit to staged and you can\'t commit if you find an error.
By default, the *.ts, *.less commit process forces the formatting of the code. You can change the rules by modifying the husky node of package.json.
If hint: The\'.husky/pre-commit\' hook was ignored because it\'s not set as executable. is generated when executing git commit -m "commit", it may be due to permission issues. Try to execute in the project root directory:
chmod ug+x .husky/*\nchmod ug+x .git/hooks/*
Style guide
API documentation
Applications are always inevitable for the development of business components. We can not guarantee that you can remember these after a certain time. So, make sure to include the README.md document in each business component and describe the API, DEMO and other information.
For example:
## When do you use it?\n\nInstruction\n\n## DEMO\n\nInstruction\n\n## API\n\nParameter | Description | Type | Default\n----|------|-----|------\nsrc | The map\'s address | `string` | -
NG-ALAIN is configured with some options for the CLI to better code.
CLI
Vscode is the best choice for writing Angular. You can type: ng g c list in any directory of the project to generate the corresponding files for the component.
NG-ALAIN is configured by default without generating style files & unit tests. So you will see that only .ts, .html are generated. This is because NG-ALAIN provides a very rich style API, and custom styles are not just needed on most pages. At the same time, unit tests.
Of course, you can easily adjust the default configuration in angular.json.
VSCode snippets
VSCode is the best choice for writing Angular. Naturally NG-ALAIN also created the corresponding snippets extension: ng-zorro-vscode and ng-alain-vscode
\u82e5\u5728\u6267\u884c git commit -m "commit" \u65f6\u82e5\u4ea7\u751f hint: The \'.husky/pre-commit\' hook was ignored because it\'s not set as executable. \u65f6\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u6743\u9650\u95ee\u9898\uff0c\u53ef\u4ee5\u5c1d\u8bd5\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c\uff1a
vscode \u662f\u7f16\u5199 Angular \u6700\u4f73\u7684\u9009\u62e9\uff0c\u4f60\u53ef\u4ee5\u5728\u9879\u76ee\u7684\u4efb\u4f55\u76ee\u5f55\u91cc\u8f93\u5165\uff1ang g c list \u751f\u6210\u7ec4\u4ef6\u7684\u76f8\u5e94\u7684\u6587\u4ef6\u3002
This guide applies to the current version ng-alain >= 15;\nIf you encounter problems during the upgrade process, feel free to comment here.\nIf you find any errors in this guide, please point out\nOr you have encountered a new problem and solved it, welcome to comment here.
Before upgrade
Make sure Node.js >= 16.10.0.
Create a new branch, or use other methods to back up the current project.
Delete the package-lock.json or yarn.lock file.
1.Upgrade dependencies
Upgrade Angular to 15.x version, Run ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16 ng-zorro-antd@16 ng-alain@16.
Run ng update @angular/cdk@16, if you have used @angular/cdk.
If any warning messages appear in the console, follow the prompts to modify the corresponding code.
NG-ALAIN scaffolding upgrade all change files, please refer to: #2394.
',meta:{order:1e3,type:"Basic",title:"Upgrade to version 16.0",hot:!0},toc:[{id:"Beforeupgrade",title:"Before upgrade",h:2,children:[{id:"1.Upgradedependencies",title:"1.Upgrade dependencies",h:3}]}]},"zh-CN":{content:'
In Architecture we have described the overall composition of the NG-ALAIN scaffolding. We spent a lot of time developing some infrastructure and publishing these to the @delon/* series to Npm. , making the upgrade very easy.
Publishing rule
Similar to @angular/*, the version number of the @delon/* class library will be a version number () at each iteration, regardless of whether a class library has been modified.
At the same time, please follow the following publishing rules and update version number:
@delon as the infrastructure library, which will be slightly higher in the update frequency, usually updated at least once a week.
With BREAKING CHANGES at least one minor version number
Scaffolding in package.json most libraries use loose version numbers, for example:
^0.1.0 with the ^ symbol indicates that the latest minor version number is used, so 0.7.0 is also the range.
To use this update method, you need to follow these steps:
Remove the node_modules folder and the yarn.lock file
Execute yarn
Note: This method will install all class libraries in a newer version, but it may cause unnecessary troubles due to damaging changes of third-party t
',meta:{order:80,title:{"en-US":"Upgrade scaffold","zh-CN":"\u5347\u7ea7\u811a\u624b\u67b6"},type:"Dev"},toc:[{id:"Publishingrule",title:"Publishing rule",h:2},{id:"Howtoupgrade",title:"How to upgrade?",h:2,children:[{id:"Method1:CommandRecommend",title:"Method 1: Command (Recommend)",h:3},{id:"Method2:Modifytheversionnumber",title:"Method 2: Modify the version number",h:3},{id:"Method3:Updateallclasslibraries",title:"Method 3: Update all class libraries",h:3}]}]},"zh-CN":{content:'
',meta:{order:80,title:{"en-US":"Upgrade scaffold","zh-CN":"\u5347\u7ea7\u811a\u624b\u67b6"},type:"Dev"},toc:[{id:"\u53d1\u5e03\u89c4\u5219",title:"\u53d1\u5e03\u89c4\u5219",h:2},{id:"\u5982\u4f55\u5347\u7ea7\uff1f",title:"\u5982\u4f55\u5347\u7ea7\uff1f",h:2,children:[{id:"\u65b9\u5f0f\u4e00\uff1a\u547d\u4ee4\u884c\uff08\u63a8\u8350\uff09",title:"\u65b9\u5f0f\u4e00\uff1a\u547d\u4ee4\u884c\uff08\u63a8\u8350\uff09",h:3},{id:"\u65b9\u5f0f\u4e8c\uff1a\u624b\u52a8\u4fee\u6539\u7248\u672c\u53f7",title:"\u65b9\u5f0f\u4e8c\uff1a\u624b\u52a8\u4fee\u6539\u7248\u672c\u53f7",h:3},{id:"\u65b9\u5f0f\u4e09\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93",title:"\u65b9\u5f0f\u4e09\uff1a\u66f4\u65b0\u6240\u6709\u7c7b\u5e93",h:3}]}]}},demo:!1},this.codes=[]}static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-upgrade"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,o){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",o.codes)("item",o.item)},dependencies:[i.P],styles:["[_nghost-%COMP%]{display:block}"]})}return e})()}]}];let F=(()=>{class e{static#e=this.\u0275fac=function(t){return new(t||e)};static#t=this.\u0275mod=a.oAB({type:e});static#a=this.\u0275inj=a.cJS({imports:[G.m,R.Bz.forChild(D)]})}return e})()}}]);
\ No newline at end of file
diff --git a/311.d9a75ff48777da56.js b/311.d9a75ff48777da56.js
deleted file mode 100644
index 5d69a4481a..0000000000
--- a/311.d9a75ff48777da56.js
+++ /dev/null
@@ -1 +0,0 @@
-"use strict";(self.webpackChunksite=self.webpackChunksite||[]).push([[311],{30311:(F,r,l)=>{l.r(r),l.d(r,{DocsModule:()=>E});var G=l(52787),R=l(89359),O=l(93285),a=l(65879),s=l(28749);const P=[{path:"",component:O.S,children:[{path:"",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"acl",redirectTo:"acl/zh",pathMatch:"full"},{path:"acl/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"zh-CN":"docs/acl.md"},content:{"zh-CN":{content:'',meta:{order:50,title:"ACL",type:"Advance",url:"/acl/getting-started"},toc:[]}},demo:!1},this.codes=[]}}return(e=o).\u0275fac=function(t){return new(t||e)},e.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-acl"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,i){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",i.codes)("item",i.item)},dependencies:[s.P],styles:["[_nghost-%COMP%]{display:block}"]}),o})()},{path:"architecture",redirectTo:"architecture/zh",pathMatch:"full"},{path:"architecture/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"en-US":"docs/architecture.en-US.md","zh-CN":"docs/architecture.zh-CN.md"},content:{"en-US":{content:'
NG-ALAIN scaffold is a front-end solution to support middleware and back-end application. It is based on Angular and ng-zorro-antd(Angular implementation of Ant Design). The scaffold includes a set of common functionalities and business component libraries. It reduces lots of infrastructure development overwhelmingly and let you focus on business logic development.
Architecture Diagram
@delon/theme
Theme library of scaffold, we publish the theme library to NPM, which extremely simplifies upgrade effort.
Theme library includes not only essential styles(CSS tool like bootstrap) required by NG-ALAIN, but also a set of common data rendering(Pipe) and service tools(page title, scroll bar, etc..), which are needed during daily development.
@delon/abc
Scaffold provides a default set of business components, which abstract commonly used block/area in console service. We will continue to maintain and iterate the components. Provide more advanced abstract components than Ant Design base components to middleware and back-end business.
@delon/chart
@delon/chart chart library is customised based on G2. Providing commonly used chart suite in business development. It can be used alone or composed together to achieve more complex and fancy display effect.
The following is a description and use of each directory and file.
_mock
The Mock data rules directory, if you create a project via Command Line Tools, you can specify the --mock parameter to determine if the Mock function is required.
src/app/core/core.module.ts
The core module will only be imported once. Therefore, core service classes (eg, messages, data access, etc.) that are required for the entire ** business module should exist here.
src/app/core/i18n
Internationalization data loading and processing related classes. If you create a project via Command Line Tool, you can specify the -di parameter to determine whether internationalization support is required.
src/app/core/net
The default interceptor, where you can handle request parameters, request exceptions, business exceptions, and so on.
src/app/core/services/startup.service.ts
Useful when you need to execute some remote data (eg application information, user information, etc.) before Angular launches.
It is a simple method and returns a Promise object, unless Angular will abort the launch unless resolve(null) is explicitly executed.
src/app/layout
Layout file code, refer to the page structure section.
src/app/routes
Business module, all your business code will be here.
src/app/shared/shared.module.ts
The shared module means that some third-party modules, custom components, and custom instructions that you need to use for the entire business module should exist here. In addition, for @delon & NG-ZORRO, two shared secondary module imports, shared-delon.module.ts andshared-zorro.module.ts.
src/app/global-config.module.ts
Global configuration for @delon & NG-ZORRO.
src/environments
The application environment variable contains the following values:
\u811a\u624b\u67b6\u5185\u63d0\u4f9b\u4e86\u4e00\u5957\u9ed8\u8ba4\u4e1a\u52a1\u7ec4\u4ef6\uff0c\u8fd9\u4e9b\u7ec4\u4ef6\u62bd\u8c61\u4e86\u63a7\u5236\u53f0\u4e1a\u52a1\u4e2d\u7684\u4e00\u4e9b\u5e38\u89c1\u533a\u5757\u3002\u6211\u4eec\u5c06\u6301\u7eed\u7ef4\u62a4\u548c\u8fed\u4ee3\u8fd9\u4e9b\u7ec4\u4ef6\uff0c\u4e3a\u4e2d\u540e\u53f0\u4e1a\u52a1\u63d0\u4f9b\u6bd4 Ant Design \u57fa\u7840\u7ec4\u4ef6\u66f4\u9ad8\u7ea7\u522b\u7684\u62bd\u8c61
abc:pdf: fix ignore dependency pdfjs-dist (If you use local path to load the libary, you need to install the dependency yourself. pdfjs-dist depends on canvas, which may be slow to install dependencies due to environmental factors) (#1641) (#1641) (b987bab)
form:select: fix ignore reset option data when set onSearch (#1644) (1f8def7)
theme:http: fix missing content of HttpOptions (#1640) (28eeceb)
We have adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.
Open Development
All work on ng-alain\u3001delon happens directly. Both core team members and external contributors send pull requests which go through the same review process.
Bugs
We are using GitHub Issues for bug tracing. The best way to get your bug fixed via GitHub Issues and provide a reprduction with this template.
Before you reporting a bug, please make sure you\'ve searched exists issues, and read our FAQ.
Proposing a Change
If you intend to change the public API or introduce new feature that via GitHub Issues.
Your First Pull Request
Working on your first Pull Request? You can learn how from this free video series:
To help you get your feet wet and get you familiar with our contribution process, we have a list of good first issues that contain bugs or small features that have a relatively limited scope. This is a great place to get started.
If you decide to fix an issue, please be sure to check the comment thread in case somebody is already working on a fix. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it so other people don\u2019t accidentally duplicate your effort.
If somebody claims an issue but doesn\u2019t follow up for more than two weeks, it\u2019s fine to take over it but you should still leave a comment.
Sending a Pull Request
The core team is monitoring for pull requests. We will review your pull request and either merge it, request changes to it, or close it with an explanation.
Before submitting a pull request, please make sure the following is done:
Run yarn in the repository root.
If you\u2019ve fixed a bug or added code that should be tested, add tests!
Ensure the test suite passes (npm run test).
Make sure your code lints (npm run lint). Tip: Lint runs automatically when you git commit.
Make sure rebase your code to keep the history clean.
',meta:{order:40,title:"Contributing",type:"Other"},toc:[{id:"CodeofConduct",title:"Code of Conduct",h:2},{id:"OpenDevelopment",title:"Open Development",h:2},{id:"Bugs",title:"Bugs",h:2},{id:"ProposingaChange",title:"Proposing a Change",h:2},{id:"YourFirstPullRequest",title:"Your First Pull Request",h:2},{id:"SendingaPullRequest",title:"Sending a Pull Request",h:2},{id:"DevelopmentWorkflow",title:"Development Workflow",h:2,children:[{id:"delon",title:"delon",h:3},{id:"ng-alain",title:"ng-alain",h:3}]}]},"zh-CN":{content:'
\u5982\u679c\u4f60\u6709\u6539\u8fdb\u6211\u4eec\u7684 API \u6216\u8005\u65b0\u589e\u529f\u80fd\u7684\u60f3\u6cd5\uff0c\u540c\u6837\u6309\u7167 issues \u5448\u73b0\u7684\u6a21\u677f\u8ba4\u771f\u586b\u5199\u6bcf\u4e00\u9879\u3002
\u4e3a\u4e86\u80fd\u5e2e\u52a9\u4f60\u5f00\u59cb\u4f60\u7684\u7b2c\u4e00\u6b21\u5c1d\u8bd5\uff0c\u6211\u4eec\u7528 good first issues \u6807\u8bb0\u4e86\u4e00\u4e9b\u6bd4\u8f83\u6bd4\u8f83\u5bb9\u6613\u4fee\u590d\u7684 bug \u548c\u5c0f\u529f\u80fd\u3002\u8fd9\u4e9b issue \u53ef\u4ee5\u5f88\u597d\u5730\u505a\u4e3a\u4f60\u7684\u9996\u6b21\u5c1d\u8bd5\u3002
When the project is developed, you can package your app with just one line of command:
npm run build
NG-ALAIN itself is an Angular CLI project, so you can also complete more complex build requirements with Build. After the package is successfully packaged, the dist folder will be generated in the root directory, which is to build the packaged file, including several static files such as *.js, *.css, index.html.
JavaScript heap out of memory
Avoid executing ng build when throw error JavaScript heap out of memory:
When you need to distinguish between development and deployment, and test environments, you can configure the corresponding parameters according to different environments through the src/environments folder. The configuration items can also be called directly in the application. At the same time, you need to configure the configuration items in angular.json. Finally, you can change the environment configuration through commands.
Analyze the build file volume
If the build file is large, you can optimize your code by building and analyzing the volume distribution of dependent modules with the analyze command.
npm run analyze
View the analyze page:
npm run analyze:view
Release
When you are ready to deploy (release) your the app, you need only to publish the generated build artifacts - that is, the files in the dist folder - to your cdn or static server. Note that the index.html is usually the entry page for your app and handles all missing file requests. You may need to change the import path of the page after determining the static of js and css.
The default static resource reference path directly points to the directory where the dist folder is published. For example, if you post dist to the root directory of the ng-alain.com site, the requested URL is //ng-alain.com/***.js, //ng-alain.com/***.css, if dist is posted to a directory under a certain directory, such as v2, request The URL is //ng-alain.com/v2/***.js, //ng-alain.com/v2/***.css.
If your static resource is deployed to another domain name (such as a separate CDN address), you can specify a CDN address with the --deployUrl parameter.
ng build -deployUrl=//cdn.ng-alain.com/
The generated index.html with its *.js, *.css files will automatically refer to //cdn.ng-alain.com/*.js, //cdn.ng-alain.com/*css, respectively.
Routing strategy
Angular front-end routing has two different strategies: HashLocationStrategy and PathLocationStrategy. The former is routed by appending a # before a path, and the front-end routing management is performed by HTML5 History, while the latter is similar, but the path does not have # appended before it. Through the configuration of the server, the specified URL can be accessed to the current page, enabling front-end routing management.
If you want to use PathLocationStrategy, you need to replace RouterModule.forRoot(routes, { useHash: true }) of ./src/app/routes/routes-routing.module.ts with RouterModule.forRoot(routes), since that is the default Angular behavior. You might notice that this can also be done by changing the useHash variable in the src/environments/environment.*.ts files, depending on your project configulation. Importantly, your server needs to be correctly configured, such that is returns the index.html for any 404 errors:
Express server example:
app.use(express.static(path.join(__dirname, \'build\')));\n\napp.get(\'/*\', function (req, res) {\n res.sendFile(path.join(__dirname, \'build\', \'index.html\'));\n});
For more questions about Angular routing, please read official website.
Docker
NG-ALAIN provides a complete image file for building Angular projects based on the nginx WEB service. Where nginx is a mirror using nginx:1.13.5-alpine, which basically satisfies NG-ALAIN The project\'s good operating environment, if there are more needs, you can easily specify nginx.conf with docker run.
1. Building the image
Build a complete image of the runtime environment required by NG-ALAIN based on the Dockerfile.
docker build -t ng-alain .
2. Running
Based on compose (Recommended)
docker-compose up -d
The details can be modified with docker-compose.yml.
',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"Construct",title:"Construct",h:2,children:[{id:"JavaScriptheapoutofmemory",title:"JavaScript heap out of memory",h:3},{id:"Environmentalvariables",title:"Environmental variables",h:3},{id:"Analyzethebuildfilevolume",title:"Analyze the build file volume",h:3}]},{id:"Release",title:"Release",h:2,children:[{id:"Routingstrategy",title:"Routing strategy",h:3},{id:"Docker",title:"Docker",h:3},{id:"Containerdeployment",title:"Container deployment",h:3}]}]},"zh-CN":{content:'
',meta:{order:70,title:{"en-US":"Build & Deploy","zh-CN":"\u6784\u5efa\u548c\u53d1\u5e03"},type:"Dev"},toc:[{id:"\u6784\u5efa",title:"\u6784\u5efa",h:2,children:[{id:"JavaScriptheapoutofmemory",title:"JavaScript heap out of memory",h:3},{id:"\u73af\u5883\u53d8\u91cf",title:"\u73af\u5883\u53d8\u91cf",h:3},{id:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",title:"\u5206\u6790\u6784\u5efa\u6587\u4ef6\u4f53\u79ef",h:3}]},{id:"\u53d1\u5e03",title:"\u53d1\u5e03",h:2,children:[{id:"\u8def\u7531\u7b56\u7565",title:"\u8def\u7531\u7b56\u7565",h:3},{id:"Docker",title:"Docker",h:3},{id:"\u5bb9\u5668\u90e8\u7f72",title:"\u5bb9\u5668\u90e8\u7f72",h:3}]}]}},demo:!1},this.codes=[]}}return(e=o).\u0275fac=function(t){return new(t||e)},e.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-deploy"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,i){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",i.codes)("item",i.item)},dependencies:[s.P],styles:["[_nghost-%COMP%]{display:block}"]}),o})()},{path:"faq",redirectTo:"faq/zh",pathMatch:"full"},{path:"faq/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"en-US":"docs/faq.en-US.md","zh-CN":"docs/faq.zh-CN.md"},content:{"en-US":{content:'
Please check the FAQ below before asking questions.
Basic
Can\'t Bind to since it isn\'t a known property of
When you have multiple lazy modules, you want each submodule to use the component library (for example: NgZorroAntdModule, NgxTinymceModule) should be exported in ShareModule, please refer to module registration guidelines.
Expression Changed After It Has Been Checked Error
Common mistakes under Angular, this article will help you understand why.
Can\'t bind to \'formGroup\' since it isn\'t a known property of \'form\'
Common mistakes under Angular, the use of Reactive Forms requires the introduction of ReactiveFormsModule, refer to official documentation.
Why is the page not updated after the data is modified?
The NG-ZORRO and @delon/* components work in OnPush mode by default. Mutate objects or arrays do not trigger Angular\'s change detection. Use the immutable method.
How to use @delon daily build version
NG-ALAIN provides a delon-builds repository as a daily build version. It\'s not the final stable version, but contains the latest fixed BUG, To use the latest features, you can create delon.sh in the root directory:
When you need to use the daily build version of @delon, you only need to run:
bash delon.sh
If in Windows environment, please use WSL to execute Bash scripts.
Installation
Why can\'t I find the ng-zorro-antd/src/*.less style?
Two situations:
Using cnpm to install dependencies, you will not be able to find style files. This is because cnpm is in the form of a soft link path, which causes the ng-zorro-antd folder name to change, so it is recommended to use the yarn install dependency package instead.
The ng-zorro-antd version is too old to cause some components to fail to load into the appropriate style
yarn config set registry https://registry.npmmirror.com\nyarn config set sass_binary_site https://npmmirror.com/mirrors/node-sass\n# restore\nyarn config delete registry\nyarn config delete sass_binary_site
Configuration
How do I deploy the antd icon locally?
First, the latest iconfont file can go to this link (mirror) Download.
Finally, redefine the new path in src/styles/theme.less:
@icon-url: "/assets/iconfont";
Use an absolute path or CDN address.
Missing locale data for the locale "zh-cn"
For missing language imports, refer to app.module.ts.
How to deploy ng-alain.com documentation site in local
Online documents will only retain the data of the last three major version numbers. If the version is low, you can view it through local deployment:
git clone --depth 1 -b full https://github.com/ng-alain/archive-docs.git ng-alain-doc\ncd ng-alain-doc\nyarn\nyarn start
Fix the abnormal display of the lower part of the 360 browser
The built-in Chrome core of some 360 browsers is too low, resulting in some CSS3 not supported, you can manually increase .browserslistrc For more details, refer to #2310
',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"Basic",title:"Basic",h:2,children:[{id:"Can'tBindtosinceitisn'taknownpropertyof",title:"Can't Bind to since it isn't a known property of",h:3},{id:"ExpressionChangedAfterItHasBeenCheckedError",title:"Expression Changed After It Has Been Checked Error",h:3},{id:"Can'tbindto'formGroup'sinceitisn'taknownpropertyof'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"Whyisthepagenotupdatedafterthedataismodified",title:"Why is the page not updated after the data is modified?",h:3},{id:"Howtouse@delondailybuildversion",title:"How to use @delon daily build version",h:3}]},{id:"Installation",title:"Installation",h:2,children:[{id:"Whycan'tIfindtheng-zorro-antd/src/*.lessstyle",title:"Why can't I find the ng-zorro-antd/src/*.less style?",h:3},{id:"HowtouseTaobaosourcecorrectly",title:"How to use Taobao source correctly?",h:3}]},{id:"Configuration",title:"Configuration",h:2,children:[{id:"HowdoIdeploytheantdiconlocally",title:"How do I deploy the antd icon locally?",h:3},{id:'Missinglocaledataforthelocale"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"Howtodeployng-alain.comdocumentationsiteinlocal",title:"How to deploy ng-alain.com documentation site in local",h:3},{id:"Fixtheabnormaldisplayofthelowerpartofthe360browser",title:"Fix the abnormal display of the lower part of the 360 browser",h:3}]}]},"zh-CN":{content:'
',meta:{order:20,title:{"en-US":"FAQ","zh-CN":"\u5e38\u89c1\u95ee\u9898"},type:"Other"},toc:[{id:"\u57fa\u7840",title:"\u57fa\u7840",h:2,children:[{id:"Can'tBindtosinceitisn'taknownpropertyof",title:"Can't Bind to since it isn't a known property of",h:3},{id:"ExpressionChangedAfterItHasBeenCheckedError\u9519\u8bef",title:"Expression Changed After It Has Been Checked Error \u9519\u8bef",h:3},{id:"Can'tbindto'formGroup'sinceitisn'taknownpropertyof'form'",title:"Can't bind to 'formGroup' since it isn't a known property of 'form'",h:3},{id:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",title:"\u6570\u636e\u4fee\u6539\u540e\u9875\u9762\u4e3a\u4ec0\u4e48\u6ca1\u6709\u66f4\u65b0",h:3},{id:"\u5982\u4f55\u4f7f\u7528@delon\u6bcf\u65e5\u6784\u5efa\u7248\u672c",title:"\u5982\u4f55\u4f7f\u7528@delon\u6bcf\u65e5\u6784\u5efa\u7248\u672c",h:3}]},{id:"\u5b89\u88c5",title:"\u5b89\u88c5",h:2,children:[{id:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230ng-zorro-antd/src/*.less\u6837\u5f0f\uff1f",title:"\u4e3a\u4ec0\u4e48\u627e\u4e0d\u5230 ng-zorro-antd/src/*.less \u6837\u5f0f\uff1f",h:3},{id:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",title:"\u5982\u4f55\u6b63\u786e\u4f7f\u7528\u6dd8\u5b9d\u6e90\uff1f",h:3}]},{id:"\u914d\u7f6e",title:"\u914d\u7f6e",h:2,children:[{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72antd\u56fe\u6807\uff1f",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72 antd \u56fe\u6807\uff1f",h:3},{id:'Missinglocaledataforthelocale"zh-cn"',title:'Missing locale data for the locale "zh-cn"',h:3},{id:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",title:"\u5982\u4f55\u672c\u5730\u90e8\u7f72ng-alain.com\u6587\u6863",h:3},{id:"\u4fee\u590d360\u6d4f\u89c8\u5668\u4e0b\u90e8\u5206\u663e\u793a\u5f02\u5e38",title:"\u4fee\u590d360\u6d4f\u89c8\u5668\u4e0b\u90e8\u5206\u663e\u793a\u5f02\u5e38",h:3}]}]}},demo:!1},this.codes=[]}}return(e=o).\u0275fac=function(t){return new(t||e)},e.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-faq"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,i){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",i.codes)("item",i.item)},dependencies:[s.P],styles:["[_nghost-%COMP%]{display:block}"]}),o})()},{path:"getting-started",redirectTo:"getting-started/zh",pathMatch:"full"},{path:"getting-started/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"en-US":"docs/getting-started.en-US.md","zh-CN":"docs/getting-started.zh-CN.md"},content:{"en-US":{content:'
Foreword
NG-ALAIN is a production-ready solution for admin interfaces. Built on the design principles developed by Ant Design, this project introduces higher level components; we have developed templates, components, and a corresponding design kit to improve the user and development experience for admin interfaces.
Please make sure global Angular Cli is latest version via ng version command, please refer to CLI Command Reference for how to upgrade.
yarn global add @angular/cli\nng new my-project --style less --routing --package-manager yarn\ncd my-project\nng add ng-alain\nyarn start\n# Or use HMR mode by: yarn run hmr
git clone --depth=1 https://github.com/ng-alain/ng-alain.git my-project\ncd my-project\nyarn\nyarn start\n# Or use HMR mode by: yarn run hmr
Note: Installing with the CLI is a clean scaffolding; using clone the git repository include all example pages.
Scaffolding
NG-ALAIN is a standard Angular CLI project that includes common routes for admins and demonstrates our component library. The project layout is as follows:
For questions on how to use ng-alain, please post questions to using the ng-alain tag.
As always, we encourage experienced users to help those who are not familiar with ng-alain!
DONATE
If you would like to \n to NG-A
',meta:{order:10,title:"Getting Started",type:"Basic",i18n:"need-update"},toc:[{id:"Foreword",title:"Foreword",h:2},{id:"Preparation",title:"Preparation",h:2},{id:"Installation",title:"Installation",h:2,children:[{id:"CLIRecommend",title:"CLI (Recommend)",h:3},{id:"ClonetheGitRepository",title:"Clone the Git Repository",h:3}]},{id:"Scaffolding",title:"Scaffolding",h:2},{id:"Development",title:"Development",h:2},{id:"EnvironmentSupport",title:"Environment Support",h:2},{id:"Contributing",title:"Contributing",h:2},{id:"NeedHelp",title:"Need Help?",h:2},{id:"DONATE",title:"DONATE",h:2}]},"zh-CN":{content:'
\u4ec0\u4e48\u662fNG-ALAIN
NG-ALAIN \u662f\u4e00\u4e2a\u4f01\u4e1a\u7ea7\u4e2d\u540e\u53f0\u524d\u7aef/\u8bbe\u8ba1\u89e3\u51b3\u65b9\u6848\u811a\u624b\u67b6\uff0c\u6211\u4eec\u79c9\u627f Ant Design \u7684\u8bbe\u8ba1\u4ef7\u503c\u89c2\uff0c\u76ee\u6807\u4e5f\u975e\u5e38\u7b80\u5355\uff0c\u5e0c\u671b\u5728Angular\u4e0a\u9762\u5f00\u53d1\u4f01\u4e1a\u540e\u53f0\u66f4\u7b80\u5355\u3001\u66f4\u5feb\u901f\u3002\u968f\u7740\u300e\u8bbe\u8ba1\u8005\u300f\u7684\u4e0d\u65ad\u53cd\u9988\uff0c\u5c06\u6301\u7eed\u8fed\u4ee3\uff0c\u9010\u6b65\u6c89\u6dc0\u548c\u603b\u7ed3\u51fa\u66f4\u591a\u8bbe\u8ba1\u6a21\u5f0f\u548c\u76f8\u5e94\u7684\u4ee3\u7801\u5b9e\u73b0\uff0c\u9610\u8ff0\u4e2d\u540e\u53f0\u4ea7\u54c1\u6a21\u677f/\u7ec4\u4ef6/\u4e1a\u52a1\u573a\u666f\u7684\u6700\u4f73\u5b9e\u8df5\uff0c\u4e5f\u5341\u5206\u671f\u5f85\u4f60\u7684\u53c2\u4e0e\u548c\u5171\u5efa\u3002
\u5b89\u88c5\u4e4b\u524d\u8bf7\u5148\u786e\u4fdd\u672c\u5730\u5df2\u7ecf\u5b89\u88c5\u5168\u5c40 Angular Cli\uff0c\u53ea\u6709\u8fd9\u6837\u624d\u80fd\u968f\u65f6\u968f\u5730\u5728\u7ec8\u7aef\u4f7f\u7528 ng \u547d\u4ee4\uff0c\u53ef\u4ee5\u901a\u8fc7\u7ec8\u7aef\u7a97\u53e3\u4e2d\u8fd0\u884c\uff1a
We add support of global configuration to many components. You can define the default behavior of the component through global configuration, thus reducing the code that needs to be written in the template, and support changing global config at runtime.
How to Use?
If you want to provide default configurations to some components, you should provide an object that implements the interface AlainConfig with the injection token ALAIN_CONFIG, in the root module (in another word, to the root injector). Like this:
',meta:{order:90,title:{"en-US":"Global Configuration","zh-CN":"\u5168\u5c40\u914d\u7f6e\u9879"},type:"Dev"},toc:[{id:"HowtoUse",title:"How to Use?",h:2},{id:"AboutNG-ZORRO",title:"About NG-ZORRO",h:2}]},"zh-CN":{content:'
As you begin your business development on NG-ALAIN, i recommend that you first review the following documents, which is very helpful for everyone on the team.
NG-ALAIN\'s base component library comes from NG-ZORRO, so you can get a very detailed API documentation for its use on the official website. For ng components provided by -alain are obtained through the component page.
Second, the startup process
NG-ALAIN is a scaffold that can be used directly in production environments. The prerequisite for understanding these details is that you have a certain knowledge of Angular. The following documents may be helpful to you before you start:
When running an app via ng serve, a complete Angular startup process would look like this:
Trigger APP_INITIALIZER (the scaffolding implementation is implemented in StartupService.load) to get the application information.
Trigger service routing (src/app/routes/routes-routing.module.ts` for scaffolding)
Rendering components
1) APP_INITIALIZER
From a mid and back-office perspective, NG-ALAIN always believes that a network request is required to get some application information (eg menu data, user data, etc.) before Angular starts.startup.service.ts\uff1bIt returns a Promise object, which always needs to be called: resolve() to ensure that Angular starts normally.
Network requests may encounter a 403 error because the scaffolding uses the user authentication module by default and always assumes that all requests must be a valid user authorization. For more documentation see:
After obtaining the application information, you need to assign some values \u200b\u200bto the built-in services of the scaffolding, including:
Application Information
Including: application name, description, year, information can be directly injected into the SettingsService (API) and directly in the HTML template.
this.settingService.setApp(res.app);
User Info
Including: name, avatar, email address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.
this.settingService.setUser(res.user);
Layout information
Including: name, avatar, email, address, etc., information can be directly injected into the SettingsService (API) and directly in the HTML template.
// Whether to fix the top menu\nthis.settingService.setLayout(`fixed`, false);\n// Whether to collapse the right menu\nthis.settingService.setLayout(`collapsed`, false);
Menu data
NG-ALAIN takes menu from the remote and can also inject MenuService (API) to change the menu data. Of course, it is more reasonable to perform menu assignment before Angular starts.
Menu data Make sure ensure Menu format, menu data throughout Applications, for example: page header auto navigation page-header, page title text TitleService Wait.
this.menuService.add(res.menu);
Page title
If the page title always wants to add the application name as a suffix, you can re-adjust the suffix attribute value by injecting TitleService(API).
// Set the suffix of the page title\nthis.titleService.suffix = res.app.name;
ACL
this.aclService.setFull(true);
It is recommended to load the ACL access control permission data before starting. For more details, please refer to Access Control List.
Globalization
It is recommended to load the internationalization package first before starting, which will ensure that the page is rendered as the target language after the project is started. See Internationalization for more details.
Above we used the LayoutDefaultComponent base layout in the business module. User authorization uses LayoutPassportComponent user authorization layout and the full screen layout.
It is recommended that all submodules be loaded using a lazy module, such as the TradeModule order module, which organizes the code structure more efficiently.
Under what circumstances do you not use lazy loading?
Angular startup from the top-level component. When a lazy module is encountered, it will initiate a script request. At this time, the dashboard or login page will be blank due to network requests, which is not good for the experience.
Routing permission control
The routing URL may be affected by the browser\'s own historical memory, so that users may access the unprivileged route. If you want a better experience, you need to configure the canActivate option on the route. When the user has no permission, it will utomatically jump to the relevant page. see the ACL Routing Guard section for details.
IDE
A developer must first sharpen his tools if he is to do his work well, NG-ALAIN recommended to use the Visual Studio Code IDE, because ng-alain adds some extra features to VSCode to better help you. Development.
',meta:{order:0,title:"How to start",type:"Dev",i18n:"need-update"},toc:[{id:"First,pre-orderpreparation",title:"First, pre-order preparation",h:2},{id:"Second,thestartupprocess",title:"Second, the startup process",h:2,children:[{id:"1APP_INITIALIZER",title:"1) APP_INITIALIZER",h:3},{id:"2Businessrouting",title:"2) Business routing",h:3},{id:"Underwhatcircumstancesdoyounotuselazyloading",title:"Under what circumstances do you not use lazy loading?",h:3},{id:"Routingpermissioncontrol",title:"Routing permission control",h:3}]},{id:"IDE",title:"IDE",h:2,children:[{id:"Codefragment",title:"Code fragment",h:3},{id:"Classstylesmartreminder",title:"Class style smart reminder",h:3}]}]},"zh-CN":{content:'
Angular\u4e2d\u6587\u6587\u6863\uff0c\u5efa\u8bae\u4e00\u5b9a\u8981\u82b1\u65f6\u95f4\u9605\u8bfb\u6587\u6863\u90e8\u5206\uff0c\u900f\u8fc7\u5b83\u57fa\u672c\u4e0a\u5c31\u53ef\u4ee5\u5b66\u4f1a Angular\uff1b\u540c\u65f6\uff0c\u4e5f\u662f Angular API \u63a5\u53e3\u6587\u6863
Ant Design \u6307\u5f15\u6587\u7ae0\uff0c\u5b66\u4e60 Ant Design \u7684\u8bbe\u8ba1\u7406\u5ff5\uff0c\u975e\u5e38\u503c\u5f97\u9605\u8bfb\u7684\u90e8\u5206
Angular internationalization provides a solution for extracting language files, but for NG-ALAIN, this is not the best way; this is mainly limited by @Delon/* The component library needs to provide a set of dynamic translation Service, therefore, NG-ALAIN has built-in a simple internationalized service ALAIN_I18N_TOKEN interface.
How to configure
Scaffolding is composed of two important parts: ng-zorro-antd and @delon/*. These two libraries have their own international configuration. When internationalizing, they need to be the same for these libraries. Language configuration.
Angular
Angular configuration is mainly for currency, date format, etc., such as Chinese version:
import { registerLocaleData } from \'@angular/common\';\nimport zh from \'@angular/common/locales/zh\';\nregisterLocaleData(zh);
ng-zorro-antd
ng-zorro-antd internationalization defaults to the Chinese version, for example the default English version:
@delon/* class library has many data interface properties with the i18n typeface (for example: page-header, st column description, Menu menu data, etc.) when you want the data for these components. When the interface can dynamically switch automatically according to the Key value in the current language, you also need to define a self-implementation service interface for ALAIN_I18N_TOKEN (for example: I18NService /master/src/app/core/i18n/i18n.service.ts)) and register under the root module.
import { ALAIN_I18N_TOKEN } from \'@delon/theme\';\nimport { I18NService } from \'@core\';\n\n@NgModule({\n ...\n providers: [\n { provide: ALAIN_I18N_TOKEN, useClass: I18NService, multi: false }\n ]\n})\nexport class AppModule {}
i18n pipe
In order not to be named by the third-party pipes, the scaffolding contains a i18n pipe, which is equivalent to calling the fanAIN method of ALAIN_I18N_TOKEN directly.
| i18n will not listen to language change notifications, so there will be better performance. When you explicitly re-render the Angular project after switching languages, | i18n will be more suitable.
How to add
When creating scaffolding from command lineng add ng-alain, it is allowed to specify --i18n to indicate whether the internationalized sample code is included.
How to delete
The sample code covers the following:
src/app/core/i18n directory
Replace the pipe of i18n that may appear in the default layout using | i18n
Default language
Regardless of whether internationalization is required or not, since the default languages \u200b\u200bof class libraries such as Angular, ng-zorro-antd, @delon/* are different, it is also necessary to ensure that the default language of these libraries is the same type. A simple example approach to understand the current language situation for each type of library:
import { Component } from \'@angular/core\';\n\n@Component({\n selector: \'app-i18n-test\',\n template: `\n <h2>angular</h2>\n <p>Date: {{now | date}}</p>\n <h2>ng-zorro-antd</h2>\n <nz-transfer [nzDataSource]="[]"></nz-transfer>\n <h2>@delon</h2>\n <div style="width: 200px">\n <tag-select>\n <nz-tag>1</nz-tag>\n </tag-select>\n </div>`,\n})\nexport class I18nTestComponent {\n now = new Date();\n}
Example
In order to make language uniformity, NG-ALAIN provides a simple unified configuration in the AppModule root module.
Chinese Version
// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/zh\';\nimport { NZ_I18N, zh_CN as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, zh_CN as delonLang } from \'@delon/theme\';\nconst LANG = {\n abbr: \'zh\',\n ng: ngLang,\n zorro: zorroLang,\n delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n { provide: LOCALE_ID, useValue: LANG.abbr },\n { provide: NZ_I18N, useValue: LANG.zorro },\n { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}
English version
// #region i18n\nimport { default as ngLang } from \'@angular/common/locales/en\';\nimport { NZ_I18N, en_US as zorroLang } from \'ng-zorro-antd/i18n\';\nimport { DELON_LOCALE, en_US as delonLang } from \'@delon/theme\';\nconst LANG = {\n abbr: \'en\',\n ng: ngLang,\n zorro: zorroLang,\n delon: delonLang,\n};\n// register angular\nimport { registerLocaleData } from \'@angular/common\';\nregisterLocaleData(LANG.ng, LANG.abbr);\nconst LANG_PROVIDES = [\n { provide: LOCALE_ID, useValue: LANG.abbr },\n { provide: NZ_I18N, useValue: LANG.zorro },\n { provide: DELON_LOCALE, useValue: LANG.delon },\n];\n// #endregion\n\n@NgModule({\n providers: [...LANG_PROVIDES],\n})\nexport class AppModule {}
Command Line
Use the defaultLanguage plugin to quickly switch between the default locales.
Internationalized routing
If you want to toggle internationalization by routed URLs, e.g. by accessing /zh and /en to change the language, just use the alainI18nCanActivate guard in the root route:
Where :i18n is a fixed value of the parameter, which can be adjusted by the Global ConfigurationparamNameOfUrlGuard.
',meta:{order:30,title:{"en-US":"I18n","zh-CN":"\u56fd\u9645\u5316"},type:"Advance"},toc:[{id:"Howtoconfigure",title:"How to configure",h:2,children:[{id:"Angular",title:"Angular",h:3},{id:"ng-zorro-antd",title:"ng-zorro-antd",h:3},{id:"@delon",title:"@delon",h:3}]},{id:"ALAIN_I18N_TOKEN",title:"ALAIN_I18N_TOKEN",h:2,children:[{id:"i18npipe",title:"i18n pipe",h:3}]},{id:"Howtoadd",title:"How to add",h:2},{id:"Howtodelete",title:"How to delete",h:2},{id:"Defaultlanguage",title:"Default language",h:2,children:[{id:"Example",title:"Example",h:3},{id:"CommandLine",title:"Command Line",h:3}]},{id:"Internationalizedrouting",title:"Internationalized routing",h:2}]},"zh-CN":{content:'
In addition to the NG-ALAIN base component and the @delon business component, sometimes we need to reference other external class libraries, the following is how to use the rich text component ngx-tinymce:
Angular Component
Installing dependencies
yarn add ngx-tinymce
Import module
You may need to use rich editor in all submodules, as it\'s recommended to import and export them in the SharedModule module.
// #region third libs\nimport { NgxTinymceModule } from \'ngx-tinymce\';\nconst THIRDMODULES = [ NgxTinymceModule ];\n// #endregion
The region: third libs region is a coding convention for NG-ALAIN, register all third-party components into the THIRDMODULES variable, for more coding conventions, refer to Style Guide.
For some third-party components, may be required global configuration. It\'s recommended to register in the root module, for example:
import { NgxTinymceModule } from \'ngx-tinymce\';\n@NgModule({\n imports: [\n BrowserModule,\n NgxTinymceModule.forRoot({\n baseURL: \'//cdn.bootcss.com/tinymce/4.7.13/\'\n })\n ]\n})\nexport class AppModule { }
Next you can use ngx-tinymce in any submodule:
<tinymce [(ngModel)]="html"></tinymce>
Non-Angular Component
Referencing a non-Angular component is actually loading a JavaScript class library file, such as the QR code library qrious:
Installing dependencies
yarn add qrious
Import Scripts
Add qrious.min.js to the scripts node in angular.json:
If the third-party library requires additional styles, you also need to add a path to styles.
Note: You need to re-run ng s.
Lazy loading script
The above import script method will package the code directly into scripts.js, which will cause the scripts.js to become larger. NG-ALAIN provides another delayed loading CDN library script solution for low-usage services. (Example: zip compression), you can use LazyService to delay loading remote CDN scripts.
declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n constructor() {\n const qr = new QRious();\n }\n}',meta:{order:60,title:"Use a third-party lib",type:"Dev"},toc:[{id:"AngularComponent",title:"Angular Component",h:2,children:[{id:"Installingdependencies",title:"Installing dependencies",h:3},{id:"Importmodule",title:"Import module",h:3}]},{id:"Non-AngularComponent",title:"Non-Angular Component",h:2,children:[{id:"Installingdependencies",title:"Installing dependencies",h:3},{id:"ImportScripts",title:"Import Scripts",h:3},{id:"Howtouse",title:"How to use",h:3}]}]},"zh-CN":{content:'
declare var QRious: any;\n\n@Component()\nexport class DEMOComponent {\n constructor() {\n const qr = new QRious();\n }\n}',meta:{order:60,title:"\u4f7f\u7528\u7b2c\u4e09\u65b9\u7c7b\u5e93",type:"Dev"},toc:[{id:"Angular\u7ec4\u4ef6",title:"Angular\u7ec4\u4ef6",h:2,children:[{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u6ce8\u518c",title:"\u6ce8\u518c",h:3}]},{id:"\u975eAngular\u7ec4\u4ef6",title:"\u975eAngular\u7ec4\u4ef6",h:2,children:[{id:"\u5b89\u88c5\u4f9d\u8d56\u5305",title:"\u5b89\u88c5\u4f9d\u8d56\u5305",h:3},{id:"\u5bfc\u5165\u811a\u672c",title:"\u5bfc\u5165\u811a\u672c",h:3},{id:"\u4f7f\u7528",title:"\u4f7f\u7528",h:3}]}]}},demo:!1},this.codes=[]}}return(e=o).\u0275fac=function(t){return new(t||e)},e.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-import"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,i){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",i.codes)("item",i.item)},dependencies:[s.P],styles:["[_nghost-%COMP%]{display:block}"]}),o})()},{path:"mock",redirectTo:"mock/zh",pathMatch:"full"},{path:"mock/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"zh-CN":"docs/mock.md"},content:{"zh-CN":{content:'',meta:{order:60,title:"Mock",type:"Advance",url:"/mock/getting-started"},toc:[]}},demo:!1},this.codes=[]}}return(e=o).\u0275fac=function(t){return new(t||e)},e.\u0275cmp=a.Xpm({type:e,selectors:[["app-docs-mock"]],decls:1,vars:2,consts:[[3,"codes","item"]],template:function(t,i){1&t&&a._UZ(0,"app-docs",0),2&t&&a.Q6J("codes",i.codes)("item",i.item)},dependencies:[s.P],styles:["[_nghost-%COMP%]{display:block}"]}),o})()},{path:"module",redirectTo:"module/zh",pathMatch:"full"},{path:"module/:lang",component:(()=>{var e;class o{constructor(){this.item={cols:1,urls:{"en-US":"docs/module.en-US.md","zh-CN":"docs/module.zh-CN.md"},content:{"en-US":{content:'
The AppModule, CoreModule, and SharedModule modules have not been used very clearly, and it is easy to use them. The goal of the Angular module is to make components, instructions, services, and pipeline function blocks more cohesive, and each functional area forms a separate set of business domains or utilities.
1) Classification description
AppModule
The root module is used to guide Angular startup. It is very suitable for importing some modules that need to be used everywhere in the application. Such as: theme system, user master authentication module, permission module, global HTTP interceptors, international services, etc..
CoreModule
The core module will only be imported once. It is equivalent to AppModule, but we should treat it as a pure service class module. For example: message, data access, etc.
SharedModule
We call it a shared module. It should not have providers because ShareModule will be imported in all business modules. Which will cause the service to be overwritten.
NG-ZORRO, @delon/abc, @delon/chart, etc. have changed from all import to on-demand import since version 11. For this reason, NG-ALAIN has refined two files shared-delon.module.ts and shared -zorro.module.ts merges some modules frequently used throughout the project into a module called SharedModule, which is why it is necessary to import it in the business module for the first time. Although this method can reduce unnecessary import code, it will also cause compilation speed. Therefore, it is not recommended to put all components into SharedModule, and try to put the modules that need to be used more than three times before putting them here; Otherwise, you must import it yourself in the business module.
For some functional modules that may be referenced in multiple places, it is recommended to refine the management into unified management of business components. These components generally have the following characteristics:
Only responsible for a relatively independent, stable function;
no separate routing configuration;
May be purely static, controlled only by parameters passed by the parent component (usually a page).
Let\'s take a simple static component as an example. Suppose your app often needs to display images. These images are fixed in width, have a gray background and a certain padding, and have text descriptions, like the following:
You can do this with a component that has a default style and can receive the parameters passed by the parent component for display.
Create a new file
Create a new folder named components under src/app/shared. Create folder called image-wrapper and component file. If required add ts files index.ts and style files index.less. Provide README.md for component API descriptions in this folder.
When using components, the default is to look for the export object in index.ts. If your component is more complex, you can split it into multiple files, and finally unify the export in index.ts, like this:
// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';
Where you want to use this component, just follow the component-defined API input parameters and use it directly:
<image-wrapper\n src="https://os.alipayobjects.com/rmsportal/mgesTPFxodmIwpi.png"\n desc="schematic-diagram"></image-wrapper>',meta:{order:20,title:{"en-US":"New Component","zh-CN":"\u65b0\u589e\u4e1a\u52a1\u7ec4\u4ef6"},type:"Dev"},toc:[{id:"Createanewfile",title:"Create a new file",h:2},{id:"Register",title:"Register",h:2},{id:"Use",title:"Use",h:2}]},"zh-CN":{content:'
// main.component.ts\nexport class MainComponent {}\n\n// sub.component.ts\nexport class SubComponent {}\n\n// index.ts\nexport MainComponent from \'./main.component\';\nexport SubComponent from \'./sub.component\';
\u5728\u8981\u4f7f\u7528\u8fd9\u4e2a\u7ec4\u4ef6\u7684\u5730\u65b9\uff0c\u6309\u7167\u7ec4\u4ef6\u5b9a\u4e49\u7684 API \u4f20\u5165\u53c2\u6570\uff0c\u76f4\u63a5\u4f7f\u7528\u5c31\u597d\uff1a
Angular renders a page in a component tree, the actual development is to organize the code in a module tree to make it better to resuse code. For module granularity depends on the requirements, ng-alain is positioned in the middle of the front-end. Therefore, it is recommended to organize your code structure from a business perspective.
NG-ALAIN provides a very rich set of Schematics templates to quickly create templates and pages that match NG-ALAIN features, as well as a variety of pluggable plugins.
Additionally: NG-ALAIN is a standard Angular CLI project, you can still use the default command line.
First, the module
To create a page, you need to create a module first. If you need a system to set the relevant module, execute the command:
ng g ng-alain:module sys
The CLI will automatically create sys.module.ts and sys-routing.module.ts files under src/app/routes/sys, the former is the system setup module component definition file; the latter is the system setup module routing Configuration file.
// sys.module.ts\nimport { NgModule, Type } from \'@angular/core\';\nimport { SharedModule } from \'@shared\';\nimport { SysRoutingModule } from \'./sys-routing.module\';\n\nconst COMPONENTS: Type[] = [];\n\n@NgModule({\n imports: [SharedModule, SysRoutingModule],\n declarations: COMPONENTS,\n})\nexport class SysModule {}
The function of the module is to import the modules we need. All NG-ZORRO, @delon/abc, @delon/chart, etc. are loaded on demand. The external components are imported wherever the current business page needs. In order to reduce these import actions, NG -ALAIN has refined two files shared-delon.module.ts and shared-zorro.module.ts to merge some modules frequently used throughout the project into a module called SharedModule, which is why it is necessary Import it in the business module for the first time. Note: It is not recommended to put all the components in SharedModule, as far as possible, put the modules that need to be used two or three times or more.
And the routing configuration module:
// sys-routing.module.ts\nimport { NgModule } from \'@angular/core\';\nimport { RouterModule, Routes } from \'@angular/router\';\n\nconst routes: Routes = [];\n\n@NgModule({\n imports: [RouterModule.forChild(routes)],\n exports: [RouterModule],\n})\nexport class SysRoutingModule {}
By now, you can safely start developing business pages like menu management, logging, system configuration, etc. in the sys directory.
Second, the page
Use the ng generate (abbreviated as: ng g) command to create a log list page in the sys directory:
Of course, the log may be a very rich piece of information, you can add a view page opened in a modal box to display more details.
ng g ng-alain:view view -m=sys -t=log
-t=log indicates that you want to put the created file under sys/log/view',meta:{order:10,title:{"en-US":"New Page","zh-CN":"\u65b0\u589e\u9875\u9762"},type:"Dev"},toc:[{id:"First,themodule",title:"First, the module",h:2},{id:"Second,thepage",title:"Second, the page",h:2}]},"zh-CN":{content:'
Divided into JavaScript script files and CSS files. The following only describes the script part. For the CSS file, please refer to Optimize Theme System.
Note: It is recommended to always prioritize business, optimize to the post- criteria, and have some understanding of NG-ALAIN before starting to optimize. The optimization scheme in this chapter will change with the change of the version. Please pay attention to the details.
Structure description
In general, there are two files that are larger after the build: scripts.js and main.js, and our optimization is mainly for these two items.
scripts.js
It comes from a collection of scripts nodes of angular.json, so the size of this file depends on the size of the third-party component referenced by the scripts node.
In general, you should put it under scripts when you are using non-Angular third-party components.
main.js
Using ng build by default will package all @angular/*, ng-zorro-antd, @delon/* and some third-party Angular components. Unless you use the --vendor-chunk parameter to separate these classes library.
Optimization object
We know that the resource file packaged by Angular Cli will contain the hashing value of the file. Which is like the unique identifier of the file. If the module is not modified, no new hashing value will be generated. This ensures that after the user downloads the resource for the first time. No matter how we build the user again, there is no need to download it again.
In fact, Angular Cli defaults to --vendor-chunk. The main factor is that these @angular/* are very fast relative to iteration.
According to NG-ALAIN\'s module registration guidelines, generate two shared-delon.module.ts andshared-zorro.module.ts produced are the summary of the import of secondary modules shared by @Delon and NG-ZORRO.
@delon/abc,@delon/chart, ng-zorro-antd The three main libraries all support secondary imports. Only selecting the modules required by the project will effectively solve the problem of package size.
Conclusion
After NG-ZORRO provides better optimization support, we will release #684 and hope to have a better package size. Expected res
NG-ALAIN is a single-page application based on the Angular technology stack. We provide development models for front-end code and native analog data.\nWork in the form of the Restful API with the server application of any technology stack. The basics of interacting with the server are briefly described below.
Front-end request process
In NG-ALAIN, a complete front-end UI interaction to the server-side processing flow looks like this:
Start Angular for the first time to execute APP_INITIALIZER;
UI component interaction;
Send the request using the encapsulated _HttpClient;
Trigger the user authentication interceptor @delon/auth and add the token parameter uniformly;
If there is no token or an expired interrupt subsequent request, jump directly to the login page;
Trigger the default interceptor to process the prefix and other information;
Get the server back;
Trigger the default interceptor to handle request exceptions, business exceptions, etc.
Update the data and refresh the UI.
Interceptor
By default, two interceptors are registered in the root module.SimpleInterceptor with DefaultInterceptorAnd the execution order is executed in the registration order.
SimpleInterceptor
User Authentication has built-in interceptors for automatically adding token parameters to requests. There is also a JWTInterceptor interceptor, which is a standard JWT specification. If the backend uses standard JWT, it can be directly replaced with a JWTInterceptor interceptor.
DefaultInterceptor
DefaultInterceptor The interceptor simply provides an interceptor. By default, it contains sample code that handles server request prefixes, handles request exceptions, and business exceptions. You can make adjustments based on your own needs.
Important point
We can put the next.handle(req) as the demarcation point in the interceptor intercept method. The first part is the request and the pipe part is the post. This will make it clearer which part is to be done before the request and which part will be executed after the request. For more information on interceptors, please refer to the official website.
Development environment
Under normal circumstances, the development environment and the production environment are not the same back-end request source. You can actually configure it under the environment directory. environment.ts and environment.prod.ts Change the request source for different environments.
environment is actually a JSON object, you can organize different forms to meet the problem of multiple request sources.
Mock
Sometimes when you want to develop the front-end first, you can use @delon/mock to simulate the request data. The actual principle is to use the interceptor to directly return the data to the matching URL instead of sending an HTTP request. By default, it is only valid for the test environment. Of course, you usually need to make sure that the data of the Mock interface is consistent with the backend. You can create the corresponding Mock interface in the _mock directory:
So for the test environment, when the /users request is encountered, the {users: [1, 2], total: 2 } data is returned directly. See here for more Mock syntax and usage.
Note: When you don\'t need a Mock interface for a request, be sure to comment out or remove it.
Cors
Most applications will be front-end is separate from the back-end, which leads to CORS factors when a request is made to the back end, such as:
Note: If the request does not start with http, each request will add environment.SERVER_URL as the leading edge of the request URL.
The following error is returned directly:
Access to XMLHttpRequest at \'http://192.168.1.100/api/app\' from origin \'http://localhost:4200\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource.
There are usually two ways to solve cross-domain problems. One is to allow the back-end development environment to directly support CORS requests (not recommended, but simplest), the second is to use Angular Cli to provide Proxy Support, the development proxy server will forward the domain and port of the request sent by Angular to the backend Server, CORS is a security restriction of the browser. There is no problem with CORS before the proxy server and the backend server. This is why many people try to make it clear that they can be requested in Postman but not in Angular.
Assuming that all backend requests are prefixed with /api, you can configure all this prefix in proxy.conf.js to forward to the new backend, for example:
secure If the proxy target address is https, it should be set to true, otherwise it is false
pathRewrite Rewrite the address, such as pathRewrite: {\'^/api\':\'/\'} to change the prefix /api to /
changeOrigin Change the host of the host header to the target URL. Some backends will judge whether it is valid according to its value. You may need to set true
logLevel Set to debug to display the message forwarded by the agent on the terminal
Q: The request may be rejected or returned directly to 401?
Scaffolding uses the SimpleInterceptor interceptor of @delon/auth by default, which causes an error to be returned directly if a token cannot be obtained during the request.
Access to XMLHttpRequest at \'http://192.168.1.100/api/app\' from origin \'http://localhost:4200\' has been blocked by CORS policy: No \'Access-Control-Allow-Origin\' header is present on the requested resource.
The project built by Angular CLI is already very good in terms of its directory structure. Official website also has an Angular Style Guide (Chinese version) Style guide. It is recommended to read it several times. In addition, NG-ALAIN also has a part of the coding style, the following instructions may be useful for reading the code.
Consistent code style
NG-ALAIN uses ESLint to guarantee code quality and Prettier to optimize the code style.
It is recommended to install several plugins for more friendly development in vscode:
Of course, NG-ALAIN has prepared a complete set of extension packs for everyone, just install NG-ALAIN Extension Pack.
Git - pre commit Hook
The ng lint command provided by Angular, can be very effective in helping us find bugs and readability earlier. Isn\'t it cool if we can guarantee that the lint of the file in staged is automatically done before each commit in the team development process?
NG-ALAIN is configured to do lint each time you commit to staged and you can\'t commit if you find an error.
By default, the *.ts, *.less commit process forces the formatting of the code. You can change the rules by modifying the husky node of package.json.
If hint: The\'.husky/pre-commit\' hook was ignored because it\'s not set as executable. is generated when executing git commit -m "commit", it may be due to permission issues. Try to execute in the project root directory:
chmod ug+x .husky/*\nchmod ug+x .git/hooks/*
Style guide
API documentation
Applications are always inevitable for the development of business components. We can not guarantee that you can remember these after a certain time. So, make sure to include the README.md document in each business component and describe the API, DEMO and other information.
For example:
## When do you use it?\n\nInstruction\n\n## DEMO\n\nInstruction\n\n## API\n\nParameter | Description | Type | Default\n----|------|-----|------\nsrc | The map\'s address | `string` | -
NG-ALAIN is configured with some options for the CLI to better code.
CLI
Vscode is the best choice for writing Angular. You can type: ng g c list in any directory of the project to generate the corresponding files for the component.
NG-ALAIN is configured by default without generating style files & unit tests. So you will see that only .ts, .html are generated. This is because NG-ALAIN provides a very rich style API, and custom styles are not just needed on most pages. At the same time, unit tests.
Of course, you can easily adjust the default configuration in angular.json.
VSCode snippets
VSCode is the best choice for writing Angular. Naturally NG-ALAIN also created the corresponding snippets extension: ng-zorro-vscode and ng-alain-vscode
\u82e5\u5728\u6267\u884c git commit -m "commit" \u65f6\u82e5\u4ea7\u751f hint: The \'.husky/pre-commit\' hook was ignored because it\'s not set as executable. \u65f6\uff0c\u53ef\u80fd\u662f\u56e0\u4e3a\u6743\u9650\u95ee\u9898\uff0c\u53ef\u4ee5\u5c1d\u8bd5\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u6267\u884c\uff1a
vscode \u662f\u7f16\u5199 Angular \u6700\u4f73\u7684\u9009\u62e9\uff0c\u4f60\u53ef\u4ee5\u5728\u9879\u76ee\u7684\u4efb\u4f55\u76ee\u5f55\u91cc\u8f93\u5165\uff1ang g c list \u751f\u6210\u7ec4\u4ef6\u7684\u76f8\u5e94\u7684\u6587\u4ef6\u3002
This guide applies to the current version ng-alain >= 15;\nIf you encounter problems during the upgrade process, feel free to comment here.\nIf you find any errors in this guide, please point out\nOr you have encountered a new problem and solved it, welcome to comment here.
Before upgrade
Make sure Node.js >= 16.10.0.
Create a new branch, or use other methods to back up the current project.
Delete the package-lock.json or yarn.lock file.
1.Upgrade dependencies
Upgrade Angular to 15.x version, Run ng update @angular/core@16 @angular/cli@16 @angular-eslint/schematics@16 ng-zorro-antd@16 ng-alain@16.
Run ng update @angular/cdk@16, if you have used @angular/cdk.
If any warning messages appear in the console, follow the prompts to modify the corresponding code.
NG-ALAIN scaffolding upgrade all change files, please refer to: #2394.
',meta:{order:1e3,type:"Basic",title:"Upgrade to version 16.0",hot:!0},toc:[{id:"Beforeupgrade",title:"Before upgrade",h:2,children:[{id:"1.Upgradedependencies",title:"1.Upgrade dependencies",h:3}]}]},"zh-CN":{content:'
In Architecture we have described the overall composition of the NG-ALAIN scaffolding. We spent a lot of time developing some infrastructure and publishing these to the @delon/* series to Npm. , making the upgrade very easy.
Publishing rule
Similar to @angular/*, the version number of the @delon/* class library will be a version number () at each iteration, regardless of whether a class library has been modified.
At the same time, please follow the following publishing rules and update version number:
@delon as the infrastructure library, which will be slightly higher in the update frequency, usually updated at least once a week.
With BREAKING CHANGES at least one minor version number
Scaffolding in package.json most libraries use loose version numbers, for example:
^0.1.0 with the ^ symbol indicates that the latest minor version number is used, so 0.7.0 is also the range.
To use this update method, you need to follow these steps:
Remove the node_modules folder and the yarn.lock file
Execute yarn
Note: This method will install all class libraries in a newer version, but it may cause unnecessary troubles due to damaging changes of third-party t
',meta:{order:80,title:{"en-US":"Upgrade scaffold","zh-CN":"\u5347\u7ea7\u811a\u624b\u67b6"},type:"Dev"},toc:[{id:"Publishingrule",title:"Publishing rule",h:2},{id:"Howtoupgrade",title:"How to upgrade?",h:2,children:[{id:"Method1:CommandRecommend",title:"Method 1: Command (Recommend)",h:3},{id:"Method2:Modifytheversionnumber",title:"Method 2: Modify the version number",h:3},{id:"Method3:Updateallclasslibraries",title:"Method 3: Update all class libraries",h:3}]}]},"zh-CN":{content:'
A list of user\'s avatar for project or group member list frequently. If a large or small avatar-list is desired, set the size property to either large or small and mini respectively. Omit the size property for a avatar-list with the default size.
',api:'
API
avatar-list
Property
Description
Type
Default
[size]
size of list
\'large\',\'small\',\'mini\',\'default\'
\'default\'
[maxLength]
max items to show
number
-
[excessItemsStyle]
the excess item style
{ [key: string]: string }
-
avatar-list-item
Property
Description
Type
Default
[tips]
title tips for avatar item
string
-
[src]
the address of the image for an image avatar
string
-
[text]
text for avatar item
string
-
[icon]
icon for avatar item
string
-
',meta:{type:"Basic",title:"avatar-list",subtitle:"AvatarList",cols:1,module:"import { AvatarListModule } from '@delon/abc/avatar-list';"},toc:[{id:"API",title:"API",h:2,children:[{id:"avatar-list",title:"avatar-list",h:3},{id:"avatar-list-item",title:"avatar-list-item",h:3}]}]},"zh-CN":{content:'
',meta:{type:"Basic",title:"avatar-list",subtitle:"\u7528\u6237\u5934\u50cf\u5217\u8868",cols:1,module:"import { AvatarListModule } from '@delon/abc/avatar-list';"},toc:[{id:"API",title:"API",h:2,children:[{id:"avatar-list",title:"avatar-list",h:3},{id:"avatar-list-item",title:"avatar-list-item",h:3}]}]}},demo:!0},this.codes=[{id:"components-avatar-list-maxLength",meta:{title:{"zh-CN":"\u8981\u663e\u793a\u7684\u6700\u5927\u9879\u76ee","en-US":"Max Items to Show"},order:0},summary:"
maxLength attribute specifies the maximum number of items to show while excessItemsStyle style the excess\nitem component.
