Part 1: How to setup Angular

Complete Cordova App with Angular JS tutorial
Set up Angular, create a folder structure, create routing, parse templates and create a directive.

When building an Angular JS app with Cordova my experience is that I need several forums and other sites to get all the information I need. I haven’t found a complete tutorial to build a simple standard Angular JS application with Cordova. The goal of this tutorial is to give the basics without the need of external sources. This tutorial consists of 4 parts. The files we create in this part and part 2 can be downloaded here.

Angular JS

  1. Create a file called ‘index.html’ and a folder named ‘js’.
  2. Inside the js folder create a new folder named ‘libs’.
  3. Download angular.min.js (the latest Angular JS 1 version) from Angular JS website and place the file in the ‘libs’ folder.
  4. Include angular at the bottom of the body of ‘index.html’.

When opening the inspector in for example Chrome, you should see in the network tab that the angular.min.js file has been included.

Define ng-app

Add an attribute ‘ng-app’ to any DOM element in ‘index.html’. Angular uses everything inside that element to do the Angular magic. I place the attribute on the html tag, so the angular scope is the complete html page. Let’s start by adding the ng-app attribute with value ‘App’ to the ‘html’ node.

Initialize angular

Now that we’ve assigned an element for Angular to work on, we can initialize angular with the ng-app value ‘App’.

  1. create a file called ‘app.js’ and place it inside the ‘js folder’
  2. add a first call with an empty array to angular.module function. This initializes angular
  3. include the app.js file at the bottom of the body in ‘index.html’

The view

We can now start with routing for different pages. Add an element with an ‘ng-view’ attribute to index.html. Templates are parsed into that element. The ng-view attribute does not need a value.

Route

In order to let angular parse templates into the view element, we are going to create route configuration.

  1. download angular-route.js file from the Angular JS website
    if you downloaded angular.min.js from

    you can find angular-route.min.js in the same version sub folder:
  2. download and place the angular-route.min.js file in js/libs folder and include it in index.html
  3. create a folder ‘app’ inside the js folder
  4. create a folder called ‘config’ inside the new ‘app’ folder
  5. create an empty file inside the ‘config’ folder called ‘route.js’
  6. include route.js in ‘index.html’ at the bottom of the body

In route.js we configure routing with the $routeProvider. Before we can use the route provider, we have to tell Angular we are going to use it. So extend the app.js file by adding ‘ngRoute’ to the empty array;

Now we can write the route configuration in route.js;

This example is going to create an app with 3 pages. A home page, another page and a contact page. In route.js we have defined that partials/pages/home.html should be parsed into the element with the ng-view attribute when a user navigates to index.html/#/home. When the user navigates to index.html/#/contact, the partials/pages/contact.html template will be parsed into the ng-view element. And if the user navigates to an url that does not exists, the user will be redirected to #/home. Of course these partials must first be created.

Creating the page partial templates

  1. Create a folder called ‘partials’ in the same folder as the ‘index.html’ file.
  2. Inside the new ‘partials’ folder create another folder called ‘pages’
  3. Create 3 html files with the names ‘home.html’, ‘another-page.html’ and ‘contact.html’
  4. Place these html files inside the ‘partials/pages’ folder
  5. Add a title to each of the partials with the name of the page. For the home.html this would be

    For the another.html this will be

    And for the contact.html this will be

    In a real app these pages contain of course the content of that page. Try navigating by going to index.html/#/home and after that to index.html/#/contact. You could omit index.html and just go to #/home or #/another-page.

The menu

Now we have the pages working, we can build a menu to navigate with. Create a file called ‘main-menu.html’ inside the partials folder (not inside the ‘pages’ folder).

We are going to include this partial in every page we have by using Angular’s directive functionality.

Angular directive

For the menu to show up on each page, we add a div with a ‘main-menu’ attribute before the title on every page;

Make sure the attribute is lowercase and seperated by a dash (-).

Create a folder called ‘directives’ inside the ‘js/app/’ folder. Add a file called ‘main-menu-directive.js’ to the ‘directives’ folder.

A directive is created by calling Angular’s directive function with the name of the directive attribute written in camelCase. In the callback function we return an object with the restrict property: ‘A’. The ‘A’ stands for attribute, which we are using (‘

‘). We also return a property ‘replace’ with value true. This means the templateUrl will replace the element with the attribute. If set to false, it will be parsed inside the directive element. And at last we define the html template that will be used by the ‘templateUrl’ property.

Include the main-menu-directive.js in ‘index.html’

The order of including the files is very important. For example to invoke angular.module(‘App’).directive() angular must exist and it should be initialized.

Result, so far…

We have an Angular JS app, with a menu with which we can navigate (route) to 3 different pages.

What’s left to do:

  • Get some data from a backend and show that on the pages we created
  • Use Cordova to create an app for Android and iOS

Part 2: How to use Angular controllers and services »

Tweet about this on TwitterShare on LinkedIn

Reacties

Het e-mailadres wordt niet gepubliceerd.

*