The Untapped Power of Angular
Mobile app development was how I originally came to use Angular. Around 2015, I was looking for a replacement for the Sencha Touch framework, which is what I was originally using to build mobile apps. And I landed on Ionic, which at the time was exclusively for AngularJS, as in the original pre-Angular 2 AngularJS.
And so I learned Angular not for the sake of learning Angular really, but so that I could build mobile apps with Ionic. Learning Angular and being able to build web applications generally came as a side effect of that. But of course, it works in reverse too. For those that have learned Angular, they will find they can also quite easily build mobile applications with Ionic and Capacitor.
Ionic is what primarily provides all of the UI components necessary to make good-looking mobile applications. And Capacitor is the tool that wraps everything up into a native application and provides access to native APIs. In fact, in a moment, we are going to spend just a few minutes to turn a standard Angular application into a native mobile application. But given the skill overlap and how many possibilities these tools unlock, it always surprises me how seemingly few Angular developers know about Ionic and Capacitor.
What is a "Native" Application?
Now, to clear up a somewhat annoying topic right out of the gate, let's clarify what I mean by native application because I've been disagreeing with people on this for about as long as I've been using Ionic. It's mostly a case of disagreeing on definitions which probably lead to the most annoying kind of arguments.
I call what we will be building shortly a native mobile application because it results in a native package that is in every way the same as any other iOS or Android application. It has access to all the same functionality and can be submitted to and downloaded from the App Stores and installed as a native application because that is what it is. However, the point of contention comes from the fact that the UI for the application runs primarily in a web view that is embedded within that native app. And that web view runs the Angular application that provides usually the majority of the user interface for the application.
However, you can still use native UI controls as well, and the web view can still also communicate to and receive data from native APIs. There are certainly things to consider taking this approach for the application's UI. There are both pros and cons. But personally, I find it misleading to label native applications that use web views simply as not native. At least for me, if we start with what is just a normal native application, that is what Capacitor creates for us. And then we add a specific native control, a web view within that native application, that somehow making the application not native anymore is a weird and confusing definition to me. Ionic applications using non-native UI strikes me as a more accurate label.
Anyway, with that mini rant out of the way, let's get into it.
Demo Intro: Adding Ionic to Angular
We're going to take an Angular application, add Ionic and Capacitor to it, and get it running as a native mobile app on a real device.
So, this is a standard Angular application freshly generated with the Angular CLI. It's important to note that Ionic has its own CLI and can generate ready to go Ionic and Capacitor applications for you. But this hides a bit of the magic and makes it seem like an Ionic application is somehow different to a normal Angular application. By adding Ionic to an existing Angular application ourselves, we can more clearly see what it is actually doing. So to start, we will install the required dependencies.
Configuring Ionic in an Angular Project
The Ionic library itself that provides all of the components and the icons library. Next, we will add the config file that Ionic uses. There isn't anything important in here now, but this can be used to configure various things.
Then, we will need to make a few changes to our application's config. We need to add Ionic Angular to the providers. And we also need to set up the Ionic route strategy, which relates to Ionic's own custom router outlet, which we will talk about in a moment. The key idea is that by default, whenever we navigate between components in Angular, Angular will destroy the component that was just navigated away from. If we later come back to that route, the component will be recreated again. This might not always be what you want, and Ionic defines some more specific rules around when components should be created and destroyed that results in a better navigation experience for mobile apps.
You'll also find that an Ionic project has a few mobile specific changes made to the index.html file. So, let's make those changes.
Implementing the Ionic Router Outlet
Now, Ionic also comes with some additional styling configuration that we can add to our global styles file. And so now we get to the router. This is an important one and there are two things going on here. One is that we are using the ion router outlet instead of the default Angular router outlet. We want to apply mobile style transition animations when switching between views and using Ionic's version of the router outlet is what will enable this.
We also surround our entire application in the ion app component which is important for styling. So now with the basic setup out of the way, we can add some of Ionic's components to our application.
Building a UI with Ionic Components
And we actually are going to set up two pages so that we can see how transitions between pages work. So let's start with the first page. We are using a bunch of Ionic components here to create a standard mobile layout. Notice that since we are using standalone components, we just import whatever we want to use into the component and add it to the imports array. What we are doing here is really no different to using any other kind of UI library with Angular.
Now, if we serve the application, we can immediately see some of Ionic's magic come into play here with this condensed header. If I view this on an Android device, I'm going to get the Android styling. But if I view it on an iOS device, I'm going to get this iOS design where we have a larger title on the page. And then as we scroll down, that title sort of morphs into the top toolbar. You can easily see and test the iOS/Android specific styling by emulating different devices using Chrome DevTools.
Creating Page Transitions
So, this gives us a bit of a sense of what Ionic's UI components look like. But now, let's set up our second page so that we can see what a transition using the Ionic router outlet looks like. Now, if you serve the application, you'll see that you can click on one of the list items and the detail page will animate into view just as it typically would for an iOS or Android application. Again, the animation will adapt appropriately for whatever platform it is running on.
Integrating Capacitor for Native Functionality
The other key part that the Ionic CLI typically sets up for us is the integration with Capacitor, which is what allows us to build our applications natively for iOS and Android. And it also allows us to integrate various native capabilities, e.g., things like the camera, files, GPS, and so on.
We can also just manually add Capacitor to a standard Angular application by running a single command. This will require the Ionic CLI which just sets up everything for you. But it is also possible to just manually run the commands yourself if you want.
Now before we sync with capacitor, we need to create a build of our application with ng build. Now by default, this is going to create the build in the dist folder. But by default, Capacitor looks for builds in the www folder. So we just need to come into the capacitor.config.ts file and update that directory.
Building and Deploying to Android
Now if we want to deploy to Android, we can first install that dependency and then run this command. Now we can run npx cap sync which will build our Angular application and add the build to the web view in the native application along with syncing any other dependencies like any plugins we might be using in the native application. The add command actually does this by default, but make sure you run this every time you want to update your native build.
Once that is finished, I can run mpx cap open android. This will open the native project in Android Studio. This will require having Android Studio installed and configured. From here, I can plug in my device, run the app, and it is going to be installed onto my device, and then it will run.
Conclusion
And then you can do the same thing for iOS and the styles and transitions, and everything will adapt automatically for iOS. If you liked this video, please consider dropping a like or subscribe before you go. And I hope to see you again next time.
