Angular 4 Released – Why a 4th version?

WRITTEN BY GARETH DUNNE @JSDIARIES

Another version of Angular?

Angular 4 was fully released on 17th March. In this post, I hope to address any confusion or niggling worries regarding how this affects current Angular projects and how exactly these changes could benefit your next project.

Here are the official changes.

If you are baffled as why there is already a 4th version of Angular I covered semantic versioning in a previous post here.

Flat ES Modules

Most of the changes in Angular 4 comprise of performance improvements for the framework. Perhaps the most significant one is the introduction of Flat ES Modules that treeshake your application for you.

During the ng-build process, the compiler deems certain code unnecessary  because it has no usages. The compiler then removes this code in order to reduce file size and to make the application more lightweight.

Backwards compatibility

Since the scheduled announcement of Angular 4, the Angular team have been reassuring everyone that this change will not affect the way your current applications run. When upgrading your application to Angular 4, there will be a seamless transition for the most part.

This seems to be the case as I have only experienced one issue and this is with the AngularFireBase package which the developers for it has stated that they haven’t made it fully compatible with it yet .

If you have experienced this issue you can also follow this excellent tutorial by Coursetro to get Firebase working with Angular 4.

This tutorial is very insightful and solved my Firebase issue.

You may also experience a similar situation with some of your libraries and packages but the core features from Angular 2 seem to function just fine.

Animations

The way animations are imported has been cleaned up for Angular 4. Instead of importing the various types of animations such as state, keyframes, trigger etc,

 You now specify an import that contains tools and assets for animations in one package. This isn’t much but it does feel less cumbersome to set up an animation for a component.

The browser animations modules should also be added to your app.module.ts file for this to function properly.

Check how to do that here

Ngif

 When using the ngIf directive we never had the ability to add an else clause to the statement. This has been addressed in Angular 4, we can use the element <ng-template> to specify the name of our else condition by specifying it after the # symbol.

Please note that <template> is now deprecated and is replaced by <ng-template> 

Email Validation

Perhaps one of the handiest changes, an email validation directive was added to input elements. This saves us from having to manually create regular expressions to validate a users email address.

Simply add this to an input field element just like you would for the required directive and our email input field will automatically have validation.

This is actually quite a useful feature as it applies an email validating regular expression pattern to our element using just one keyword.

You can, of course still create your own custom expressions for validating emails and other input fields.

I hope this post has reassured you that this new version of Angular isn’t as significant as the version increment might make it sound. Some nice changes here lets us utilise some conditions and statements a bit more as well as cleaning up some of the imports.

Be sure to check our resources page for more Angular, TypeScript and JavaScript reading material.

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.