Ionic 2 Hybrid Apps – Getting Started

Following on from some of our Angular 2 posts, the next logical step was to delve into the Ionic 2 framework to see what it has to offer.

 

What is Ionic 2?

Ionic allows the user to build Hybrid Mobile Apps. These apps are built with HTML, CSS, JavaScript and TypeScript and are contained in a native wrapper so the it can be installed and published on a mobile device, whether that be iOS or Android.

This is very advantageous for the developer as it allows him/her to create and publish mobile applications without having to be proficient in their native programming languages (e.g Java for Android).

You can always read up on it here.

Ever wonder where we get our icons from? Check out the Ionicons cheatsheet here.

Why Ionic 2?

Aside from the aforementioned hybrid mobile benefits there is quite a few things to get excited about here. Firstly, the documentation is very well laid out.

https://ionicframework.com/docs/

This allows us quick access to a multitude of structural components to use for an application.

For example, one of the most basic components, cards would use the following markup.

As you can see custom HTML tags can be used to generate this structure with outputting a result like so.

There is a whole host of different components like this with usage examples for most so be sure to experiment with different combinations

Getting started.

You’ll need to install the latest version of Node before installing Ionic. Once installed you will have open up your command line and type.

This may take a few minutes.

To create a blank new Ionic project in your current directory you should then use the command.

However, we also have other options to create our Ionic application. Ionic will generate some of the applications structure if we specify in a different command.

ionic-tabs-example
ionic-tabs-example

We can also generate a project that has a fully integrated sidebar using the command.

ionic menu
Generated Menu Start

Ionic menu sidebar
Menu Sidebar

These templates tend to be very useful when you want to scaffold a prototype as fast as possible.

Ionic Native

While the custom layout elements provide a variety of ways for you to creatively structure an application, the plugins or (Ionic Native) are also an extremely useful feature. They are a set of plugins that add native mobile functionality to your application. To install one simply use the command:

The plugin has now been added to the project. You can check it out in the plugins folder

Ionic Plugins Folder
Ionic Plugins Folder

Like most packages/plugins that you add in we have to import it at the top of the desired component where it will be used.

You can find a whole host of native plugins here.

I hope this post gave you an insight into how Ionic can benefit you for hybrid application development.

We’ll be sure to cover more interesting topics about it in our next post. Including how to publish to an application to the Android SDK. Be sure to have a look at our resource page for any other useful reading material.

Sass in Angular

WRITTEN BY GARETH DUNNE @JSDIARIES

in Angular

If you missed our last Angular post please check it out here.

So SASS (Syntactically Awesome Style Sheets) are an already  well established and renown pre-processor for CSS. It allows the developer to create modular CSS where classes can nested inside each other. To summarize is benefits, it allows you to write less and customize more.

It also has a whole host of features including variables for colors, urls, fonts etc, while also having, mixins, extending/inheritence and operators.

You will write all your SASS code in a .scss extension file. The compiler will then output this into a css file based on the nested structure of your classes.

Having already seen the structure of Angular’s component based architecture you might wonder what exactly is the best way to implement SASS to an existing project.

And although I could show some of Sass’s great features, I will concentrate on whats important in the context of an Angular application.

You can check a great SASS intro here.

And here is a great book resource for learning Sass and Compass if you wanted to really hone your Sass skills.

Sass Structure

There are many different application you can use to get going with Sass you can pick your own preference here.

I personally use Koala its a nice GUI 3rd part application that looks for a scss file in a specified file directory and then compiles it to a css file.

Koala Sass
Koala Sass

Once you open Koala navigate to your desired project directory.

When you find the .scss file you want to turn into css, simply press compile once you find it in the directory. Koala will also has real-time compilation and will listen for the file changes in this folder.

It is also cross platform so it will run on Windows, Mac and Linux.

An ideal Sass structure would have folder called partials. Each file in this folder would have many different scss files that would be prefixed with an underscore.

Each file would adhere to a specific part of a website for example home, about, navigation.

sass-partials
sass-partials

All of these partials are then imported in the main .scss file ( usually called global.scss or style.scss). This one file is then compiled into a css file that is used for the whole project.

style.scss
Importing partials in our style.scss file

This is deemed as one of the most efficient ways to manage the styles of your project as all your css is compiled into the one file. However, in an Angular project there are two different approaches.

Generate Sass

The easiest way to get going with SASS in an Angular project is to create a project in your command line with the styles set to scss.

This will scaffold a project for you that will contain an app.component.scss file that will automatically be compiled for you without the use of a 3rd party application like Koala.

Manual setup

If you wanted to setup up your own styling structure once you create an Angular project through the CLI you should note that
each component generated has its own css file specific for that component. So if you create a Sass file with the component’s naming convention eg home.component.scss Koala will detect this and will compile it to home.component.css.

So instead of having a partial import system we just have individual sass files that are unique to the component.

I’m sure there is an argument for using both methods but this is the method I personally use. It makes the most sense to me as it aligns with the way an Angular project is typically structured and goes hand in hand with using the Angular CLI.

Form Validation

To give a practical example of using Sass in Angular I’ll focus on styles for form validation.

For validating forms in Angular we can use preexisting classes that correspond to the state of on input field or select box.

These classes are:

  • ng-pristine
  • ng-invalid
  • ng-touched
  • ng-dirty
  • ng-valid
  • ng-untouched

These classes are self explanatory for the most part, ng-touched is applied when the input field is written in, ng-dirty is applied when

The ng-dirty classes indicates when the form has been modified by the user. The opposite of this is the ng-pristine class which is applied as long as the form has not been modified by the user.

In Sass we can add appropriate styles to these classes to indicate when an input field is empty, invalid, not yet entered etc;

Here is an example of adding relevant border colors to these input states.

Form with styling states
Form with styling states

Overall

Although styling might seem quite arbitrary in context of learning Angular. Sass allows you to be more efficient and modular when it comes to creating a beautiful Angular application. Its a very useful tool to use in combination with Angular and fits in nicely to the structure of a component.

If you are looking for anymore resources to learn Angular be sure to check our resource page here.