Are you looking for a simple, fast, and powerful toolset for building web applications? We've got great news for you!
Introducing Ngaox - an Angular-based toolset that provides everything you need to create dynamic web applications quickly and efficiently.
SEO & Social Sharing
When it comes to web applications, SEO and social sharing are critical components of success. That's why Ngaox includes @ngaox/seo
, an Angular library that helps generate and manage meta tags that allow social media sharing and improve page SEO ranking.
Getting started with Ngaox SEO is easy. Simply install the package and import the SeoModule
into your root module:
import { SeoModule } from '@ngaox/seo';
@NgModule({
/* ... */
imports: [
/* ... */
SeoModule.forRoot({
title: "Default Title",
siteName: 'Cool app 😎',
twitter: {
creator: '@twitter'
},
/* ... */
})
]
})
export class AppModule {}
And provide the relevent SEO data in each page/route/section
const routes: Routes = [
{
path: 'users',
data: {
// This 👇 will be used as the page seo data
NgaoxSeo: {
title: 'Users List Page',
description="This is a description"
keywords="keyword1, keyword2, keyword3"
// Available options:
// https://ngaox-lab.web.app/docs/seo#available-seo-options
}
},
// PS: You can also use a resolver for it
}
];
Or using ngaox-seo
component in the users route component
<ngaox-seo
title="Users List Page"
description="This is a description"
keywords="keyword1, keyword2, keyword3"
...
></ngaox-seo>
<!-- Available options: https://ngaox-lab.web.app/docs/seo#available-seo-options -->
SVG Icons Inlining
@ngaox/icons
provides a registry (IconsService
) that loads, caches and adds SVG icons, with a component (<ngaox-icon>
) for displaying (inlining) them giving you the ability to style them with CSS as well as optimizing your application's performance.
Get started with Ngaox Icons by installing @ngaox/icons
and importing IconsModule
into your app's root module.
/* ... */
import { IconsModule } from '@ngaox/icons';
@NgModule({
imports: [
BrowserModule,
IconsModule.forRoot([
{ name: 'my-icon', data: '<svg>...</svg>' },
{
name: 'my-icon2',
data: {
lazy: true,
url: 'https://example.com/my-icon.svg',
}
},
]),
],
})
And then use the <ngaox-icon>
component to display the icon:
<ngaox-icon name="my-icon"></ngaox-icon>
If you are using @ngaox/devkit
builders. You can also automagically register all the SVG icons in a directory by adding an icons
entry in the ngaox.config.js
file:
module.exports = {
content: {
icons: 'src/icons'
// ...
}
};
For example, if you have the following directory structure:
└── src
│ │ my-icon.svg
│ │
│ └── sub-folder
│ │ icon-in-subfolder.svg
│ │
│ ...
You can use the following markup to display the icons:
<ngaox-icon name="app:my-icon"></ngaox-icon>
<ngaox-icon name="app:sub-folder:icon-in-subfolder"></ngaox-icon>
Content Integration
The @ngaox/devkit
provides builders that seamlessly integrate your static content into your Angular app by using content parsers and builders.
To get started with content integration, you'll need to set up the @ngaox/devkit
using the following command:
ng add @ngaox/devkit
The builders use the ngaox.config.js
file, located in your project root by default, to determine how to parse and build content.
The file should export a configuration object with a content
property that defines the different types of content to be processed.
Here's an example configuration file that defines two types of content, docs
and myCustomKey
, and specifies their corresponding builders, parsers, and other properties:
module.exports = {
content: {
myCustomKey: {
dir: 'my/custom/dir',
glob: '**/*.md', // **/*.md by default
parser: rawParser, // markdownParser by default
builder: new MyCustomBuilder(), // GenericBuilder by default
extra: {} // Extra properties that are passed to the builder
},
// If you are using the default configuration
// You can use the short form where you only specify the directory:
markdown: 'posts',
}
};
And voila! Now your content will be processed and built along with your Angular app.
You can access your content as well as a map of your content and any other generated meta-file by the builder parsed as json in your app by making http request to /~content/<content-key>/<doc-path>
.
Links
Ngaox is an open-source project with a growing community. Check out the following links for more information:
Top comments (1)
This is awsome, , Thanks!