├── .vscode └── extensions.json ├── Chapter01 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ └── app.module.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter02 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── mdfiles │ ├── 2021-05-20-posts.md │ └── angular-and-scully.md ├── package-lock.json ├── package.json ├── scully.my-blog.config.ts ├── scully │ ├── plugins │ │ └── plugin.ts │ └── tsconfig.json ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── articles │ │ │ ├── articles-routing.module.ts │ │ │ ├── articles.component.html │ │ │ ├── articles.component.scss │ │ │ ├── articles.component.spec.ts │ │ │ ├── articles.component.ts │ │ │ └── articles.module.ts │ │ ├── contact │ │ │ ├── contact.component.html │ │ │ ├── contact.component.scss │ │ │ ├── contact.component.spec.ts │ │ │ ├── contact.component.ts │ │ │ └── contact.module.ts │ │ ├── core │ │ │ ├── core.module.ts │ │ │ └── header │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.scss │ │ │ │ ├── header.component.spec.ts │ │ │ │ └── header.component.ts │ │ ├── posts │ │ │ ├── posts-routing.module.ts │ │ │ ├── posts.component.html │ │ │ ├── posts.component.scss │ │ │ ├── posts.component.spec.ts │ │ │ ├── posts.component.ts │ │ │ └── posts.module.ts │ │ └── shared │ │ │ ├── footer │ │ │ ├── footer.component.html │ │ │ ├── footer.component.scss │ │ │ ├── footer.component.spec.ts │ │ │ └── footer.component.ts │ │ │ └── shared.module.ts │ ├── assets │ │ ├── .gitkeep │ │ ├── angular.png │ │ └── scully-routes.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter03 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── confirm-dialog │ │ │ ├── confirm-dialog.component.css │ │ │ ├── confirm-dialog.component.html │ │ │ ├── confirm-dialog.component.spec.ts │ │ │ └── confirm-dialog.component.ts │ │ ├── issue-list │ │ │ ├── issue-list.component.css │ │ │ ├── issue-list.component.html │ │ │ ├── issue-list.component.spec.ts │ │ │ └── issue-list.component.ts │ │ ├── issue-report │ │ │ ├── issue-report.component.css │ │ │ ├── issue-report.component.html │ │ │ ├── issue-report.component.spec.ts │ │ │ └── issue-report.component.ts │ │ ├── issue.ts │ │ ├── issues.service.spec.ts │ │ └── issues.service.ts │ ├── assets │ │ ├── .gitkeep │ │ └── mock-issues.ts │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter04 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── firebase.json ├── karma.conf.js ├── ngsw-config.json ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── header │ │ │ ├── header.component.html │ │ │ ├── header.component.scss │ │ │ ├── header.component.spec.ts │ │ │ └── header.component.ts │ │ ├── weather.service.spec.ts │ │ ├── weather.service.ts │ │ ├── weather.ts │ │ └── weather │ │ │ ├── weather.component.html │ │ │ ├── weather.component.scss │ │ │ ├── weather.component.spec.ts │ │ │ └── weather.component.ts │ ├── assets │ │ ├── .gitkeep │ │ └── icons │ │ │ ├── icon-128x128.png │ │ │ ├── icon-144x144.png │ │ │ ├── icon-152x152.png │ │ │ ├── icon-192x192.png │ │ │ ├── icon-384x384.png │ │ │ ├── icon-512x512.png │ │ │ ├── icon-72x72.png │ │ │ └── icon-96x96.png │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── manifest.webmanifest │ ├── polyfills.ts │ ├── styles.scss │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter05 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── .vscode │ └── launch.json ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── editor.service.spec.ts │ │ ├── editor.service.ts │ │ ├── editor │ │ │ ├── editor.component.css │ │ │ ├── editor.component.html │ │ │ ├── editor.component.spec.ts │ │ │ └── editor.component.ts │ │ └── window.ts │ ├── assets │ │ └── .gitkeep │ ├── electron │ │ ├── main.ts │ │ ├── package.json │ │ └── tsconfig.json │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json ├── webpack.config.js ├── webpack.dev.config.js └── webpack.prod.config.js ├── Chapter06 ├── .browserslistrc ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── android │ ├── .gitignore │ ├── .idea │ │ ├── .gitignore │ │ ├── compiler.xml │ │ ├── jarRepositories.xml │ │ ├── misc.xml │ │ └── runConfigurations.xml │ ├── app │ │ ├── .gitignore │ │ ├── build.gradle │ │ ├── capacitor.build.gradle │ │ ├── proguard-rules.pro │ │ └── src │ │ │ ├── androidTest │ │ │ └── java │ │ │ │ └── com │ │ │ │ └── getcapacitor │ │ │ │ └── myapp │ │ │ │ └── ExampleInstrumentedTest.java │ │ │ ├── main │ │ │ ├── AndroidManifest.xml │ │ │ ├── assets │ │ │ │ ├── capacitor.config.json │ │ │ │ └── capacitor.plugins.json │ │ │ ├── java │ │ │ │ └── io │ │ │ │ │ └── ionic │ │ │ │ │ └── starter │ │ │ │ │ └── MainActivity.java │ │ │ └── res │ │ │ │ ├── drawable-land-hdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-mdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-land-xxxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-hdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-mdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-port-xxxhdpi │ │ │ │ └── splash.png │ │ │ │ ├── drawable-v24 │ │ │ │ └── ic_launcher_foreground.xml │ │ │ │ ├── drawable │ │ │ │ ├── ic_launcher_background.xml │ │ │ │ └── splash.png │ │ │ │ ├── layout │ │ │ │ └── activity_main.xml │ │ │ │ ├── mipmap-anydpi-v26 │ │ │ │ ├── ic_launcher.xml │ │ │ │ └── ic_launcher_round.xml │ │ │ │ ├── mipmap-hdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ ├── ic_launcher.png │ │ │ │ ├── ic_launcher_foreground.png │ │ │ │ └── ic_launcher_round.png │ │ │ │ ├── values │ │ │ │ ├── ic_launcher_background.xml │ │ │ │ ├── strings.xml │ │ │ │ └── styles.xml │ │ │ │ └── xml │ │ │ │ ├── config.xml │ │ │ │ └── file_paths.xml │ │ │ └── test │ │ │ └── java │ │ │ └── com │ │ │ └── getcapacitor │ │ │ └── myapp │ │ │ └── ExampleUnitTest.java │ ├── build.gradle │ ├── capacitor.settings.gradle │ ├── gradle.properties │ ├── gradle │ │ └── wrapper │ │ │ ├── gradle-wrapper.jar │ │ │ └── gradle-wrapper.properties │ ├── gradlew │ ├── gradlew.bat │ ├── settings.gradle │ └── variables.gradle ├── angular.json ├── capacitor.config.json ├── e2e │ ├── protractor.conf.js │ ├── src │ │ ├── app.e2e-spec.ts │ │ └── app.po.ts │ └── tsconfig.json ├── extra-webpack.config.js ├── firebase.json ├── ionic.config.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── resources │ ├── icon.png │ └── splash.png ├── src │ ├── app │ │ ├── app-routing.module.ts │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── capture │ │ │ ├── capture-routing.module.ts │ │ │ ├── capture.module.ts │ │ │ ├── capture.page.html │ │ │ ├── capture.page.scss │ │ │ ├── capture.page.spec.ts │ │ │ └── capture.page.ts │ │ ├── cesium.service.spec.ts │ │ ├── cesium.service.ts │ │ ├── photo.service.spec.ts │ │ ├── photo.service.ts │ │ ├── photo.ts │ │ └── view │ │ │ ├── view-routing.module.ts │ │ │ ├── view.module.ts │ │ │ ├── view.page.html │ │ │ ├── view.page.scss │ │ │ ├── view.page.spec.ts │ │ │ └── view.page.ts │ ├── assets │ │ ├── icon │ │ │ └── favicon.png │ │ └── shapes.svg │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── global.scss │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── test.ts │ ├── theme │ │ └── variables.scss │ └── zone-flags.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter07 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── server.ts ├── src │ ├── app │ │ ├── app.component.html │ │ ├── app.component.scss │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ ├── app.server.module.ts │ │ ├── github.service.spec.ts │ │ ├── github.service.ts │ │ ├── organization.ts │ │ ├── organizations │ │ │ ├── organizations.component.html │ │ │ ├── organizations.component.scss │ │ │ ├── organizations.component.spec.ts │ │ │ └── organizations.component.ts │ │ ├── panel │ │ │ ├── panel.component.html │ │ │ ├── panel.component.scss │ │ │ ├── panel.component.spec.ts │ │ │ └── panel.component.ts │ │ ├── personal-info │ │ │ ├── personal-info.component.html │ │ │ ├── personal-info.component.scss │ │ │ ├── personal-info.component.spec.ts │ │ │ └── personal-info.component.ts │ │ ├── repositories │ │ │ ├── repositories.component.html │ │ │ ├── repositories.component.scss │ │ │ ├── repositories.component.spec.ts │ │ │ └── repositories.component.ts │ │ ├── repository.ts │ │ └── user.ts │ ├── assets │ │ ├── .gitkeep │ │ └── angular.png │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.server.ts │ ├── main.ts │ ├── polyfills.ts │ ├── styles.scss │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.server.json └── tsconfig.spec.json ├── Chapter08 ├── .editorconfig ├── .eslintrc.json ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode │ └── extensions.json ├── README.md ├── angular.json ├── apps │ ├── .gitkeep │ ├── tour-e2e │ │ ├── .eslintrc.json │ │ ├── cypress.json │ │ ├── src │ │ │ ├── fixtures │ │ │ │ └── example.json │ │ │ ├── integration │ │ │ │ └── app.spec.ts │ │ │ ├── plugins │ │ │ │ └── index.js │ │ │ └── support │ │ │ │ ├── app.po.ts │ │ │ │ ├── commands.ts │ │ │ │ └── index.ts │ │ ├── tsconfig.e2e.json │ │ └── tsconfig.json │ └── tour │ │ ├── .browserslistrc │ │ ├── .eslintrc.json │ │ ├── jest.config.js │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ ├── .gitkeep │ │ │ └── poi.json │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test-setup.ts │ │ ├── tsconfig.app.json │ │ ├── tsconfig.editor.json │ │ ├── tsconfig.json │ │ └── tsconfig.spec.json ├── decorate-angular-cli.js ├── jest.config.js ├── jest.preset.js ├── libs │ ├── .gitkeep │ ├── admin │ │ ├── .eslintrc.json │ │ ├── README.md │ │ ├── jest.config.js │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── lib │ │ │ │ ├── admin.component.css │ │ │ │ ├── admin.component.html │ │ │ │ ├── admin.component.spec.ts │ │ │ │ ├── admin.component.ts │ │ │ │ ├── admin.module.ts │ │ │ │ ├── admin.service.spec.ts │ │ │ │ └── admin.service.ts │ │ │ └── test-setup.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.lib.json │ │ └── tsconfig.spec.json │ ├── poi │ │ ├── .eslintrc.json │ │ ├── README.md │ │ ├── jest.config.js │ │ ├── src │ │ │ ├── index.ts │ │ │ ├── lib │ │ │ │ ├── +state │ │ │ │ │ ├── poi.actions.ts │ │ │ │ │ ├── poi.effects.spec.ts │ │ │ │ │ ├── poi.effects.ts │ │ │ │ │ ├── poi.models.ts │ │ │ │ │ ├── poi.reducer.spec.ts │ │ │ │ │ ├── poi.reducer.ts │ │ │ │ │ ├── poi.selectors.spec.ts │ │ │ │ │ └── poi.selectors.ts │ │ │ │ ├── poi.module.ts │ │ │ │ ├── poi.service.spec.ts │ │ │ │ └── poi.service.ts │ │ │ └── test-setup.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.lib.json │ │ └── tsconfig.spec.json │ └── visitor │ │ ├── .eslintrc.json │ │ ├── README.md │ │ ├── jest.config.js │ │ ├── src │ │ ├── index.ts │ │ ├── lib │ │ │ ├── map │ │ │ │ ├── map.component.css │ │ │ │ ├── map.component.html │ │ │ │ ├── map.component.spec.ts │ │ │ │ └── map.component.ts │ │ │ ├── poi-list │ │ │ │ ├── poi-list.component.css │ │ │ │ ├── poi-list.component.html │ │ │ │ ├── poi-list.component.spec.ts │ │ │ │ └── poi-list.component.ts │ │ │ ├── visitor.component.css │ │ │ ├── visitor.component.html │ │ │ ├── visitor.component.spec.ts │ │ │ ├── visitor.component.ts │ │ │ └── visitor.module.ts │ │ └── test-setup.ts │ │ ├── tsconfig.json │ │ ├── tsconfig.lib.json │ │ └── tsconfig.spec.json ├── nx.json ├── package-lock.json ├── package.json ├── tools │ ├── generators │ │ └── .gitkeep │ └── tsconfig.tools.json └── tsconfig.base.json ├── Chapter09 ├── .browserslistrc ├── .editorconfig ├── .gitignore ├── README.md ├── angular.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── projects │ ├── ui-controls │ │ ├── README.md │ │ ├── karma.conf.js │ │ ├── ng-package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── lib │ │ │ │ ├── card-list │ │ │ │ │ ├── card-list.component.css │ │ │ │ │ ├── card-list.component.html │ │ │ │ │ ├── card-list.component.spec.ts │ │ │ │ │ └── card-list.component.ts │ │ │ │ ├── card.ts │ │ │ │ ├── copy-button │ │ │ │ │ ├── copy-button.component.css │ │ │ │ │ ├── copy-button.component.html │ │ │ │ │ ├── copy-button.component.spec.ts │ │ │ │ │ └── copy-button.component.ts │ │ │ │ ├── ui-controls.component.spec.ts │ │ │ │ ├── ui-controls.component.ts │ │ │ │ ├── ui-controls.module.ts │ │ │ │ ├── ui-controls.service.spec.ts │ │ │ │ └── ui-controls.service.ts │ │ │ ├── public-api.ts │ │ │ └── test.ts │ │ ├── tsconfig.lib.json │ │ ├── tsconfig.lib.prod.json │ │ └── tsconfig.spec.json │ └── ui-elements │ │ ├── .browserslistrc │ │ ├── karma.conf.js │ │ ├── src │ │ ├── app │ │ │ ├── app.component.css │ │ │ ├── app.component.html │ │ │ ├── app.component.spec.ts │ │ │ ├── app.component.ts │ │ │ └── app.module.ts │ │ ├── assets │ │ │ └── .gitkeep │ │ ├── environments │ │ │ ├── environment.prod.ts │ │ │ └── environment.ts │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── main.ts │ │ ├── polyfills.ts │ │ ├── styles.css │ │ └── test.ts │ │ ├── tsconfig.app.json │ │ └── tsconfig.spec.json ├── src │ ├── app │ │ ├── app.component.css │ │ ├── app.component.html │ │ ├── app.component.spec.ts │ │ ├── app.component.ts │ │ ├── app.module.ts │ │ └── assassins.ts │ ├── assets │ │ └── .gitkeep │ ├── environments │ │ ├── environment.prod.ts │ │ └── environment.ts │ ├── favicon.ico │ ├── index.html │ ├── main.ts │ ├── polyfills.ts │ ├── styles.css │ └── test.ts ├── tsconfig.app.json ├── tsconfig.json └── tsconfig.spec.json ├── Chapter10 ├── .gitignore ├── .npmignore ├── README.md ├── package-lock.json ├── package.json ├── src │ ├── collection.json │ ├── crud-service │ │ ├── files │ │ │ ├── __name@dasherize__.service.spec.ts.template │ │ │ └── __name@dasherize__.service.ts.template │ │ ├── index.ts │ │ └── index_spec.ts │ ├── my-schematics │ │ ├── index.ts │ │ └── index_spec.ts │ └── tailwind-container │ │ ├── files │ │ ├── __name@dasherize__.component.html.template │ │ └── __name@dasherize__.component.ts.template │ │ ├── index.ts │ │ ├── index_spec.ts │ │ ├── schema.json │ │ └── schema.ts └── tsconfig.json ├── LICENSE └── README.md /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "johnpapa.angular-essentials", 4 | "christian-kohler.path-intellisense" 5 | ] 6 | } -------------------------------------------------------------------------------- /Chapter01/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter01/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter01/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Chapter01/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter01/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter01/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'Angular Projects'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter01/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppComponent } from './app.component'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | AppComponent 9 | ], 10 | imports: [ 11 | BrowserModule 12 | ], 13 | providers: [], 14 | bootstrap: [AppComponent] 15 | }) 16 | export class AppModule { } 17 | -------------------------------------------------------------------------------- /Chapter01/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter01/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter01/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter01/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter01/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter01/src/favicon.ico -------------------------------------------------------------------------------- /Chapter01/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyAngular 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter01/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter01/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter01/src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: { 11 | context(path: string, deep?: boolean, filter?: RegExp): { 12 | keys(): string[]; 13 | (id: string): T; 14 | }; 15 | }; 16 | 17 | // First, initialize the Angular testing environment. 18 | getTestBed().initTestEnvironment( 19 | BrowserDynamicTestingModule, 20 | platformBrowserDynamicTesting() 21 | ); 22 | // Then we find all the tests. 23 | const context = require.context('./', true, /\.spec\.ts$/); 24 | // And load the modules. 25 | context.keys().map(context); 26 | -------------------------------------------------------------------------------- /Chapter01/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter01/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter02/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter02/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter02/mdfiles/2021-05-20-posts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 2021-05-20-posts 3 | description: 'blog description' 4 | published: true 5 | --- 6 | 7 | # 2021-05-20-posts 8 | -------------------------------------------------------------------------------- /Chapter02/mdfiles/angular-and-scully.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: 'Angular and Scully' 3 | description: 'How to build a blog with Angular and Scully' 4 | published: true 5 | --- 6 | 7 | # Angular and Scully 8 | Angular is a robust JavaScript framework that we can use to build excellent and performant web applications. 9 | Scully is a popular static website generator that empowers the Angular framework with Jamstack characteristics. 10 | You can find more about them in the following links: 11 | 12 | - https://angular.io 13 | - https://scully.io 14 | - https://www.jamstack.org 15 | -------------------------------------------------------------------------------- /Chapter02/scully.my-blog.config.ts: -------------------------------------------------------------------------------- 1 | import { ScullyConfig } from '@scullyio/scully'; 2 | export const config: ScullyConfig = { 3 | projectRoot: "./src", 4 | projectName: "my-blog", 5 | outDir: './dist/static', 6 | routes: { 7 | '/posts/:id': { 8 | type: 'contentFolder', 9 | id: { 10 | folder: "./mdfiles" 11 | } 12 | }, 13 | } 14 | }; -------------------------------------------------------------------------------- /Chapter02/scully/plugins/plugin.ts: -------------------------------------------------------------------------------- 1 | 2 | import { registerPlugin, getPluginConfig } from '@scullyio/scully'; 3 | 4 | export const myPlugin = 'myPlugin'; 5 | 6 | const myFunctionPlugin = async (html: string): Promise => { 7 | return html; 8 | }; 9 | 10 | const validator = async () => []; 11 | 12 | registerPlugin('postProcessByHtml', myPlugin, myFunctionPlugin, validator); 13 | -------------------------------------------------------------------------------- /Chapter02/scully/tsconfig.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "esModuleInterop": true, 6 | "importHelpers": false, 7 | "lib": ["ES2019", "dom"], 8 | "module": "commonjs", 9 | "moduleResolution": "node", 10 | "sourceMap": true, 11 | "target": "es2018", 12 | "types": ["node"], 13 | "skipLibCheck": true, 14 | "skipDefaultLibCheck": true, 15 | "typeRoots": ["../node_modules/@types"], 16 | "allowSyntheticDefaultImports": true 17 | }, 18 | "exclude": ["./**/*spec.ts"] 19 | } 20 | -------------------------------------------------------------------------------- /Chapter02/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { ContactComponent } from './contact/contact.component'; 4 | 5 | const routes: Routes = [ 6 | { path: 'contact', component: ContactComponent }, 7 | { path: 'articles', loadChildren: () => import('./articles/articles.module').then(m => m.ArticlesModule) }, 8 | { path: '', pathMatch: 'full', redirectTo: 'articles' }, 9 | { path: 'posts', loadChildren: () => import('./posts/posts.module').then(m => m.PostsModule) }, 10 | { path: '**', redirectTo: 'articles' } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forRoot(routes)], 15 | exports: [RouterModule] 16 | }) 17 | export class AppRoutingModule { } 18 | -------------------------------------------------------------------------------- /Chapter02/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 | -------------------------------------------------------------------------------- /Chapter02/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/app/app.component.scss -------------------------------------------------------------------------------- /Chapter02/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'my-blog'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter02/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | 4 | import { AppRoutingModule } from './app-routing.module'; 5 | import { AppComponent } from './app.component'; 6 | import { ContactModule } from './contact/contact.module'; 7 | import { CoreModule } from './core/core.module'; 8 | import { SharedModule } from './shared/shared.module'; 9 | import { ScullyLibModule } from '@scullyio/ng-lib'; 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AppComponent 14 | ], 15 | imports: [ 16 | BrowserModule, 17 | AppRoutingModule, 18 | CoreModule, 19 | SharedModule, 20 | ContactModule, 21 | ScullyLibModule 22 | ], 23 | providers: [], 24 | bootstrap: [AppComponent] 25 | }) 26 | export class AppModule { } 27 | -------------------------------------------------------------------------------- /Chapter02/src/app/articles/articles-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { RouterModule, Routes } from '@angular/router'; 3 | import { ArticlesComponent } from './articles.component'; 4 | 5 | const routes: Routes = [{ path: '', component: ArticlesComponent }]; 6 | 7 | @NgModule({ 8 | imports: [RouterModule.forChild(routes)], 9 | exports: [RouterModule] 10 | }) 11 | export class ArticlesRoutingModule { } 12 | -------------------------------------------------------------------------------- /Chapter02/src/app/articles/articles.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
{{post.title}}
5 |
6 |

