This cookbook allows you to create as many app as you want to test Angular recipes.
I used angular CLI to create a new app with the following arguments:
ng new angular-cookbook --inline-template --inline-style --style scss
Then I changed the structure of the project as follows:
# create new folders `cookbook/_tmpl`
mkdir -p cookbook/_tmpl
# copy `src` content in `cookbook/_tmpl`
cp -rf src/** cookbook/_tmpl
In cookbook/_tmpl
folder, I updated the following path in tsconfig.app.json
and tsconfig.spec.json
files:
{
"extends": "../../tsconfig.json", //<- Update path
...
Finally I added a new "apps"
entry in angular-cli.json
file:
{
...
"apps": [
{
"root": "src",
"outDir": "dist",
...
},
{ //<- New apps entry
"name": "_tmpl", //<- Add app name
"root": "cookbook/_tmpl", //<- Set app root
"outDir": "dist",
...
}
],
...
}
Use the create/app.js
script to create a new recipe [APP_NAME]
for this cookbook:
node create/app [APP_NAME]
# ...or run as node script
./create/app.js [APP_NAME]`
(for the second method to work you'll probably need to change permission: chmod +x ./create/app.js
).
The script copies cookbook/_tmpl
content in a new folder cookbook/[APP_NAME]
,
adds a README.md
to encourage the recipe documentation,
and references the new app in angular-cli.json
.
Now, launch your app and start cooking:
# serve app
ng serve --app [APP_NAME]
# generate component in `cookbook/[APP_NAME]/app/hello`
ng g c --app [APP_NAME] hello
# and don't forget to test your recipe (you know, TDD...)
ng test --app [APP_NAME]
# build app
ng build --app [APP_NAME] --prod
Use the create/wiki.js
script to generate a single documentation for all your receipes.
It create an HTML page in dist/index.html
that aggregates the README.md
content of each recipe into a single place.
node create/wiki
Now, simply open dist/index.html
in your favorite browser.