How to use Onsen UI for Angular
Angular is a TypeScript-based free, open-source framework developed by Google. It allows its users to develop front-ends of mobile and web applications. It is focused on creating dynamic single-page applications (SPA) and provides a structured way to build client-side applications using TypeScript/JavaScript, HTML, and CSS. Angular also supports multiple libraries and encourages component-based architecture.
Onsen UI is an open-source framework that specializes in creating mobile and web hybrid applications. It is a more compatible framework when trying to create such applications as it is optimized for mobile development and has many useful libraries to speed up the process. These components include forms, floating icons, logins, popovers, etc.
Setting up Angular
Before starting the Angular setup, we must have Node.js and NPM (or Yarn) package manager. To install these, visit the official website for NPM and download the version compatible with our machine.
Now that we have set up Node.js and our package manager, we can proceed with Angular. Follow the steps below to download, install, and set up our Angular application.
First, We will open our terminal and enter the command below to install our Angular CLI.
npm install -g @angular/cli
Now, we can create our Angular application by entering the command below, where we can replace
onsenAppwith any name we like. After we enter this, we need to enable routing and select CSS as our style.
ng new onsenApp
To make our process more accessible, we can use an IDE like VS Code and install extensions like Angular Language Service.
Now run the following commands inside the newly created folder. The first command will build the code and generate multiple bundles for differential loading. The second command bundles our code with Webpack so that every change we make will be reflected on the browser. This will open our local page for our Angular application at the default port of "http://localhost:4200".
ng build onsenAppng serve onsenApp
We will open our "index.html" file and add the following
CDN Content Delivery Network <head>tag. These allow us to use our Onsen UI framework and also give access to CSS files to change the styling further.
<head><link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"><link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"><script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script></head>
Everything is set up now. The next step will be to add data to our webpage.
Implementation
Now we will create a simple login page in our "index.html" file to add our Onsen UI code.
First, we will create a
<ons-page>tag that will encapsulate the other elements inside the page component.Then, for our heading, we will create a
<ons-toolbar>tag. This will hold the title of our page, i.e., the login form.Now, we will create a
<ons-list>to store our input rows for our form. This will a<ons-list-header>with multiple<ons-list-items>in which we can add individual rows.Afterward, we will create a submit button with the
<ons-button>tag. This will have a function call that we will configure next.We will add our
submitFormfunction to get the username and password in our<script>tag. This function will check whether the user has entered the correct details. It will send an alert depending on the output.
For a better understanding and experience, we have created an executable version of this code below with a few improvements.
{
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
"recommendations": ["angular.ng-template"]
}
Conclusion
Overall, Onsen UI is a robust framework that allows us to integrate multiple pre-built tools and components into our Angular application. This combination enables developers to create cross-platform applications with a single codebase. Moreover, with the availability of its rich item library, it allows customizations and other design benefits that Angular natively does not offer. Finally, Unsen UI's through documentation helps developers to get a deeper understanding of what they are working on and, as such, creates a better troubleshooting experience.
