Lab 1: Handling Platform Differences

We want to reduce nesting and decisions of the 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.

Device Deployment

This is a bonus lab which you may want to try at home. Your mobile device needs to be developer-unlocked.

• Install Cordova (npm i -g cordova)
• Create a new Cordova project (cordova create). Refer to the Cordova documentation if necessary.
• Deploy the app to your device (cordova run ios)

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).