Advanced Angular: Praktische Real-World-Projekterfahrungen

Exercise 0

Make sure you have performed all steps described in the repository’s README file. Next, pull the changes found in the repository’s master branch by calling git pull on your command line or using your Git UI. If you are lost, git reset --hard will get you back on your journey.

Run ng serve on your command line. In the output, look for the line saying NG Live Development Server is running on … and open the URL shown there (usually http://localhost:4200/) in your browser. If you see a web site saying app works!, the app works.

If you haven’t yet, you might want to follow the speaker on Twitter.

Exercise 1

We want to reduce nesting and decisions of kind switch or #IFDEF in our code by making the decision once and injecting a concrete class based on the environment. In this example, we want to inject a camera service depending on if the device is a mobile device (i.e. running inside a Cordova app container) or not.

  • The author already added the services for mobile and desktop environments (their calling signature is the same).
  • Create an abstract base class and modify the concrete services to extend this base class. Refer to the TypeScript class documentation if necessary.
  • Now add the base class to the app module’s providers in app.module.ts. Use a factory to decide which concrete service should be instantiated. If the Angular app is executed within a Cordova container, a cordova property will exist on the global window object. In this case, use the mobile camera service. Otherwise, create a new instance of the desktop service. Refer to the Angular Dependency Injection documentation if necessary.
  • Finally, use the abstract camera service in the picture component by defining a parameter with the abstract type in the constructor. Then, implement the takePhoto method to update the image source after the photo was taken.
  • Bonus: Install Cordova (npm i -g cordova), create a new Cordova project and deploy the app to your device. Refer to the Cordova documentation if necessary. Hint: ng build --prod will create a production-ready build of your app in the dist directory. You will have to add a script tag including the cordova.js file in your index.html (at the top of the script tags). Add the camera plugin using cordova plugins add cordova-plugin-camera and a platform of your choice (e.g. cordova add platform ios).

Exercise 2

The speaker was so kind and introduced routing and a new component for you. Make sure to check out the app.routes.ts file. This component will show details to a Star Wars character based on its ID of the Star Wars API. The route for this new component is parameterized. The ActivatedRoute injected in the StarwarsComponent’s constructor will give you the ability to update the component based on a change of the route parameter, without re-instantiating it.

  • Subscribe to parameter changes of the “id” parameter. Refer to the Angular Router documentation if necessary.
  • Call the SWAPI using Angular’s HttpClient. Refer to its documentation if necessary.
  • Make use of RxJS’s switchMap operator in order to cancel the in-flight network request in case the Route is updated or leaved. Refer to this tutorial if necessary.
  • Bonus: Bind more details of the Star Wars character in the view of the component. Handle the error case. Show a loading animation.

Exercise 3

The speaker added a new module called LazyModule. Introduce lazy loading by adding a new route for the lazy loaded module and loading its children. Again, refer to the Angular Router documentation if necessary.
Bonus: Add more routes to the lazy loaded module. Configure preloading. Define a custom preloading strategy.

Exercise 4

Create builds of your app by using the ng build command of Angular CLI. Experiment with the following flags:

  • ng build
  • ng build --aot
  • ng build --prod
  • ng build --prod --build-optimizer

The output is placed in the dist folder of your application (and it will replace any previous builds there). How large in file size are the different builds?

Exercise 5

The speaker added new components. Take a look at the BoxComponent and see how slow it’s running in the browser.
Let’s make it fast: Replace all HostBindings and HostListeners by calls to the Renderer2 using the component’s ElementRef. Make sure to run all calls related to moving the box outside of Angular’s zone. You may refer to this blog article.