Simple Login And Registration In A NativeScript With Angular Mobile App

Most, not all, mobile applications have some sense of users having accounts. This means that users need to register and sign into most mobile applications to get all the features the application has to offer. So how do you create an attractive and functional login and registration screen for your Android and iOS application?

We’re going to see how to create a registration and login screen with NativeScript and Angular that will get you to an end result of a protected page within your application.

Extend Legacy Java Android Applications With NativeScript And Angular

As some of you might know, before I started developing cross platform mobile applications using Ionic Framework and NativeScript, I was developing Android applications using nothing more than the Android SDK and Java. I still have one of my first applications, SQLTool, for sale in Google Play, and it was written with Java and Android. When building mobile applications, frameworks like NativeScript are incredibly attractive to web developers because they can use a common set of web design and development skills. However, NativeScript can be equally attractive to development teams writing Android applications with Java.

With NativeScript you can actually build a “polyglot” type application where parts are Java and parts are NativeScript with Angular. To be clear, I’m not talking about rewriting your Java application into modules wrapped in JavaScript like plugins. I’m saying that you can take your 100% Android with Java application and add Activities or Fragments built with NativeScript.

So why is this useful?

Imagine being on a small Android development team with more things to be done than there is time in the day. These Android developers would rather die than use a cross platform framework, but you have plenty of web developers floating around your company. In this scenario, the two worlds can collide and maybe the web developers can create lower (or higher) priority components for the Android application without having to convert the whole application to Android with Java or to NativeScript with Angular.

Form Validation In An Angular Web Application With Custom Directives

When creating a web application that accepts user input, it is often a good idea to validate anything the user provides. While you should always validate this information via some backend server-side code, it often provides a good user experience to validate via the frontend as well. By doing form validation on the frontend, you set yourself up for the possibility to catch and display errors before form submission.

If you’ve been keeping up, I once demonstrated how to do form validation in AngularJS via an Ionic Framework application. As of now, AngularJS is ancient technology, so we’re going to see how to do the same with Angular. However, we’ll be seeing from the perspective of a web application, rather than a cross-platform hybrid mobile application.

We’re going to be basing everything in this guide off a new project created via the Angular CLI. This means that you should have installed the Angular CLI before going forward.

Tour Of Heroes As A NativeScript With Angular Android And iOS Application

When it comes to learning Angular, the go-to example is the Tour of Heroes tutorial that is found in the official Angular documentation. This is a great tutorial because it covers a lot of topics, however, it is a web application tutorial. What if we wanted to build a mobile application from it, or more specifically, a native mobile application with Android and iOS support?

We’re going to see how to build a Tour of Heroes inspired iOS and Android mobile application using Angular and NativeScript.

Build An Image Manager With NativeScript, Node.js, And The Minio Object Storage Cloud

When building a mobile application, there are often scenarios where you need to storage files remotely and when I say files, I don’t mean database data. For example, maybe you want to develop an image manager or photo storage solution like what Facebook and Instagram offer? There are many solutions, for example you could store the files in your database as binary data, or you could store the files on the same server as your web application. However, there are better options, for example, you could use an object storage solution to store files uploaded from your mobile application. Popular object storage solutions include AWS S3 as well as the open source alternative Minio.

We’re going to see how to leverage Minio to store images that have been uploaded from an Android and iOS mobile application built with NativeScript and Angular.

Creating And Using Custom Pipes In An Angular Web Application

When I’m developing with Angular, I often find myself needing to loop over an object via HTML markup. In AngularJS one could loop over object properties or arrays, but in Angular you can only loop over arrays by default. This is easily fixable through what are known as Angular Pipes.

With pipes you can create display-value transformations for pretty much anything, or in my case transform an object into an array and loop over it. We’re going to see how to create a pipe that will allow us to loop over an object in the HTML layer.

Animate HTML Components In An Angular Application

When building a web application, not only do you need amazing features, but you also need a stunning user experience and that can often be managed by making good use of UI components. When I’m using my favorite web applications, the way components are displayed on the screen are sometimes what makes the application so memorable. Designers will often animate components to make them stand out.

When building a web application you can use CSS keyframe animations, but if you’re using Angular, there is another way. We’re going to see how to use the Angular Animations component to animate UI components on the screen.