0.1.1 • Published 8 years ago
angular-pages v0.1.1
Angular Pages
The static site generator that lets you mix Markdown, HTML, and Angular Components! Write your HTML or Markdown files and Angular Components with Routes will be generated to mimic the structure of those files in the ./pages directory of your Angular Project.
Install Angular Pages into an NG CLI generated Angular App
Prequisites:
- Node 8 (nodejs.org)
In the future we'll have an angular-page init command. For now, set up is manual.
- Run
npm install -g angular-pages gh-markdown-cli angular-cli. - If you haven't generated your project yet, run
ng new my-new-project && cd my-new-project. - create a
pagesdirectory at./pages. - Run
angular-pages build(always run in the root directory of your Angular project) - ES6 and Angular import the
PagesRouterModuleat./src/pages/pages-routing.module.tsinto./src/app/app.module.ts
Optional:
- In your
package.json, addangular-pages build &&tonpm build. - Add the
angular-pages build --watch & ng servetonpm start - Set
imports: [RouterModule.forRoot(routes, { useHash: true })],inapp-routing.module.tsif you are using a static server like Github Pages. This will make sure URLs are formed likefoo.com/#/my-angular-route/as opposed tofoo.com/my-angular-route. If you did not setuseHashtotrueand a user hits reload in their browser onfoo.com/my-angular-route, that will cause the browser to ask the static server forfoo.com/my-angular-route/index.htmlbecause of how static web servers work. - Create a
./pages/index.mdfile to create a root path.
Write your pages
- Put any HTML or Mardown files in the
./pagesdirectory, runangular-pages buildthe script will create a Component and Route for that page in your Angular App. For example, if you had a Markdown page at./pages/some-path/hello-world.md, you would then see the rendered HTML when you go to the/some-path/hello-worldin your app.
You might not need Angular Pages if...
- You just need a static site where you can define arbitrary page stucture with a series of Markdown files but you don't need Angular Components on those pages. Use mdWiki! It's brilliant.
- You need RSS feeds for a blog.