March 2020
🔨 Restaurant website. From Udemy 'Angular, Angular Material et RxJS par la pratique'. It covers the basics concepts of Angular and RxJS: materials, reactive forms, observables...
See the demo on Github page.
Restaurant website with menus, booking and scheduling of special evenings with a searchbar.
Note: the tutorial was for Angular 6 but this versions uses Angular 9.0.5.
- Clone the local-version branch
- Tu run:
ng serve -o - Open the app using http://localhost:4200/
See the demo on Github page.
- Routes (RouterModule, Routes, Route)
- Modules / Components / Providers (app.module.ts: import {decorators} / NgModule)
- Material Data Table + Data source (using interfaces as models)
- Templates: Forms (Reactive forms, templates driven forms '#', structural directives '*': shape or reshape the DOM's structure), lifecycle hooks (OnInit), interpolation {{...}} / two way binding [()], ...
- Reactive Extensions Library for JavaScript (RxJS) and Observables, Operators, flux/push/callbacks, tap, map, switchMap, ...
- Communication between components and custom events (input: from parent to children / output: from children to parents), dynamic content
This project was generated with Angular CLI version 9.0.5.
npm install -g @angular/cli
ng new my-first-project
cd my-first-project
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
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.
Ex: ng g c Home
Run ng generate services service-name to generate a new service.
Ex: ng g s services/quick-lunch
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
Angular Material module helps us to create high-quality UI applications with Angular framework by following Material Design specifications.
ng add @angular/material
Ex add component: ng generate @angular/material:materialNav --name=main-nav
git checkout -b gh-pages
git push origin gh-pages
npm install -g angular-cli-ghpages
ng build --prod --base-href https://[username].github.io/[repo]/
ngh --dir=dist/[project-name]
(see package.json for the project name)
It is only necessary to set the the--base-href flag once, next time you build the project you can simply run:
ng build --prod
In order to compile images correctly use path as following:
'./assets/images/image.png'