{{post.description}}

7 | 8 |
9 | -------------------------------------------------------------------------------- /Chapter02/src/app/articles/articles.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/app/articles/articles.component.scss -------------------------------------------------------------------------------- /Chapter02/src/app/articles/articles.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ArticlesComponent } from './articles.component'; 4 | 5 | describe('ArticlesComponent', () => { 6 | let component: ArticlesComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ArticlesComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ArticlesComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter02/src/app/articles/articles.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | import { ArticlesRoutingModule } from './articles-routing.module'; 5 | import { ArticlesComponent } from './articles.component'; 6 | 7 | 8 | @NgModule({ 9 | declarations: [ 10 | ArticlesComponent 11 | ], 12 | imports: [ 13 | CommonModule, 14 | ArticlesRoutingModule 15 | ] 16 | }) 17 | export class ArticlesModule { } 18 | -------------------------------------------------------------------------------- /Chapter02/src/app/contact/contact.component.html: -------------------------------------------------------------------------------- 1 |
2 | Angular logo 3 |
4 |
Angular Projects
5 |

6 | A personal blog created with the Angular framework and the Scully static site generator 7 |

8 | Angular 9 | Scully 10 |
11 |
12 | -------------------------------------------------------------------------------- /Chapter02/src/app/contact/contact.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/app/contact/contact.component.scss -------------------------------------------------------------------------------- /Chapter02/src/app/contact/contact.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactComponent } from './contact.component'; 4 | 5 | describe('ContactComponent', () => { 6 | let component: ContactComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ContactComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter02/src/app/contact/contact.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-contact', 5 | templateUrl: './contact.component.html', 6 | styleUrls: ['./contact.component.scss'] 7 | }) 8 | export class ContactComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Chapter02/src/app/contact/contact.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { ContactComponent } from './contact.component'; 4 | 5 | 6 | 7 | @NgModule({ 8 | declarations: [ 9 | ContactComponent 10 | ], 11 | imports: [ 12 | CommonModule 13 | ], 14 | exports: [ 15 | ContactComponent 16 | ] 17 | }) 18 | export class ContactModule { } 19 | -------------------------------------------------------------------------------- /Chapter02/src/app/core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HeaderComponent } from './header/header.component'; 4 | import { RouterModule } from '@angular/router'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | HeaderComponent 9 | ], 10 | imports: [ 11 | CommonModule, 12 | RouterModule 13 | ], 14 | exports: [ 15 | HeaderComponent 16 | ] 17 | }) 18 | export class CoreModule { } 19 | -------------------------------------------------------------------------------- /Chapter02/src/app/core/header/header.component.html: -------------------------------------------------------------------------------- 1 | 14 | -------------------------------------------------------------------------------- /Chapter02/src/app/core/header/header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/app/core/header/header.component.scss -------------------------------------------------------------------------------- /Chapter02/src/app/core/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter02/src/app/core/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts-routing.module.ts: -------------------------------------------------------------------------------- 1 | import {NgModule} from '@angular/core'; 2 | import {Routes, RouterModule} from '@angular/router'; 3 | 4 | import {PostsComponent} from './posts.component'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: ':id', 9 | component: PostsComponent, 10 | }, 11 | { 12 | path: '**', 13 | component: PostsComponent, 14 | } 15 | ]; 16 | 17 | @NgModule({ 18 | imports: [RouterModule.forChild(routes)], 19 | exports: [RouterModule], 20 | }) 21 | export class PostsRoutingModule {} 22 | 23 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts.component.html: -------------------------------------------------------------------------------- 1 |

ScullyIo content

2 |
3 | 4 | 5 | 6 |
7 |

End of content

8 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts.component.scss: -------------------------------------------------------------------------------- 1 | h1 { 2 | color:rgb(51, 6, 37); 3 | background-color: rgb(248, 211, 236); 4 | padding: 5px; 5 | border-radius: 5px; 6 | width: fit-content; 7 | } 8 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PostsComponent } from './posts.component'; 4 | 5 | describe('PostsComponent', () => { 6 | let component: PostsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PostsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PostsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts.component.ts: -------------------------------------------------------------------------------- 1 | import {Component, OnInit, ViewEncapsulation} from '@angular/core'; 2 | import {ActivatedRoute, Router, ROUTES} from '@angular/router'; 3 | 4 | declare var ng: any; 5 | 6 | @Component({ 7 | selector: 'app-posts', 8 | templateUrl: './posts.component.html', 9 | styleUrls: ['./posts.component.scss'], 10 | preserveWhitespaces: true, 11 | encapsulation: ViewEncapsulation.Emulated 12 | 13 | }) 14 | export class PostsComponent implements OnInit { 15 | ngOnInit() {} 16 | 17 | constructor(private router: Router, private route: ActivatedRoute) { 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Chapter02/src/app/posts/posts.module.ts: -------------------------------------------------------------------------------- 1 | import {CommonModule} from '@angular/common'; 2 | import {NgModule} from '@angular/core'; 3 | import {ScullyLibModule} from '@scullyio/ng-lib'; 4 | import {PostsRoutingModule} from './posts-routing.module'; 5 | import {PostsComponent} from './posts.component'; 6 | 7 | @NgModule({ 8 | declarations: [PostsComponent], 9 | imports: [CommonModule, PostsRoutingModule, ScullyLibModule], 10 | }) 11 | export class PostsModule {} 12 | -------------------------------------------------------------------------------- /Chapter02/src/app/shared/footer/footer.component.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /Chapter02/src/app/shared/footer/footer.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/app/shared/footer/footer.component.scss -------------------------------------------------------------------------------- /Chapter02/src/app/shared/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter02/src/app/shared/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | currentDate = new Date(); 11 | 12 | constructor() { } 13 | 14 | ngOnInit(): void { 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Chapter02/src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FooterComponent } from './footer/footer.component'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | FooterComponent 8 | ], 9 | imports: [ 10 | CommonModule 11 | ], 12 | exports: [ 13 | FooterComponent 14 | ] 15 | }) 16 | export class SharedModule { } 17 | -------------------------------------------------------------------------------- /Chapter02/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter02/src/assets/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/assets/angular.png -------------------------------------------------------------------------------- /Chapter02/src/assets/scully-routes.json: -------------------------------------------------------------------------------- 1 | [{"route":"/contact"},{"route":"/articles"},{"route":"/posts/2021-05-20-posts","title":"2021-05-20-posts","description":"blog description","published":true,"sourceFile":"2021-05-20-posts.md"},{"route":"/posts/angular-and-scully","title":"Angular and Scully","description":"How to build a blog with Angular and Scully","published":true,"sourceFile":"angular-and-scully.md"},{"route":"/"}] -------------------------------------------------------------------------------- /Chapter02/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter02/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter02/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter02/src/favicon.ico -------------------------------------------------------------------------------- /Chapter02/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyBlog 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter02/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter02/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import "~bootstrap/scss/bootstrap"; 3 | -------------------------------------------------------------------------------- /Chapter02/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter02/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter03/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter03/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter03/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Chapter03/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter03/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter03/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 | -------------------------------------------------------------------------------- /Chapter03/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'issue-tracker'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter03/src/app/confirm-dialog/confirm-dialog.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter03/src/app/confirm-dialog/confirm-dialog.component.css -------------------------------------------------------------------------------- /Chapter03/src/app/confirm-dialog/confirm-dialog.component.html: -------------------------------------------------------------------------------- 1 | 2 |

3 | Resolve Issue # 4 | {{issueNo}} 5 |

6 |
7 |

Are you sure you want to close the issue?

8 |
9 |
10 | 11 | 12 |
13 | 14 | -------------------------------------------------------------------------------- /Chapter03/src/app/confirm-dialog/confirm-dialog.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ConfirmDialogComponent } from './confirm-dialog.component'; 4 | 5 | describe('ConfirmDialogComponent', () => { 6 | let component: ConfirmDialogComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ ConfirmDialogComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ConfirmDialogComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter03/src/app/confirm-dialog/confirm-dialog.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-confirm-dialog', 5 | templateUrl: './confirm-dialog.component.html', 6 | styleUrls: ['./confirm-dialog.component.css'] 7 | }) 8 | export class ConfirmDialogComponent implements OnInit { 9 | 10 | @Input() issueNo: number | null = null; 11 | @Output() confirm = new EventEmitter(); 12 | 13 | constructor() { } 14 | 15 | ngOnInit(): void { 16 | } 17 | 18 | agree() { 19 | this.confirm.emit(true); 20 | this.issueNo = null; 21 | } 22 | 23 | disagree() { 24 | this.confirm.emit(false); 25 | this.issueNo = null; 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /Chapter03/src/app/issue-list/issue-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter03/src/app/issue-list/issue-list.component.css -------------------------------------------------------------------------------- /Chapter03/src/app/issue-list/issue-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { IssueListComponent } from './issue-list.component'; 4 | 5 | describe('IssueListComponent', () => { 6 | let component: IssueListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ IssueListComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(IssueListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter03/src/app/issue-report/issue-report.component.css: -------------------------------------------------------------------------------- 1 | .clr-input, .clr-textarea { 2 | width: 30%; 3 | } 4 | 5 | button { 6 | margin-top: 25px; 7 | } 8 | -------------------------------------------------------------------------------- /Chapter03/src/app/issue-report/issue-report.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { IssueReportComponent } from './issue-report.component'; 4 | 5 | describe('IssueReportComponent', () => { 6 | let component: IssueReportComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ IssueReportComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(IssueReportComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter03/src/app/issue.ts: -------------------------------------------------------------------------------- 1 | export interface Issue { 2 | issueNo: number; 3 | title: string; 4 | description: string; 5 | priority: 'low' | 'high'; 6 | type: 'Feature' | 'Bug' | 'Documentation'; 7 | completed?: Date; 8 | } 9 | -------------------------------------------------------------------------------- /Chapter03/src/app/issues.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { IssuesService } from './issues.service'; 4 | 5 | describe('IssuesService', () => { 6 | let service: IssuesService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(IssuesService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter03/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter03/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter03/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter03/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter03/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter03/src/favicon.ico -------------------------------------------------------------------------------- /Chapter03/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IssueTracker 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter03/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter03/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter03/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter03/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter04/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter04/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter04/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | /.firebaserc 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | -------------------------------------------------------------------------------- /Chapter04/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": [ 3 | { 4 | "target": "weather-app", 5 | "public": "dist/weather-app", 6 | "ignore": [ 7 | "**/.*" 8 | ], 9 | "headers": [ 10 | { 11 | "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)", 12 | "headers": [ 13 | { 14 | "key": "Cache-Control", 15 | "value": "public,max-age=31536000,immutable" 16 | } 17 | ] 18 | } 19 | ], 20 | "rewrites": [ 21 | { 22 | "source": "**", 23 | "destination": "/index.html" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /Chapter04/ngsw-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/service-worker/config/schema.json", 3 | "index": "/index.html", 4 | "assetGroups": [ 5 | { 6 | "name": "app", 7 | "installMode": "prefetch", 8 | "resources": { 9 | "files": [ 10 | "/favicon.ico", 11 | "/index.html", 12 | "/manifest.webmanifest", 13 | "/*.css", 14 | "/*.js" 15 | ] 16 | } 17 | }, 18 | { 19 | "name": "assets", 20 | "installMode": "lazy", 21 | "updateMode": "prefetch", 22 | "resources": { 23 | "files": [ 24 | "/assets/**", 25 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" 26 | ] 27 | } 28 | } 29 | ] 30 | } 31 | -------------------------------------------------------------------------------- /Chapter04/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Chapter04/src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/app/app.component.scss -------------------------------------------------------------------------------- /Chapter04/src/app/header/header.component.html: -------------------------------------------------------------------------------- 1 | 2 | Weather App 3 | 4 | 7 | 10 | 11 | -------------------------------------------------------------------------------- /Chapter04/src/app/header/header.component.scss: -------------------------------------------------------------------------------- 1 | .spacer { 2 | flex: 1 1 auto; 3 | } 4 | -------------------------------------------------------------------------------- /Chapter04/src/app/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter04/src/app/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-header', 5 | templateUrl: './header.component.html', 6 | styleUrls: ['./header.component.scss'] 7 | }) 8 | export class HeaderComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit(): void { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { WeatherService } from './weather.service'; 4 | 5 | describe('WeatherService', () => { 6 | let service: WeatherService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(WeatherService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather.service.ts: -------------------------------------------------------------------------------- 1 | import { HttpClient, HttpParams } from '@angular/common/http'; 2 | import { Injectable } from '@angular/core'; 3 | import { Observable } from 'rxjs'; 4 | import { environment } from '../environments/environment'; 5 | import { Weather } from './weather'; 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class WeatherService { 11 | 12 | constructor(private http: HttpClient) { } 13 | 14 | getWeather(city: string): Observable { 15 | const options = new HttpParams() 16 | .set('units', 'metric') 17 | .set('q', city) 18 | .set('appId', environment.apiKey); 19 | 20 | return this.http.get(environment.apiUrl + 'weather', { params: options }); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather.ts: -------------------------------------------------------------------------------- 1 | export interface Weather { 2 | weather: WeatherInfo[], 3 | main: { 4 | temp: number; 5 | pressure: number; 6 | humidity: number; 7 | }; 8 | wind: { 9 | speed: number; 10 | }; 11 | sys: { 12 | country: string 13 | }; 14 | name: string; 15 | } 16 | 17 | interface WeatherInfo { 18 | main: string; 19 | icon: string; 20 | } 21 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather/weather.component.scss: -------------------------------------------------------------------------------- 1 | :host { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | flex-direction: column; 6 | padding-top: 25px; 7 | } 8 | 9 | mat-form-field { 10 | width: 20%; 11 | } 12 | 13 | mat-icon { 14 | cursor: pointer; 15 | } 16 | 17 | mat-card { 18 | margin-top: 30px; 19 | width: 250px; 20 | } 21 | 22 | h1 { 23 | text-align: center; 24 | font-size: 2.5em; 25 | } 26 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather/weather.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { WeatherComponent } from './weather.component'; 4 | 5 | describe('WeatherComponent', () => { 6 | let component: WeatherComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ WeatherComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(WeatherComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter04/src/app/weather/weather.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Weather } from '../weather'; 3 | import { WeatherService } from '../weather.service'; 4 | 5 | @Component({ 6 | selector: 'app-weather', 7 | templateUrl: './weather.component.html', 8 | styleUrls: ['./weather.component.scss'] 9 | }) 10 | export class WeatherComponent implements OnInit { 11 | 12 | weather: Weather | undefined; 13 | 14 | constructor(private weatherService: WeatherService) { } 15 | 16 | ngOnInit(): void { 17 | } 18 | 19 | search(city: string) { 20 | this.weatherService.getWeather(city).subscribe(weather => this.weather = weather); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /Chapter04/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-128x128.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-144x144.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-152x152.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-192x192.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-384x384.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-512x512.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-72x72.png -------------------------------------------------------------------------------- /Chapter04/src/assets/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/assets/icons/icon-96x96.png -------------------------------------------------------------------------------- /Chapter04/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | apiUrl: 'https://api.openweathermap.org/data/2.5/', 4 | apiKey: '' 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter04/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | apiUrl: 'https://api.openweathermap.org/data/2.5/', 8 | apiKey: '' 9 | }; 10 | 11 | /* 12 | * For easier debugging in development mode, you can import the following file 13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 14 | * 15 | * This import should be commented out in production mode because it will have a negative impact 16 | * on performance if an error is thrown. 17 | */ 18 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 19 | -------------------------------------------------------------------------------- /Chapter04/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter04/src/favicon.ico -------------------------------------------------------------------------------- /Chapter04/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | WeatherApp 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Chapter04/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter04/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | -------------------------------------------------------------------------------- /Chapter04/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter04/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter05/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter05/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter05/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Chapter05/.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "pwa-node", 9 | "request": "launch", 10 | "name": "Launch Program", 11 | "skipFiles": [ 12 | "/**" 13 | ], 14 | "program": "${workspaceRoot}/dist/my-editor/shell.js", 15 | "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron" 16 | } 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter05/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter05/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter05/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Chapter05/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'my-editor'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter05/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { NgxWigModule } from 'ngx-wig'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { EditorComponent } from './editor/editor.component'; 7 | import { FormsModule } from '@angular/forms'; 8 | 9 | @NgModule({ 10 | declarations: [ 11 | AppComponent, 12 | EditorComponent 13 | ], 14 | imports: [ 15 | BrowserModule, 16 | FormsModule, 17 | NgxWigModule 18 | ], 19 | providers: [], 20 | bootstrap: [AppComponent] 21 | }) 22 | export class AppModule { } 23 | -------------------------------------------------------------------------------- /Chapter05/src/app/editor.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { EditorService } from './editor.service'; 4 | 5 | describe('EditorService', () => { 6 | let service: EditorService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(EditorService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter05/src/app/editor.service.ts: -------------------------------------------------------------------------------- 1 | import { Inject } from '@angular/core'; 2 | import { Injectable } from '@angular/core'; 3 | import { ElectronWindow, WINDOW } from './window'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class EditorService { 9 | 10 | private get ipcRenderer(): Electron.IpcRenderer { 11 | return this.window.require('electron').ipcRenderer; 12 | } 13 | 14 | constructor(@Inject(WINDOW) private window: ElectronWindow) { } 15 | 16 | getContent(): Promise { 17 | return this.ipcRenderer.invoke('getContent'); 18 | } 19 | 20 | setContent(content: string) { 21 | this.ipcRenderer.invoke('setContent', content); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Chapter05/src/app/editor/editor.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter05/src/app/editor/editor.component.css -------------------------------------------------------------------------------- /Chapter05/src/app/editor/editor.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Chapter05/src/app/editor/editor.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { EditorComponent } from './editor.component'; 4 | 5 | describe('EditorComponent', () => { 6 | let component: EditorComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ EditorComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(EditorComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter05/src/app/editor/editor.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { EditorService } from '../editor.service'; 3 | 4 | @Component({ 5 | selector: 'app-editor', 6 | templateUrl: './editor.component.html', 7 | styleUrls: ['./editor.component.css'] 8 | }) 9 | export class EditorComponent implements OnInit { 10 | 11 | myContent = ''; 12 | 13 | constructor(private editorService: EditorService) { } 14 | 15 | ngOnInit(): void { 16 | this.getContent(); 17 | } 18 | 19 | private async getContent() { 20 | this.myContent = await this.editorService.getContent(); 21 | } 22 | 23 | saveContent(content: string) { 24 | this.editorService.setContent(content); 25 | } 26 | 27 | } 28 | -------------------------------------------------------------------------------- /Chapter05/src/app/window.ts: -------------------------------------------------------------------------------- 1 | import { InjectionToken } from '@angular/core'; 2 | 3 | export const WINDOW = new InjectionToken('Global window object', { 4 | factory: () => window 5 | }); 6 | 7 | export interface ElectronWindow extends Window { 8 | require(module: string): any; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter05/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter05/src/electron/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-editor", 3 | "main": "main.js" 4 | } 5 | -------------------------------------------------------------------------------- /Chapter05/src/electron/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.json", 3 | "compilerOptions": { 4 | "importHelpers": false 5 | }, 6 | "include": [ 7 | "**/*.ts" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter05/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter05/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter05/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter05/src/favicon.ico -------------------------------------------------------------------------------- /Chapter05/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyEditor 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter05/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter05/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | html, body { 3 | margin: 0; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | .ng-wig, .nw-editor-container, .nw-editor { 9 | display: flex !important; 10 | flex-direction: column; 11 | height: 100% !important; 12 | overflow: hidden; 13 | } 14 | -------------------------------------------------------------------------------- /Chapter05/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [ 7 | "electron" 8 | ] 9 | }, 10 | "files": [ 11 | "src/main.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /Chapter05/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter05/webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const src = path.join(process.cwd(), 'src', 'electron'); 3 | 4 | module.exports = { 5 | entry: path.join(src, 'main.ts'), 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.ts$/, 10 | loader: 'ts-loader', 11 | options: { 12 | configFile: path.join(src, 'tsconfig.json') 13 | } 14 | } 15 | ] 16 | }, 17 | target: 'electron-main' 18 | }; 19 | -------------------------------------------------------------------------------- /Chapter05/webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const baseConfig = require('./webpack.config'); 3 | 4 | module.exports = { 5 | ...baseConfig, 6 | mode: 'development', 7 | devtool: 'source-map', 8 | output: { 9 | path: path.join(process.cwd(), 'dist', 'my-editor'), 10 | filename: 'shell.js' 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /Chapter05/webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const baseConfig = require('./webpack.config'); 3 | const CopyWebpackPlugin = require('copy-webpack-plugin'); 4 | 5 | module.exports = { 6 | ...baseConfig, 7 | output: { 8 | path: path.join(process.cwd(), 'dist', 'my-editor'), 9 | filename: 'main.js' 10 | }, 11 | plugins: [ 12 | new CopyWebpackPlugin({ 13 | patterns: [ 14 | { 15 | context: path.join(process.cwd(), 'src', 'electron'), 16 | from: 'package.json' 17 | } 18 | ] 19 | }) 20 | ] 21 | }; 22 | -------------------------------------------------------------------------------- /Chapter06/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter06/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter06/.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | .tmp 7 | *.tmp 8 | *.tmp.* 9 | *.sublime-project 10 | *.sublime-workspace 11 | .DS_Store 12 | Thumbs.db 13 | UserInterfaceState.xcuserstate 14 | $RECYCLE.BIN/ 15 | 16 | *.log 17 | log.txt 18 | npm-debug.log* 19 | 20 | /.idea 21 | /.ionic 22 | /.sass-cache 23 | /.sourcemaps 24 | /.versions 25 | /.vscode 26 | /coverage 27 | /dist 28 | /node_modules 29 | /platforms 30 | /plugins 31 | /www 32 | /.firebaserc 33 | -------------------------------------------------------------------------------- /Chapter06/android/.idea/.gitignore: -------------------------------------------------------------------------------- 1 | # Default ignored files 2 | /shelf/ 3 | /workspace.xml 4 | -------------------------------------------------------------------------------- /Chapter06/android/.idea/compiler.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Chapter06/android/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 9 | -------------------------------------------------------------------------------- /Chapter06/android/.idea/runConfigurations.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 10 | -------------------------------------------------------------------------------- /Chapter06/android/app/.gitignore: -------------------------------------------------------------------------------- 1 | /build/* 2 | !/build/.npmkeep 3 | -------------------------------------------------------------------------------- /Chapter06/android/app/capacitor.build.gradle: -------------------------------------------------------------------------------- 1 | // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN 2 | 3 | android { 4 | compileOptions { 5 | sourceCompatibility JavaVersion.VERSION_1_8 6 | targetCompatibility JavaVersion.VERSION_1_8 7 | } 8 | } 9 | 10 | apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle" 11 | dependencies { 12 | implementation project(':capacitor-app') 13 | implementation project(':capacitor-camera') 14 | implementation project(':capacitor-geolocation') 15 | implementation project(':capacitor-haptics') 16 | implementation project(':capacitor-keyboard') 17 | 18 | } 19 | 20 | 21 | if (hasProperty('postBuildExtras')) { 22 | postBuildExtras() 23 | } 24 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/assets/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "phototag", 4 | "webDir": "www", 5 | "bundledWebRuntime": false 6 | } 7 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/assets/capacitor.plugins.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "pkg": "@capacitor/app", 4 | "classpath": "com.capacitorjs.plugins.app.AppPlugin" 5 | }, 6 | { 7 | "pkg": "@capacitor/camera", 8 | "classpath": "com.capacitorjs.plugins.camera.CameraPlugin" 9 | }, 10 | { 11 | "pkg": "@capacitor/geolocation", 12 | "classpath": "com.capacitorjs.plugins.geolocation.GeolocationPlugin" 13 | }, 14 | { 15 | "pkg": "@capacitor/haptics", 16 | "classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin" 17 | }, 18 | { 19 | "pkg": "@capacitor/keyboard", 20 | "classpath": "com.capacitorjs.plugins.keyboard.KeyboardPlugin" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/java/io/ionic/starter/MainActivity.java: -------------------------------------------------------------------------------- 1 | package io.ionic.starter; 2 | 3 | import com.getcapacitor.BridgeActivity; 4 | 5 | public class MainActivity extends BridgeActivity {} 6 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-land-hdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-land-hdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-land-mdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-land-mdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-land-xhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-land-xhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-land-xxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-land-xxhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-land-xxxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-land-xxxhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-port-hdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-port-hdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-port-mdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-port-mdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-port-xhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-port-xhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-port-xxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-port-xxhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable-port-xxxhdpi/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable-port-xxxhdpi/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/drawable/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/drawable/splash.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/layout/activity_main.xml: -------------------------------------------------------------------------------- 1 | 2 | 8 | 9 | 12 | 13 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-hdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-mdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_foreground.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher_round.png -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/values/ic_launcher_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | #FFFFFF 4 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/values/strings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | phototag 4 | phototag 5 | io.ionic.starter 6 | io.ionic.starter 7 | 8 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/xml/config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/main/res/xml/file_paths.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /Chapter06/android/app/src/test/java/com/getcapacitor/myapp/ExampleUnitTest.java: -------------------------------------------------------------------------------- 1 | package com.getcapacitor.myapp; 2 | 3 | import static org.junit.Assert.*; 4 | 5 | import org.junit.Test; 6 | 7 | /** 8 | * Example local unit test, which will execute on the development machine (host). 9 | * 10 | * @see Testing documentation 11 | */ 12 | public class ExampleUnitTest { 13 | 14 | @Test 15 | public void addition_isCorrect() throws Exception { 16 | assertEquals(4, 2 + 2); 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter06/android/build.gradle: -------------------------------------------------------------------------------- 1 | // Top-level build file where you can add configuration options common to all sub-projects/modules. 2 | 3 | buildscript { 4 | 5 | repositories { 6 | google() 7 | jcenter() 8 | } 9 | dependencies { 10 | classpath 'com.android.tools.build:gradle:4.2.1' 11 | classpath 'com.google.gms:google-services:4.3.5' 12 | 13 | // NOTE: Do not place your application dependencies here; they belong 14 | // in the individual module build.gradle files 15 | } 16 | } 17 | 18 | apply from: "variables.gradle" 19 | 20 | allprojects { 21 | repositories { 22 | google() 23 | jcenter() 24 | } 25 | } 26 | 27 | task clean(type: Delete) { 28 | delete rootProject.buildDir 29 | } 30 | -------------------------------------------------------------------------------- /Chapter06/android/gradle/wrapper/gradle-wrapper.jar: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/android/gradle/wrapper/gradle-wrapper.jar -------------------------------------------------------------------------------- /Chapter06/android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | distributionBase=GRADLE_USER_HOME 2 | distributionPath=wrapper/dists 3 | distributionUrl=https\://services.gradle.org/distributions/gradle-7.0-all.zip 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | -------------------------------------------------------------------------------- /Chapter06/android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | include ':capacitor-cordova-android-plugins' 3 | project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/') 4 | 5 | apply from: 'capacitor.settings.gradle' -------------------------------------------------------------------------------- /Chapter06/android/variables.gradle: -------------------------------------------------------------------------------- 1 | ext { 2 | minSdkVersion = 21 3 | compileSdkVersion = 30 4 | targetSdkVersion = 30 5 | androidxActivityVersion = '1.2.0' 6 | androidxAppCompatVersion = '1.2.0' 7 | androidxCoordinatorLayoutVersion = '1.1.0' 8 | androidxCoreVersion = '1.3.2' 9 | androidxFragmentVersion = '1.3.0' 10 | junitVersion = '4.13.1' 11 | androidxJunitVersion = '1.1.2' 12 | androidxEspressoCoreVersion = '3.3.0' 13 | cordovaAndroidVersion = '7.0.0' 14 | } -------------------------------------------------------------------------------- /Chapter06/capacitor.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "appId": "io.ionic.starter", 3 | "appName": "phototag", 4 | "webDir": "www", 5 | "bundledWebRuntime": false 6 | } 7 | -------------------------------------------------------------------------------- /Chapter06/e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('new App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | describe('default screen', () => { 10 | beforeEach(() => { 11 | page.navigateTo('/Inbox'); 12 | }); 13 | it('should say Inbox', () => { 14 | expect(page.getParagraphText()).toContain('Inbox'); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /Chapter06/e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(destination) { 5 | return browser.get(destination); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.deepCss('app-root ion-content')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Chapter06/e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es2018", 7 | "types": [ 8 | "jasmine", 9 | "node" 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Chapter06/extra-webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | resolve: { 3 | fallback: { 4 | fs: "empty", 5 | Buffer: false, 6 | http: "empty", 7 | https: "empty", 8 | zlib: "empty" 9 | } 10 | }, 11 | module: { 12 | unknownContextCritical: false 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /Chapter06/firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": [ 3 | { 4 | "target": "app", 5 | "public": "www", 6 | "ignore": [ 7 | "**/.*" 8 | ], 9 | "headers": [ 10 | { 11 | "source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)", 12 | "headers": [ 13 | { 14 | "key": "Cache-Control", 15 | "value": "public,max-age=31536000,immutable" 16 | } 17 | ] 18 | } 19 | ], 20 | "rewrites": [ 21 | { 22 | "source": "**", 23 | "destination": "/index.html" 24 | } 25 | ] 26 | } 27 | ] 28 | } -------------------------------------------------------------------------------- /Chapter06/ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phototag", 3 | "integrations": { 4 | "capacitor": {} 5 | }, 6 | "type": "angular", 7 | "id": "82530102" 8 | } -------------------------------------------------------------------------------- /Chapter06/resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/resources/icon.png -------------------------------------------------------------------------------- /Chapter06/resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/resources/splash.png -------------------------------------------------------------------------------- /Chapter06/src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; 3 | 4 | const routes: Routes = [ 5 | { 6 | path: '', 7 | redirectTo: 'capture', 8 | pathMatch: 'full' 9 | }, 10 | { 11 | path: 'capture', 12 | loadChildren: () => import('./capture/capture.module').then( m => m.CapturePageModule) 13 | }, { 14 | path: 'view', 15 | loadChildren: () => import('./view/view.module').then( m => m.ViewPageModule) 16 | } 17 | 18 | 19 | ]; 20 | 21 | @NgModule({ 22 | imports: [ 23 | RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) 24 | ], 25 | exports: [RouterModule] 26 | }) 27 | export class AppRoutingModule {} 28 | -------------------------------------------------------------------------------- /Chapter06/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | @Component({ 3 | selector: 'app-root', 4 | templateUrl: 'app.component.html', 5 | styleUrls: ['app.component.scss'], 6 | }) 7 | export class AppComponent { 8 | public appPages = [ 9 | { 10 | title: 'Take a photo', 11 | url: '/capture', 12 | icon: 'camera' 13 | }, 14 | { 15 | title: 'View gallery', 16 | url: '/view', 17 | icon: 'globe' 18 | } 19 | ]; 20 | } 21 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { CapturePage } from './capture.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: CapturePage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class CapturePageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { CapturePageRoutingModule } from './capture-routing.module'; 8 | 9 | import { CapturePage } from './capture.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | CapturePageRoutingModule 17 | ], 18 | declarations: [CapturePage] 19 | }) 20 | export class CapturePageModule {} 21 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Take a photo 7 | 8 | 9 | 10 | 11 | 12 | 13 | Take a photo 14 | 15 | 16 |
17 | Take a nice photo with your camera 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture.page.scss: -------------------------------------------------------------------------------- 1 | #container { 2 | text-align: center; 3 | position: absolute; 4 | left: 0; 5 | right: 0; 6 | top: 50%; 7 | transform: translateY(-50%); 8 | } 9 | 10 | #container strong { 11 | font-size: 20px; 12 | line-height: 26px; 13 | } 14 | 15 | #container ion-fab { 16 | margin-top: 60px; 17 | } 18 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { CapturePage } from './capture.page'; 5 | 6 | describe('CapturePage', () => { 7 | let component: CapturePage; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(waitForAsync(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ CapturePage ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(CapturePage); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /Chapter06/src/app/capture/capture.page.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { PhotoService } from '../photo.service'; 3 | 4 | @Component({ 5 | selector: 'app-capture', 6 | templateUrl: './capture.page.html', 7 | styleUrls: ['./capture.page.scss'], 8 | }) 9 | export class CapturePage implements OnInit { 10 | 11 | constructor(private photoService: PhotoService) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | openCamera() { 17 | this.photoService.takePhoto(); 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /Chapter06/src/app/cesium.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { CesiumService } from './cesium.service'; 4 | 5 | describe('CesiumService', () => { 6 | let service: CesiumService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(CesiumService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter06/src/app/photo.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { PhotoService } from './photo.service'; 4 | 5 | describe('PhotoService', () => { 6 | let service: PhotoService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(PhotoService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter06/src/app/photo.ts: -------------------------------------------------------------------------------- 1 | export interface Photo { 2 | url: string; 3 | lat: number; 4 | lng: number; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | import { ViewPage } from './view.page'; 5 | 6 | const routes: Routes = [ 7 | { 8 | path: '', 9 | component: ViewPage 10 | } 11 | ]; 12 | 13 | @NgModule({ 14 | imports: [RouterModule.forChild(routes)], 15 | exports: [RouterModule], 16 | }) 17 | export class ViewPageRoutingModule {} 18 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { FormsModule } from '@angular/forms'; 4 | 5 | import { IonicModule } from '@ionic/angular'; 6 | 7 | import { ViewPageRoutingModule } from './view-routing.module'; 8 | 9 | import { ViewPage } from './view.page'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | IonicModule, 16 | ViewPageRoutingModule 17 | ], 18 | declarations: [ViewPage] 19 | }) 20 | export class ViewPageModule {} 21 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view.page.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | View gallery 7 | 8 | 9 | 10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view.page.scss: -------------------------------------------------------------------------------- 1 | div { 2 | height: 100%; 3 | width: 100%; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view.page.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing'; 2 | import { IonicModule } from '@ionic/angular'; 3 | 4 | import { ViewPage } from './view.page'; 5 | 6 | describe('ViewPage', () => { 7 | let component: ViewPage; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(waitForAsync(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ ViewPage ], 13 | imports: [IonicModule.forRoot()] 14 | }).compileComponents(); 15 | 16 | fixture = TestBed.createComponent(ViewPage); 17 | component = fixture.componentInstance; 18 | fixture.detectChanges(); 19 | })); 20 | 21 | it('should create', () => { 22 | expect(component).toBeTruthy(); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /Chapter06/src/app/view/view.page.ts: -------------------------------------------------------------------------------- 1 | import { AfterViewInit, Component, OnInit, ElementRef, ViewChild } from '@angular/core'; 2 | import { Viewer } from 'cesium'; 3 | import { CesiumService } from '../cesium.service'; 4 | 5 | @Component({ 6 | selector: 'app-view', 7 | templateUrl: './view.page.html', 8 | styleUrls: ['./view.page.scss'], 9 | }) 10 | export class ViewPage implements OnInit, AfterViewInit { 11 | 12 | @ViewChild('mapContainer') content: ElementRef; 13 | 14 | constructor(private cesiumService: CesiumService) { } 15 | 16 | ngOnInit() { 17 | } 18 | 19 | ngAfterViewInit() { 20 | this.cesiumService.register(new Viewer(this.content.nativeElement)); 21 | this.cesiumService.addPhotos(); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Chapter06/src/assets/icon/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter06/src/assets/icon/favicon.png -------------------------------------------------------------------------------- /Chapter06/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | firebaseConfig: { 4 | apiKey: '', 5 | authDomain: '', 6 | projectId: '', 7 | storageBucket: '', 8 | messagingSenderId: '', 9 | appId: '' 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /Chapter06/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | 14 | // eslint-disable-next-line @typescript-eslint/dot-notation 15 | window['CESIUM_BASE_URL'] = '/assets/cesium/'; 16 | -------------------------------------------------------------------------------- /Chapter06/src/zone-flags.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Prevents Angular change detection from 3 | * running with certain Web Component callbacks 4 | */ 5 | // eslint-disable-next-line no-underscore-dangle 6 | (window as any).__Zone_disable_customElements = true; 7 | -------------------------------------------------------------------------------- /Chapter06/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": ["cesium"] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter06/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "compileOnSave": false, 4 | "compilerOptions": { 5 | "baseUrl": "./", 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "downlevelIteration": true, 10 | "experimentalDecorators": true, 11 | "moduleResolution": "node", 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "module": "es2020", 15 | "lib": ["es2018", "dom"] 16 | }, 17 | "angularCompilerOptions": { 18 | "enableI18nLegacyMessageIdFormat": false, 19 | "strictInjectionParameters": true, 20 | "strictInputAccessModifiers": true, 21 | "strictTemplates": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Chapter06/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter07/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter07/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Chapter07/src/app/app.component.scss: -------------------------------------------------------------------------------- 1 | .toolbar { 2 | height: 60px; 3 | background-color: #1976d2; 4 | color: white; 5 | font-weight: 600; 6 | } 7 | 8 | .toolbar img { 9 | margin: 0 16px; 10 | } 11 | 12 | .toolbar i { 13 | font-size: 1.5rem; 14 | color: white; 15 | margin: 0 16px; 16 | } 17 | 18 | .toolbar a { 19 | margin-bottom: 5px; 20 | } 21 | 22 | .toolbar i:hover { 23 | opacity: 0.8; 24 | } 25 | 26 | .content { 27 | margin: 52px auto 32px; 28 | padding: 0 16px; 29 | } 30 | -------------------------------------------------------------------------------- /Chapter07/src/app/app.server.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { ServerModule, ServerTransferStateModule } from '@angular/platform-server'; 3 | 4 | import { AppModule } from './app.module'; 5 | import { AppComponent } from './app.component'; 6 | 7 | @NgModule({ 8 | imports: [ 9 | AppModule, 10 | ServerModule, 11 | ServerTransferStateModule 12 | ], 13 | bootstrap: [AppComponent], 14 | }) 15 | export class AppServerModule {} 16 | -------------------------------------------------------------------------------- /Chapter07/src/app/github.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { GithubService } from './github.service'; 4 | 5 | describe('GithubService', () => { 6 | let service: GithubService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(GithubService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter07/src/app/organization.ts: -------------------------------------------------------------------------------- 1 | export interface Organization { 2 | login: string; 3 | description: string; 4 | avatar_url: string; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter07/src/app/organizations/organizations.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 |
5 | 6 |
7 |
8 |
{{org.login}}
9 |
10 |

{{org.description}}

11 |
12 |
13 | 14 |
15 | 16 | -------------------------------------------------------------------------------- /Chapter07/src/app/organizations/organizations.component.scss: -------------------------------------------------------------------------------- 1 | img { 2 | width: 60px; 3 | height: 40px; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter07/src/app/organizations/organizations.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { OrganizationsComponent } from './organizations.component'; 4 | 5 | describe('OrganizationsComponent', () => { 6 | let component: OrganizationsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ OrganizationsComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(OrganizationsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter07/src/app/organizations/organizations.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { GithubService } from '../github.service'; 4 | import { Organization } from '../organization'; 5 | 6 | @Component({ 7 | selector: 'app-organizations', 8 | templateUrl: './organizations.component.html', 9 | styleUrls: ['./organizations.component.scss'] 10 | }) 11 | export class OrganizationsComponent implements OnInit { 12 | 13 | orgs$: Observable | undefined; 14 | 15 | constructor(private githubService: GithubService) { } 16 | 17 | ngOnInit(): void { 18 | this.orgs$ = this.githubService.getOrganizations(); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /Chapter07/src/app/panel/panel.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | {{caption}} 5 |
6 |
7 | 8 |
9 |
10 | -------------------------------------------------------------------------------- /Chapter07/src/app/panel/panel.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/app/panel/panel.component.scss -------------------------------------------------------------------------------- /Chapter07/src/app/panel/panel.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PanelComponent } from './panel.component'; 4 | 5 | describe('PanelComponent', () => { 6 | let component: PanelComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ PanelComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PanelComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter07/src/app/panel/panel.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-panel', 5 | templateUrl: './panel.component.html', 6 | styleUrls: ['./panel.component.scss'] 7 | }) 8 | export class PanelComponent implements OnInit { 9 | 10 | @Input() caption: string = ''; 11 | @Input() icon: string = ''; 12 | 13 | constructor() { } 14 | 15 | ngOnInit(): void { 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/src/app/personal-info/personal-info.component.html: -------------------------------------------------------------------------------- 1 |
2 | {{user.name}} photo 3 |
4 |
{{user.name}}
5 |

{{user.bio}}

6 |
7 |
    8 |
  • 9 | {{user.location}} 10 |
    • 11 |
  • 12 | {{user.followers}} 13 |
    • 14 |
15 |
16 | Twitter 17 | Personal blog 18 |
19 |
20 | -------------------------------------------------------------------------------- /Chapter07/src/app/personal-info/personal-info.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/app/personal-info/personal-info.component.scss -------------------------------------------------------------------------------- /Chapter07/src/app/personal-info/personal-info.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PersonalInfoComponent } from './personal-info.component'; 4 | 5 | describe('PersonalInfoComponent', () => { 6 | let component: PersonalInfoComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ PersonalInfoComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PersonalInfoComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter07/src/app/personal-info/personal-info.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { GithubService } from '../github.service'; 4 | import { User } from '../user'; 5 | 6 | @Component({ 7 | selector: 'app-personal-info', 8 | templateUrl: './personal-info.component.html', 9 | styleUrls: ['./personal-info.component.scss'] 10 | }) 11 | export class PersonalInfoComponent implements OnInit { 12 | 13 | user$: Observable | undefined; 14 | 15 | constructor(private githubService: GithubService) { } 16 | 17 | ngOnInit(): void { 18 | this.user$ = this.githubService.getUser(); 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /Chapter07/src/app/repositories/repositories.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/app/repositories/repositories.component.scss -------------------------------------------------------------------------------- /Chapter07/src/app/repositories/repositories.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { RepositoriesComponent } from './repositories.component'; 4 | 5 | describe('RepositoriesComponent', () => { 6 | let component: RepositoriesComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ RepositoriesComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(RepositoriesComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter07/src/app/repositories/repositories.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Observable } from 'rxjs'; 3 | import { map } from 'rxjs/operators'; 4 | import { GithubService } from '../github.service'; 5 | import { Repository } from '../repository'; 6 | 7 | @Component({ 8 | selector: 'app-repositories', 9 | templateUrl: './repositories.component.html', 10 | styleUrls: ['./repositories.component.scss'] 11 | }) 12 | export class RepositoriesComponent implements OnInit { 13 | 14 | repos$: Observable | undefined; 15 | 16 | constructor(private githubService: GithubService) { } 17 | 18 | ngOnInit(): void { 19 | this.repos$ = this.githubService.getRepos().pipe( 20 | map(repos => repos.filter(repo => !repo.fork)) 21 | ); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Chapter07/src/app/repository.ts: -------------------------------------------------------------------------------- 1 | export interface Repository { 2 | name: string; 3 | html_url: string; 4 | description: string; 5 | fork: boolean; 6 | stargazers_count: number; 7 | language: string; 8 | forks_count: number; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter07/src/app/user.ts: -------------------------------------------------------------------------------- 1 | export interface User { 2 | avatar_url: string; 3 | name: string; 4 | blog: string; 5 | location: string; 6 | bio: string; 7 | twitter_username: string; 8 | followers: number; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter07/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter07/src/assets/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/assets/angular.png -------------------------------------------------------------------------------- /Chapter07/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | username: '', 4 | apiUrl: 'https://api.github.com' 5 | }; 6 | -------------------------------------------------------------------------------- /Chapter07/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | username: '', 8 | apiUrl: 'https://api.github.com' 9 | }; 10 | 11 | /* 12 | * For easier debugging in development mode, you can import the following file 13 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 14 | * 15 | * This import should be commented out in production mode because it will have a negative impact 16 | * on performance if an error is thrown. 17 | */ 18 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 19 | -------------------------------------------------------------------------------- /Chapter07/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter07/src/favicon.ico -------------------------------------------------------------------------------- /Chapter07/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | GhPortfolio 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter07/src/main.server.ts: -------------------------------------------------------------------------------- 1 | /*************************************************************************************************** 2 | * Initialize the server environment - for example, adding DOM built-in types to the global scope. 3 | * 4 | * NOTE: 5 | * This import must come before any imports (direct or transitive) that rely on DOM built-ins being 6 | * available, such as `@angular/elements`. 7 | */ 8 | import '@angular/platform-server/init'; 9 | 10 | import { enableProdMode } from '@angular/core'; 11 | 12 | import { environment } from './environments/environment'; 13 | 14 | if (environment.production) { 15 | enableProdMode(); 16 | } 17 | 18 | export { AppServerModule } from './app/app.server.module'; 19 | export { renderModule, renderModuleFactory } from '@angular/platform-server'; 20 | -------------------------------------------------------------------------------- /Chapter07/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | document.addEventListener('DOMContentLoaded', () => { 12 | platformBrowserDynamic().bootstrapModule(AppModule) 13 | .catch(err => console.error(err)); 14 | }); 15 | -------------------------------------------------------------------------------- /Chapter07/src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | @import "~bootstrap/scss/bootstrap"; 3 | @import "~bootstrap-icons/font/bootstrap-icons"; 4 | -------------------------------------------------------------------------------- /Chapter07/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter07/tsconfig.server.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.app.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/server", 6 | "target": "es2019", 7 | "types": [ 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "src/main.server.ts", 13 | "server.ts" 14 | ], 15 | "angularCompilerOptions": { 16 | "entryModule": "./src/app/app.server.module#AppServerModule" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter07/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter08/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /Chapter08/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | -------------------------------------------------------------------------------- /Chapter08/.prettierignore: -------------------------------------------------------------------------------- 1 | # Add files here to ignore them from prettier formatting 2 | 3 | /dist 4 | /coverage 5 | -------------------------------------------------------------------------------- /Chapter08/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true 3 | } -------------------------------------------------------------------------------- /Chapter08/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "angular.ng-template", 4 | "nrwl.angular-console", 5 | "esbenp.prettier-vscode", 6 | "firsttris.vscode-jest-runner", 7 | "dbaeumer.vscode-eslint" 8 | ] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter08/apps/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/apps/.gitkeep -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"], 3 | "ignorePatterns": ["!**/*"], 4 | "overrides": [ 5 | { 6 | "files": ["*.ts", "*.tsx", "*.js", "*.jsx"], 7 | "parserOptions": { 8 | "project": "apps/tour-e2e/tsconfig.*?.json" 9 | }, 10 | "rules": {} 11 | }, 12 | { 13 | "files": ["src/plugins/index.js"], 14 | "rules": { 15 | "@typescript-eslint/no-var-requires": "off", 16 | "no-undef": "off" 17 | } 18 | } 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/cypress.json: -------------------------------------------------------------------------------- 1 | { 2 | "fileServerFolder": ".", 3 | "fixturesFolder": "./src/fixtures", 4 | "integrationFolder": "./src/integration", 5 | "modifyObstructiveCode": false, 6 | "pluginsFile": "./src/plugins/index", 7 | "supportFile": "./src/support/index.ts", 8 | "video": true, 9 | "videosFolder": "../../dist/cypress/apps/tour-e2e/videos", 10 | "screenshotsFolder": "../../dist/cypress/apps/tour-e2e/screenshots", 11 | "chromeWebSecurity": false 12 | } 13 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/src/fixtures/example.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Using fixtures to represent data", 3 | "email": "hello@cypress.io" 4 | } 5 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/src/integration/app.spec.ts: -------------------------------------------------------------------------------- 1 | import { getGreeting } from '../support/app.po'; 2 | 3 | describe('tour', () => { 4 | beforeEach(() => cy.visit('/')); 5 | 6 | it('should display welcome message', () => { 7 | // Custom command example, see `../support/commands.ts` file 8 | cy.login('my-email@something.com', 'myPassword'); 9 | 10 | // Function helper example, see `../support/app.po.ts` file 11 | getGreeting().contains('Welcome to tour!'); 12 | }); 13 | }); 14 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/src/support/app.po.ts: -------------------------------------------------------------------------------- 1 | export const getGreeting = () => cy.get('h1'); 2 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/src/support/index.ts: -------------------------------------------------------------------------------- 1 | // *********************************************************** 2 | // This example support/index.js is processed and 3 | // loaded automatically before your test files. 4 | // 5 | // This is a great place to put global configuration and 6 | // behavior that modifies Cypress. 7 | // 8 | // You can change the location of this file or turn off 9 | // automatically serving support files with the 10 | // 'supportFile' configuration option. 11 | // 12 | // You can read more here: 13 | // https://on.cypress.io/configuration 14 | // *********************************************************** 15 | 16 | // Import commands.js using ES2015 syntax: 17 | import './commands'; 18 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "sourceMap": false, 5 | "outDir": "../../dist/out-tsc", 6 | "allowJs": true, 7 | "types": ["cypress", "node"], 8 | "forceConsistentCasingInFileNames": true, 9 | "strict": true, 10 | "noImplicitReturns": true, 11 | "noFallthroughCasesInSwitch": true 12 | }, 13 | "include": ["src/**/*.ts", "src/**/*.js"], 14 | "angularCompilerOptions": { 15 | "strictInjectionParameters": true, 16 | "strictInputAccessModifiers": true, 17 | "strictTemplates": true 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Chapter08/apps/tour-e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.e2e.json" 8 | } 9 | ] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'tour', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | astTransformers: { 10 | before: [ 11 | 'jest-preset-angular/build/InlineFilesTransformer', 12 | 'jest-preset-angular/build/StripStylesTransformer', 13 | ], 14 | }, 15 | }, 16 | }, 17 | coverageDirectory: '../../coverage/apps/tour', 18 | snapshotSerializers: [ 19 | 'jest-preset-angular/build/serializers/no-ng-attributes', 20 | 'jest-preset-angular/build/serializers/ng-snapshot', 21 | 'jest-preset-angular/build/serializers/html-comment', 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/apps/tour/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'packt-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'], 7 | }) 8 | export class AppComponent { 9 | title = 'tour'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/apps/tour/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/apps/tour/src/favicon.ico -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Tour 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic() 12 | .bootstrapModule(AppModule) 13 | .catch((err) => console.error(err)); 14 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | html, body { height: 100%; } 4 | body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } 5 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "types": [] 6 | }, 7 | "files": ["src/main.ts", "src/polyfills.ts"], 8 | "include": ["src/**/*.d.ts"] 9 | } 10 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/tsconfig.editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "include": ["**/*.ts"], 4 | "compilerOptions": { 5 | "types": ["jest", "node"] 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.app.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | }, 12 | { 13 | "path": "./tsconfig.editor.json" 14 | } 15 | ], 16 | "compilerOptions": { 17 | "forceConsistentCasingInFileNames": true, 18 | "strict": true, 19 | "noImplicitReturns": true, 20 | "noFallthroughCasesInSwitch": true 21 | }, 22 | "angularCompilerOptions": { 23 | "strictInjectionParameters": true, 24 | "strictInputAccessModifiers": true, 25 | "strictTemplates": true 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Chapter08/apps/tour/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | projects: [ 3 | '/apps/tour', 4 | '/libs/visitor', 5 | '/libs/admin', 6 | '/libs/poi', 7 | ], 8 | }; 9 | -------------------------------------------------------------------------------- /Chapter08/jest.preset.js: -------------------------------------------------------------------------------- 1 | const nxPreset = require('@nrwl/jest/preset'); 2 | 3 | module.exports = { ...nxPreset }; 4 | -------------------------------------------------------------------------------- /Chapter08/libs/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/libs/.gitkeep -------------------------------------------------------------------------------- /Chapter08/libs/admin/README.md: -------------------------------------------------------------------------------- 1 | # admin 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test admin` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'admin', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | astTransformers: { 10 | before: [ 11 | 'jest-preset-angular/build/InlineFilesTransformer', 12 | 'jest-preset-angular/build/StripStylesTransformer', 13 | ], 14 | }, 15 | }, 16 | }, 17 | coverageDirectory: '../../coverage/libs/admin', 18 | snapshotSerializers: [ 19 | 'jest-preset-angular/build/serializers/no-ng-attributes', 20 | 'jest-preset-angular/build/serializers/ng-snapshot', 21 | 'jest-preset-angular/build/serializers/html-comment', 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/admin.module'; 2 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/libs/admin/src/lib/admin.component.css -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.component.html: -------------------------------------------------------------------------------- 1 |
2 | 6 | 7 |
8 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminComponent } from './admin.component'; 4 | 5 | describe('AdminComponent', () => { 6 | let component: AdminComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ AdminComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdminComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AdminComponent } from './admin.component'; 4 | import { RouterModule } from '@angular/router'; 5 | import { PoiModule } from '@packt/poi'; 6 | import { ChartsModule } from 'ng2-charts'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | RouterModule.forChild([ 12 | { path: '', component: AdminComponent } 13 | ]), 14 | PoiModule, 15 | ChartsModule 16 | ], 17 | declarations: [ 18 | AdminComponent 19 | ], 20 | }) 21 | export class AdminModule {} 22 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminService } from './admin.service'; 4 | 5 | describe('AdminService', () => { 6 | let service: AdminService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(AdminService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/lib/admin.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { PoiEntity } from '@packt/poi'; 3 | 4 | @Injectable({ 5 | providedIn: 'root' 6 | }) 7 | export class AdminService { 8 | 9 | constructor() { } 10 | 11 | getStatistics(pois: PoiEntity[]): number[] { 12 | return pois.map(poi => { 13 | const stat = localStorage.getItem('tour-' + poi.id) ?? 0; 14 | return +stat; 15 | }); 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ], 13 | "compilerOptions": { 14 | "forceConsistentCasingInFileNames": true, 15 | "strict": true, 16 | "noImplicitReturns": true, 17 | "noFallthroughCasesInSwitch": true 18 | }, 19 | "angularCompilerOptions": { 20 | "strictInjectionParameters": true, 21 | "strictInputAccessModifiers": true, 22 | "strictTemplates": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "target": "es2015", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": ["dom", "es2018"] 11 | }, 12 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"], 13 | "include": ["**/*.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter08/libs/admin/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/README.md: -------------------------------------------------------------------------------- 1 | # poi 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test poi` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'poi', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | astTransformers: { 10 | before: [ 11 | 'jest-preset-angular/build/InlineFilesTransformer', 12 | 'jest-preset-angular/build/StripStylesTransformer', 13 | ], 14 | }, 15 | }, 16 | }, 17 | coverageDirectory: '../../coverage/libs/poi', 18 | snapshotSerializers: [ 19 | 'jest-preset-angular/build/serializers/no-ng-attributes', 20 | 'jest-preset-angular/build/serializers/ng-snapshot', 21 | 'jest-preset-angular/build/serializers/html-comment', 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/index.ts: -------------------------------------------------------------------------------- 1 | import * as PoiActions from './lib/+state/poi.actions'; 2 | import * as PoiFeature from './lib/+state/poi.reducer'; 3 | import * as PoiSelectors from './lib/+state/poi.selectors'; 4 | export { PoiActions, PoiFeature, PoiSelectors }; 5 | export * from './lib/+state/poi.models'; 6 | export * from './lib/poi.module'; 7 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/lib/+state/poi.actions.ts: -------------------------------------------------------------------------------- 1 | import { createAction, props } from '@ngrx/store'; 2 | import { PoiEntity } from './poi.models'; 3 | 4 | export const init = createAction('[Poi Page] Init'); 5 | 6 | export const loadPoiSuccess = createAction( 7 | '[Poi/API] Load Poi Success', 8 | props<{ poi: PoiEntity[] }>() 9 | ); 10 | 11 | export const loadPoiFailure = createAction( 12 | '[Poi/API] Load Poi Failure', 13 | props<{ error: any }>() 14 | ); 15 | 16 | export const selectPoi = createAction( 17 | '[Poi/API] Select Poi', 18 | props<{ poiId: string | number }>() 19 | ); 20 | 21 | export const visitPoi = createAction( 22 | '[Poi/API] Visit Poi', 23 | props<{ poiId: string | number }>() 24 | ) 25 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/lib/+state/poi.models.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Interface for the 'Poi' data 3 | */ 4 | export interface PoiEntity { 5 | id: string | number; // Primary ID 6 | name: string; 7 | lat: number; 8 | lng: number; 9 | description: string; 10 | imgUrl: string; 11 | } 12 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/lib/poi.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { StoreModule } from '@ngrx/store'; 4 | import { EffectsModule } from '@ngrx/effects'; 5 | import * as fromPoi from './+state/poi.reducer'; 6 | import { PoiEffects } from './+state/poi.effects'; 7 | 8 | @NgModule({ 9 | imports: [ 10 | CommonModule, 11 | StoreModule.forFeature(fromPoi.POI_FEATURE_KEY, fromPoi.reducer), 12 | EffectsModule.forFeature([PoiEffects]), 13 | ], 14 | }) 15 | export class PoiModule {} 16 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/lib/poi.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { PoiService } from './poi.service'; 4 | 5 | describe('PoiService', () => { 6 | let service: PoiService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(PoiService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/lib/poi.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | import { PoiEntity } from '..'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class PoiService { 10 | 11 | constructor(private http: HttpClient) { } 12 | 13 | getAll(): Observable { 14 | return this.http.get('assets/poi.json'); 15 | } 16 | 17 | } 18 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ], 13 | "compilerOptions": { 14 | "forceConsistentCasingInFileNames": true, 15 | "strict": true, 16 | "noImplicitReturns": true, 17 | "noFallthroughCasesInSwitch": true 18 | }, 19 | "angularCompilerOptions": { 20 | "strictInjectionParameters": true, 21 | "strictInputAccessModifiers": true, 22 | "strictTemplates": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "target": "es2015", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": ["dom", "es2018"] 11 | }, 12 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"], 13 | "include": ["**/*.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter08/libs/poi/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/README.md: -------------------------------------------------------------------------------- 1 | # visitor 2 | 3 | This library was generated with [Nx](https://nx.dev). 4 | 5 | ## Running unit tests 6 | 7 | Run `nx test visitor` to execute the unit tests. 8 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | displayName: 'visitor', 3 | preset: '../../jest.preset.js', 4 | setupFilesAfterEnv: ['/src/test-setup.ts'], 5 | globals: { 6 | 'ts-jest': { 7 | tsconfig: '/tsconfig.spec.json', 8 | stringifyContentPathRegex: '\\.(html|svg)$', 9 | astTransformers: { 10 | before: [ 11 | 'jest-preset-angular/build/InlineFilesTransformer', 12 | 'jest-preset-angular/build/StripStylesTransformer', 13 | ], 14 | }, 15 | }, 16 | }, 17 | coverageDirectory: '../../coverage/libs/visitor', 18 | snapshotSerializers: [ 19 | 'jest-preset-angular/build/serializers/no-ng-attributes', 20 | 'jest-preset-angular/build/serializers/ng-snapshot', 21 | 'jest-preset-angular/build/serializers/html-comment', 22 | ], 23 | }; 24 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './lib/visitor.module'; 2 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/map/map.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/libs/visitor/src/lib/map/map.component.css -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/map/map.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {{poi.name}} 7 | 8 | 9 | 10 |

{{poi.description}}

11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/map/map.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { MapComponent } from './map.component'; 4 | 5 | describe('MapComponent', () => { 6 | let component: MapComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ MapComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(MapComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/poi-list/poi-list.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/libs/visitor/src/lib/poi-list/poi-list.component.css -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/poi-list/poi-list.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/poi-list/poi-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PoiListComponent } from './poi-list.component'; 4 | 5 | describe('PoiListComponent', () => { 6 | let component: PoiListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ PoiListComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PoiListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/poi-list/poi-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Store } from '@ngrx/store'; 3 | import { PoiActions, PoiEntity, PoiSelectors } from '@packt/poi'; 4 | 5 | @Component({ 6 | selector: 'packt-poi-list', 7 | templateUrl: './poi-list.component.html', 8 | styleUrls: ['./poi-list.component.css'] 9 | }) 10 | export class PoiListComponent implements OnInit { 11 | 12 | pois$ = this.store.select(PoiSelectors.getAllPoi); 13 | 14 | constructor(private store: Store) { } 15 | 16 | ngOnInit(): void { 17 | this.store.dispatch(PoiActions.init()); 18 | } 19 | 20 | selectPoi(poi: PoiEntity) { 21 | this.store.dispatch(PoiActions.selectPoi({poiId: poi.id})); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/visitor.component.css: -------------------------------------------------------------------------------- 1 | .sidenav-container { 2 | height: 100%; 3 | } 4 | 5 | .sidenav { 6 | width: 200px; 7 | } 8 | 9 | .sidenav .mat-toolbar { 10 | background: inherit; 11 | } 12 | 13 | .mat-toolbar.mat-primary { 14 | position: sticky; 15 | top: 0; 16 | z-index: 1; 17 | } 18 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/lib/visitor.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout'; 3 | import { Observable } from 'rxjs'; 4 | import { map, shareReplay } from 'rxjs/operators'; 5 | 6 | @Component({ 7 | selector: 'packt-visitor', 8 | templateUrl: './visitor.component.html', 9 | styleUrls: ['./visitor.component.css'] 10 | }) 11 | export class VisitorComponent { 12 | 13 | isHandset$: Observable = this.breakpointObserver.observe(Breakpoints.Handset) 14 | .pipe( 15 | map(result => result.matches), 16 | shareReplay() 17 | ); 18 | 19 | constructor(private breakpointObserver: BreakpointObserver) {} 20 | 21 | } 22 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/src/test-setup.ts: -------------------------------------------------------------------------------- 1 | import 'jest-preset-angular/setup-jest'; 2 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../tsconfig.base.json", 3 | "files": [], 4 | "include": [], 5 | "references": [ 6 | { 7 | "path": "./tsconfig.lib.json" 8 | }, 9 | { 10 | "path": "./tsconfig.spec.json" 11 | } 12 | ], 13 | "compilerOptions": { 14 | "forceConsistentCasingInFileNames": true, 15 | "strict": true, 16 | "noImplicitReturns": true, 17 | "noFallthroughCasesInSwitch": true 18 | }, 19 | "angularCompilerOptions": { 20 | "strictInjectionParameters": true, 21 | "strictInputAccessModifiers": true, 22 | "strictTemplates": true 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "target": "es2015", 6 | "declaration": true, 7 | "declarationMap": true, 8 | "inlineSources": true, 9 | "types": [], 10 | "lib": ["dom", "es2018"] 11 | }, 12 | "exclude": ["src/test-setup.ts", "**/*.spec.ts"], 13 | "include": ["**/*.ts"] 14 | } 15 | -------------------------------------------------------------------------------- /Chapter08/libs/visitor/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../../dist/out-tsc", 5 | "module": "commonjs", 6 | "types": ["jest", "node"] 7 | }, 8 | "files": ["src/test-setup.ts"], 9 | "include": ["**/*.spec.ts", "**/*.d.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /Chapter08/tools/generators/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter08/tools/generators/.gitkeep -------------------------------------------------------------------------------- /Chapter08/tools/tsconfig.tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "outDir": "../dist/out-tsc/tools", 5 | "rootDir": ".", 6 | "module": "commonjs", 7 | "target": "es5", 8 | "types": ["node"], 9 | "importHelpers": false 10 | }, 11 | "include": ["**/*.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /Chapter08/tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "importHelpers": true, 11 | "target": "es2015", 12 | "module": "esnext", 13 | "lib": ["es2017", "dom"], 14 | "skipLibCheck": true, 15 | "skipDefaultLibCheck": true, 16 | "baseUrl": ".", 17 | "paths": { 18 | "@packt/visitor": ["libs/visitor/src/index.ts"], 19 | "@packt/admin": ["libs/admin/src/index.ts"], 20 | "@packt/poi": ["libs/poi/src/index.ts"] 21 | } 22 | }, 23 | "exclude": ["node_modules", "tmp"] 24 | } 25 | -------------------------------------------------------------------------------- /Chapter09/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter09/.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /Chapter09/.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | .c9/ 21 | *.launch 22 | .settings/ 23 | *.sublime-workspace 24 | 25 | # IDE - VSCode 26 | .vscode/* 27 | !.vscode/settings.json 28 | !.vscode/tasks.json 29 | !.vscode/launch.json 30 | !.vscode/extensions.json 31 | .history/* 32 | 33 | # misc 34 | /.sass-cache 35 | /connect.lock 36 | /coverage 37 | /libpeerconnection.log 38 | npm-debug.log 39 | yarn-error.log 40 | testem.log 41 | /typings 42 | 43 | # System Files 44 | .DS_Store 45 | Thumbs.db 46 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/ng-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", 3 | "dest": "../../dist/ui-controls", 4 | "lib": { 5 | "entryFile": "src/public-api.ts" 6 | } 7 | } -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ui-controls", 3 | "version": "1.0.0", 4 | "peerDependencies": { 5 | "@angular/common": "^12.0.2", 6 | "@angular/core": "^12.0.2", 7 | "@angular/cdk": "^12.0.2", 8 | "bulma": "^0.9.2" 9 | }, 10 | "dependencies": { 11 | "tslib": "^2.1.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/card-list/card-list.component.css: -------------------------------------------------------------------------------- 1 | :host > div { 2 | display: grid; 3 | grid-auto-flow: column; 4 | overflow: auto; 5 | } 6 | 7 | .card { 8 | width: 200px; 9 | } 10 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/card-list/card-list.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

{{card.title}}

5 |
6 |
7 |
{{card.description}}
8 |
9 | 12 |
13 |
14 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/card-list/card-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CardListComponent } from './card-list.component'; 4 | 5 | describe('CardListComponent', () => { 6 | let component: CardListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CardListComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CardListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/card-list/card-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core'; 2 | import { Card } from '../card'; 3 | import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'; 4 | 5 | @Component({ 6 | selector: 'lib-card-list', 7 | templateUrl: './card-list.component.html', 8 | styleUrls: ['./card-list.component.css'] 9 | }) 10 | export class CardListComponent implements OnInit { 11 | @Input() cards: Card[] = []; 12 | @Output() cardChange = new EventEmitter(); 13 | 14 | constructor() { } 15 | 16 | ngOnInit(): void { 17 | } 18 | 19 | sortCards(event: CdkDragDrop): void { 20 | moveItemInArray(this.cards, event.previousIndex, event.currentIndex); 21 | this.cardChange.emit(this.cards); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/card.ts: -------------------------------------------------------------------------------- 1 | export interface Card { 2 | title: string; 3 | description: string; 4 | link: string; 5 | } 6 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/copy-button/copy-button.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/projects/ui-controls/src/lib/copy-button/copy-button.component.css -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/copy-button/copy-button.component.html: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/copy-button/copy-button.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CopyButtonComponent } from './copy-button.component'; 4 | 5 | describe('CopyButtonComponent', () => { 6 | let component: CopyButtonComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ CopyButtonComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CopyButtonComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/copy-button/copy-button.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-copy-button', 5 | templateUrl: './copy-button.component.html', 6 | styleUrls: ['./copy-button.component.css'] 7 | }) 8 | export class CopyButtonComponent implements OnInit { 9 | 10 | @Input() data = ''; 11 | @Output() copied = new EventEmitter(); 12 | 13 | constructor() { } 14 | 15 | ngOnInit(): void { 16 | } 17 | 18 | onCopy() { 19 | this.copied.next(); 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/ui-controls.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UiControlsComponent } from './ui-controls.component'; 4 | 5 | describe('UiControlsComponent', () => { 6 | let component: UiControlsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async () => { 10 | await TestBed.configureTestingModule({ 11 | declarations: [ UiControlsComponent ] 12 | }) 13 | .compileComponents(); 14 | }); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UiControlsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/ui-controls.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'lib-ui-controls', 5 | template: ` 6 |

7 | ui-controls works! 8 |

9 | `, 10 | styles: [ 11 | ] 12 | }) 13 | export class UiControlsComponent implements OnInit { 14 | 15 | constructor() { } 16 | 17 | ngOnInit(): void { 18 | } 19 | 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/ui-controls.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { UiControlsService } from './ui-controls.service'; 4 | 5 | describe('UiControlsService', () => { 6 | let service: UiControlsService; 7 | 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({}); 10 | service = TestBed.inject(UiControlsService); 11 | }); 12 | 13 | it('should be created', () => { 14 | expect(service).toBeTruthy(); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/lib/ui-controls.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | @Injectable({ 4 | providedIn: 'root' 5 | }) 6 | export class UiControlsService { 7 | 8 | constructor() { } 9 | } 10 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/src/public-api.ts: -------------------------------------------------------------------------------- 1 | /* 2 | * Public API Surface of ui-controls 3 | */ 4 | 5 | export * from './lib/ui-controls.service'; 6 | export * from './lib/ui-controls.component'; 7 | export * from './lib/ui-controls.module'; 8 | export * from './lib/card-list/card-list.component'; 9 | export * from './lib/card'; 10 | export * from './lib/copy-button/copy-button.component'; 11 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/lib", 6 | "target": "es2015", 7 | "declaration": true, 8 | "declarationMap": true, 9 | "inlineSources": true, 10 | "types": [], 11 | "lib": [ 12 | "dom", 13 | "es2018" 14 | ] 15 | }, 16 | "exclude": [ 17 | "src/test.ts", 18 | "**/*.spec.ts" 19 | ] 20 | } 21 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/tsconfig.lib.prod.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.lib.json", 4 | "compilerOptions": { 5 | "declarationMap": false 6 | }, 7 | "angularCompilerOptions": { 8 | "compilationMode": "partial" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-controls/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts" 12 | ], 13 | "include": [ 14 | "**/*.spec.ts", 15 | "**/*.d.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | last 1 Chrome version 12 | last 1 Firefox version 13 | last 2 Edge major versions 14 | last 2 Safari major versions 15 | last 2 iOS major versions 16 | Firefox ESR 17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line. 18 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/projects/ui-elements/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.css'] 7 | }) 8 | export class AppComponent { 9 | title = 'ui-elements'; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { Injector, NgModule } from '@angular/core'; 2 | import { createCustomElement } from '@angular/elements'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { UiControlsModule, CopyButtonComponent } from 'ui-controls'; 5 | 6 | @NgModule({ 7 | declarations: [], 8 | imports: [ 9 | BrowserModule, 10 | UiControlsModule 11 | ], 12 | providers: [], 13 | bootstrap: [] 14 | }) 15 | export class AppModule { 16 | 17 | constructor(private injector: Injector) {} 18 | 19 | ngDoBootstrap() { 20 | const el = createCustomElement(CopyButtonComponent, { injector: this.injector }); 21 | customElements.define('copy-button', el); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/projects/ui-elements/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/projects/ui-elements/src/favicon.ico -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | UiElements 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/projects/ui-elements/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../../tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "../../out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter09/src/app/app.component.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/src/app/app.component.css -------------------------------------------------------------------------------- /Chapter09/src/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Assassins Creed Series

3 | 4 |

Clipboard interaction

5 |
6 |
7 | 8 |
9 |
10 | 11 |
12 |
13 |
14 | -------------------------------------------------------------------------------- /Chapter09/src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { Card } from 'ui-controls'; 3 | import { assassins } from './assassins'; 4 | 5 | @Component({ 6 | selector: 'app-root', 7 | templateUrl: './app.component.html', 8 | styleUrls: ['./app.component.css'] 9 | }) 10 | export class AppComponent { 11 | title = 'my-components'; 12 | cards: Card[] = assassins; 13 | 14 | onCardChange(cards: Card[]) { 15 | console.log(cards); 16 | } 17 | 18 | log() { 19 | alert(this.title + ' copied to the clipboard'); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Chapter09/src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { FormsModule } from '@angular/forms'; 3 | import { BrowserModule } from '@angular/platform-browser'; 4 | import { UiControlsModule } from 'ui-controls'; 5 | 6 | import { AppComponent } from './app.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent 11 | ], 12 | imports: [ 13 | BrowserModule, 14 | UiControlsModule, 15 | FormsModule 16 | ], 17 | providers: [], 18 | bootstrap: [AppComponent] 19 | }) 20 | export class AppModule { } 21 | -------------------------------------------------------------------------------- /Chapter09/src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/src/assets/.gitkeep -------------------------------------------------------------------------------- /Chapter09/src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /Chapter09/src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false 7 | }; 8 | 9 | /* 10 | * For easier debugging in development mode, you can import the following file 11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 12 | * 13 | * This import should be commented out in production mode because it will have a negative impact 14 | * on performance if an error is thrown. 15 | */ 16 | // import 'zone.js/plugins/zone-error'; // Included with Angular CLI. 17 | -------------------------------------------------------------------------------- /Chapter09/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/PacktPublishing/Angular-Projects-Second-Edition/04cf0562c97e7b7d4d86d8b74993aa19952a884d/Chapter09/src/favicon.ico -------------------------------------------------------------------------------- /Chapter09/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | MyComponents 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Chapter09/src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /Chapter09/src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /Chapter09/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/app", 6 | "types": [] 7 | }, 8 | "files": [ 9 | "src/main.ts", 10 | "src/polyfills.ts" 11 | ], 12 | "include": [ 13 | "src/**/*.d.ts" 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /Chapter09/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "./tsconfig.json", 4 | "compilerOptions": { 5 | "outDir": "./out-tsc/spec", 6 | "types": [ 7 | "jasmine" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /Chapter10/.gitignore: -------------------------------------------------------------------------------- 1 | # Outputs 2 | src/**/*.js 3 | src/**/*.js.map 4 | src/**/*.d.ts 5 | 6 | # IDEs 7 | .idea/ 8 | jsconfig.json 9 | .vscode/ 10 | 11 | # Misc 12 | node_modules/ 13 | npm-debug.log* 14 | yarn-error.log* 15 | 16 | # Mac OSX Finder files. 17 | **/.DS_Store 18 | .DS_Store 19 | -------------------------------------------------------------------------------- /Chapter10/.npmignore: -------------------------------------------------------------------------------- 1 | # Ignores TypeScript files, but keeps definitions. 2 | *.ts 3 | !*.d.ts 4 | -------------------------------------------------------------------------------- /Chapter10/README.md: -------------------------------------------------------------------------------- 1 | # Getting Started With Schematics 2 | 3 | This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM. 4 | 5 | ### Testing 6 | 7 | To test locally, install `@angular-devkit/schematics-cli` globally and use the `schematics` command line tool. That tool acts the same as the `generate` command of the Angular CLI, but also has a debug mode. 8 | 9 | Check the documentation with 10 | ```bash 11 | schematics --help 12 | ``` 13 | 14 | ### Unit Testing 15 | 16 | `npm run test` will run the unit tests, using Jasmine as a runner and test framework. 17 | 18 | ### Publishing 19 | 20 | To publish, simply do: 21 | 22 | ```bash 23 | npm run build 24 | npm publish 25 | ``` 26 | 27 | That's it! 28 | -------------------------------------------------------------------------------- /Chapter10/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-schematics", 3 | "version": "0.0.0", 4 | "description": "A blank schematics", 5 | "scripts": { 6 | "build": "tsc -p tsconfig.json", 7 | "test": "npm run build && jasmine src/**/*_spec.js" 8 | }, 9 | "keywords": [ 10 | "schematics" 11 | ], 12 | "author": "", 13 | "license": "MIT", 14 | "schematics": "./src/collection.json", 15 | "dependencies": { 16 | "@angular-devkit/core": "^12.0.2", 17 | "@angular-devkit/schematics": "^12.0.2", 18 | "typescript": "~4.1.2" 19 | }, 20 | "devDependencies": { 21 | "@types/node": "^12.11.1", 22 | "@types/jasmine": "~3.5.0", 23 | "jasmine": "^3.5.0" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Chapter10/src/collection.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json", 3 | "schematics": { 4 | "my-schematics": { 5 | "description": "A blank schematic.", 6 | "factory": "./my-schematics/index#mySchematics" 7 | }, 8 | "tailwind-container": { 9 | "description": "Generate a Tailwind container component", 10 | "factory": "./tailwind-container/index#tailwindContainer", 11 | "schema": "./tailwind-container/schema.json" 12 | }, 13 | "crud-service": { 14 | "description": "Generate a CRUD HTTP service", 15 | "factory": "./crud-service/index#crudService" 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Chapter10/src/crud-service/files/__name@dasherize__.service.ts.template: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { Observable } from 'rxjs'; 4 | 5 | @Injectable({ 6 | providedIn: 'root' 7 | }) 8 | export class <%= classify(name) %>Service { 9 | apiUrl = '/api'; 10 | constructor(private http: HttpClient) { } 11 | 12 | create(obj) { 13 | return this.http.post(this.apiUrl, obj); 14 | } 15 | 16 | read() { 17 | return this.http.get(this.apiUrl); 18 | } 19 | 20 | update(obj) { 21 | return this.http.put(this.apiUrl, obj); 22 | } 23 | 24 | delete(id) { 25 | return this.http.delete(this.apiUrl + id); 26 | } 27 | } -------------------------------------------------------------------------------- /Chapter10/src/crud-service/index_spec.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from '@angular-devkit/schematics'; 2 | import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; 3 | import * as path from 'path'; 4 | 5 | 6 | const collectionPath = path.join(__dirname, '../collection.json'); 7 | 8 | 9 | describe('crud-service', () => { 10 | it('works', async () => { 11 | const runner = new SchematicTestRunner('schematics', collectionPath); 12 | const tree = await runner.runSchematicAsync('crud-service', {}, Tree.empty()).toPromise(); 13 | 14 | expect(tree.files).toEqual([]); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter10/src/my-schematics/index.ts: -------------------------------------------------------------------------------- 1 | import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; 2 | 3 | 4 | // You don't have to export the function as default. You can also have more than one rule factory 5 | // per file. 6 | export function mySchematics(_options: any): Rule { 7 | return (tree: Tree, _context: SchematicContext) => { 8 | return tree; 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /Chapter10/src/my-schematics/index_spec.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from '@angular-devkit/schematics'; 2 | import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; 3 | import * as path from 'path'; 4 | 5 | 6 | const collectionPath = path.join(__dirname, '../collection.json'); 7 | 8 | 9 | describe('my-schematics', () => { 10 | it('works', async () => { 11 | const runner = new SchematicTestRunner('schematics', collectionPath); 12 | const tree = await runner.runSchematicAsync('my-schematics', {}, Tree.empty()).toPromise(); 13 | 14 | expect(tree.files).toEqual([]); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter10/src/tailwind-container/files/__name@dasherize__.component.html.template: -------------------------------------------------------------------------------- 1 |
2 |
3 | -------------------------------------------------------------------------------- /Chapter10/src/tailwind-container/files/__name@dasherize__.component.ts.template: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'my-<%= dasherize(name) %>', 5 | templateUrl: './<%= dasherize(name) %>.component.html' 6 | }) 7 | export class My<%= classify(name) %>Component {} 8 | -------------------------------------------------------------------------------- /Chapter10/src/tailwind-container/index_spec.ts: -------------------------------------------------------------------------------- 1 | import { Tree } from '@angular-devkit/schematics'; 2 | import { SchematicTestRunner } from '@angular-devkit/schematics/testing'; 3 | import * as path from 'path'; 4 | 5 | 6 | const collectionPath = path.join(__dirname, '../collection.json'); 7 | 8 | 9 | describe('tailwind-container', () => { 10 | it('works', async () => { 11 | const runner = new SchematicTestRunner('schematics', collectionPath); 12 | const tree = await runner.runSchematicAsync('tailwind-container', {}, Tree.empty()).toPromise(); 13 | 14 | expect(tree.files).toEqual([]); 15 | }); 16 | }); 17 | -------------------------------------------------------------------------------- /Chapter10/src/tailwind-container/schema.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json-schema.org/schema", 3 | "id": "TailwindContainerSchema", 4 | "title": "My Tailwind Container Schema", 5 | "type": "object", 6 | "properties": { 7 | "name": { 8 | "description": "The name of the component.", 9 | "type": "string" 10 | }, 11 | "path": { 12 | "type": "string", 13 | "format": "path", 14 | "description": "The path to create the component.", 15 | "visible": false 16 | } 17 | }, 18 | "required": ["name"] 19 | } 20 | -------------------------------------------------------------------------------- /Chapter10/src/tailwind-container/schema.ts: -------------------------------------------------------------------------------- 1 | export interface Schema { 2 | name: string; 3 | path: string; 4 | } 5 | -------------------------------------------------------------------------------- /Chapter10/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "tsconfig", 4 | "lib": [ 5 | "es2018", 6 | "dom" 7 | ], 8 | "declaration": true, 9 | "module": "commonjs", 10 | "moduleResolution": "node", 11 | "noEmitOnError": true, 12 | "noFallthroughCasesInSwitch": true, 13 | "noImplicitAny": true, 14 | "noImplicitThis": true, 15 | "noUnusedParameters": true, 16 | "noUnusedLocals": true, 17 | "rootDir": "src/", 18 | "skipDefaultLibCheck": true, 19 | "skipLibCheck": true, 20 | "sourceMap": true, 21 | "strictNullChecks": true, 22 | "target": "es6", 23 | "types": [ 24 | "jasmine", 25 | "node" 26 | ] 27 | }, 28 | "include": [ 29 | "src/**/*" 30 | ], 31 | "exclude": [ 32 | "src/*/files/**/*" 33 | ] 34 | } 35 | --------------------------------------------------------------------------------