This is a sample Angular 11 blog with Agility CMS. You can use this as a starting point to build a fully-featured Angular App with a headless cms like Agility.
-
Preview: https://agilitycms-angular-blog-preview.netlify.app/
-
Production: https://agilitycms-angular-blog.netlify.app/
Angular and Agility CMS, also TypeScript? Oh ya, let's go!
The first thing you need is a free Agility CMS account. You can get that here 👋. Once you create your Agility CMS account and ✨new✨ project name, come back here 🧐.
Now that you've got the content, you need the code!
Go ahead and clone the repo from github: 👇
https://github.com/agility/agilitycms-angular-blog.gitnpm install or yarn install
Normally, this will create 9,999,999,999 files in your node_modules folder. Luckily, we're only gonna create 9,999,999 for this small demo.
YAY! 👏👏👏
You care about the environment don't you? 🌲🌳🌴🎋
Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the API Keys page in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.
- Open up your
src/environmentsfolder - Overwrite the values in the
environment.tsfile.- 🗄 Use your PREVIEW KEY for the API Key.
- Overwrite the values in the
environment.prod.tsfile- 🗄 Use your FETCH KEY for the API Key.
Run npm start for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
This will also load the latest (staging mode) content from Agility CMS. When you change content in the CMS, simply reload your page to see those changes updated in the site.
Agility CMS content is loaded using methods in the agility/agility.service.ts class.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Agility CMS modules are named module-[module_name], and are also registered in the agility/module.service.ts file, indexed by the module reference name in lower case. Each module component implements IAgilityModuleComponent with a special data input property that has the content for that module.
Check out the examples we've provided to learn more!
Run npm run dev to build the project in preview mode. The build artifacts will be stored in the dist/ directory.
Run npm run build flag for a production build.
To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.
To get help with Agility CMS, reach out to us on our website https://agilitycms.com