Scope

Let's actually jump into something that isn't as mundane as adding and removing tags. If you plan on doing anything more than just hard coding everything into your html pages, you're going to need to understand Scope. If you have some comprehension of scope in terms of other programming languages, you can effectively apply that to Scope in Angular apps. Normally variable visibility or accessibility in scope is more of a concept, whether or not a variable can be accessed in a function is determined by where it was declared and how it was passed into the function. It's a similar concept in Angular, but oddly enough you actually use the keyword $scope. To put it as plainly as I possibly can, your web pages are used for displaying something (obviously). But most of the time you want to display something that is dynamic, and constantly changing. A calendar app needs to be designed to handle changes in your schedule, and a Twitter feed app needs to handle a constant stream of Tweets. The point is, a static app is a boring and largely useless app. You can't really handle dynamic content with Html, it's a markup language, it doesn't know what variables are. It just passes that onto Javascript, your html page just sort of creates a container for your script(s) to work in.

So, in today's day and age of the dominance of Object Oriented languages, we expect a bit more out of our programming languages. Which is why everyone in the tech industry seems to be creating their own libraries and frameworks for widely used languages, case in point: AngularJS. AngularJS was created by Google, and is the primary driver behind Ionic apps. In your html files Ionic created, in the sidemenu template you will find directives like ng-repeat and ng-bind. These directives give your elements special behaviors, and are a part of the AngularJS framework. For example, ng-repeat works like a for each loop. It can access a list of items in $scope and do something with each item in the list. Which is what we're going to look at today.

To start things off open the controllers.js file and find this controller:

.controller('PlaylistsCtrl', function($scope) {
     $scope.playlists = [
          { title: 'Reggae', id: 1 },
          { title: 'Chill', id: 2 },
          { title: 'Dubstep', id: 3 },
          { title: 'Indie', id: 4 },
          { title: 'Rap', id: 5 },
          { title: 'Cowbell', id: 6 }
]; })

This creates a controller for the Playlists page, it's name is 'PlaylistsCtrl'. If you think in terms of Java or C#, look at it like a constructor, it might make more sense. The first argument passed in is the name for the new controller, the second is a function that modifies the $scope. Normally in Java/C# you have a whole class dedicated to an object with variables and methods/functions, in AngularJS you can create the function right then and there without giving it a name, and attach it to that controller. Which is what " function($scope) {...} " does. So when the playlists page is loaded, the controller and it's scope is then attached. Which means you can access everything in the $scope from your html file.

In this case $scope.playlists is an array of simple objects. They have a title and an id. So if you serve the app locally from the Git Bash, you see that array of objects listed in the Playlists menu. Actually the Playlists page should be opened first, thanks to the default state set by the app.js file, specifically by the last line of code.

$urlRouterProvider.otherwise('/app/playlists');

Hopefully it's beginning to make some sense.

Now if you look at the playlists.html file this bit should actually mean something to you:

<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
        {{playlist.title}}
      </ion-item>

Think of it like this in your head: "For each playlist in playlists: create a link(href) and display the playlist title". In my next post I will expand on this and populate each playlist using the $scope. Because hardcoding all that in with html is boring.

Eye Candy

At this point, you should be ready to start making changes to the templates and get a feel for how Ionic apps work. Hopefully you have some experience with HTML and Javascript, if not; Codecademy has some excellent online courses to get you familiar.

If you go find the app you created previously, you will find a few folders. The one you will be primarily working with are in the WWW directory. From there it should be pretty self explanatory as to what is in each child folder. Most of the work will be done in the templates folder, where the html files are stored. If you open one up you will find that most of the normal HTML tags you would expect aren't used much. You can, but a lot of the ionic tags provide you with a substantial amount of functionality without much effort.

For example, you could easily add an icon with the  <i> tag, as well as apply a color to it without actually creating the icon.  Icons, colors, and styles are all included in the Ionic library and are easily found here and here.

So lets add a Facebook icon to our sidemenu app we previously created. The actual menu in the app is located in the menu.html file the templates folder. Open that up and you will notice the tag for the login button looks like this:

<ion-item nav-clear menu-close ng-click="login()">
          Login
</ion-item>

We can change the look of the login button by adding a color and an icon with the class attribute. We can class the login button as an icon, and set it to blue with the Facebook icon by adding:

class="icon ion-social-facebook positive"

So that it should look like this:

If you wanted to leave the actual login text alone, just put {class="icon ion-social-facebook positive"} into an <i> tag.

Like so:

 <i class="icon ion-social-facebook positive"></i>

A quick note, I was forced to close the <i> tag in that manner, if you try to close the tag in the initial tag, it will not properly close it, and cause undesired results. But if done right, it should look like this.

To break it down, "ion-social-facebook" determines which icon it will display, and "positive" determines the color. These colors are in the ionic.css, so you can modify them if you wish. A CSS file is also located in the CSS folder if you would rather style it the old fashioned way, and since Ionic is built on Sass you could also modify the color variables within the variables.scss file, or add your own.

Inside your app folder, navigate to and open the variables.scss file. It's located at:

www\lib\ionic\scss\_variables.scss

The colors are right there at the top, so feel free to use your favorite hex color picker to modify them. You could add your own if you have experience with Sass.

Finding an IDE

IDE's are entirely up to the preferences of the developer. So while I might suggest Sublime Text (and I do), some might prefer Eclipse, Netbeans, or Webstorm. You could skip the pain of hunting down support tools for ionic or AngularJS, and just build the app with Notepad++. Because unfortunately from what I can tell, support for Ionic itself is a little sparse as far as IDE's go. Cordova is typically readily supported, but intellisense is another story. It's all strictly quality of life enhancements, so assuming you know how to deploy the app through the ionic command line, you really don't need a fully fledged IDE.

Sublime Text 2 in Action

So to simplify things, let's start with getting Sublime Text. It has an unlimited evaluation license, so if you like it, you should buy it. Once you have that installed go get the package control plugin.

Now you can get the ionic tools using the package controller from the Preferences Controls, just click Package Control: Install Package and type Ionic Framework in the search box. Click it and restart Sublime. Do the same for AngularJS.

If you're a big fan of Visual Studio because you happened to get a copy through Dream Spark, and have been developing on it since, there's hope.

Visual Studio 2013 has a few plugins and templates available for Ionic via online templates, it also provides an emulator (Ripple) if you download the Cordova tools . You could then package it with either Visual Studio or Ionic. Visual Studio gave me too much trouble and I don't see the point in jumping through hoops if a simple command in the Git Bash will do it.  So I'll just show you how to do it that way.

In the next episode.

Install this, then that, and that.

Today we're installing Ionic on Windows.

I've been learning Ionic through a Virtual Machine hosted on a trial subscription for Windows Azure, it was part of the course. While this may be acceptable for some, when it comes to your average student it's a bit overkill. On top of that everything was done in VI, which isn't the best environment for most users. Most people aren't going to know how to get anything done in Linux to begin with.

That being said, developing in Windows would be optimal. So let's do that...

Unfortunately, the documentation for installing Ionic on a Windows OS isn't what I would consider "well done". I would best describe it as following a trail bread crumbs. No one guide actually contained everything I needed. The Ionic guide does the job, but expect to follow most every link on the page to a relevant library doc.

So, I'll try to save you some time.

First let's open Ionic's installation guide in another tab for reference. I'll just provide some help on everything that tripped me up as you go through the install process.

To preface: You will need the JavaSDK, as well as IOS and/or Android SDK's for actually publishing apps on their respective platform. I personally won't bother with IOS at this stage, as I'm an android kinda guy. Sorry, Apple fans.

If you've got those installed, it's time to get Git for Windows. Most of the installer is a typical game of smash the next button. Except for this screen:

Make sure you check the Git Bash box, and the GUI is optional.



The next screen determines how you run Git. You can run it from the Command Prompt, with or without Unix tools. It really didn't matter to me, I stuck with the Git Bash.

This next screen should look like this, as it says; its the recommended setting for windows.

The Git bash will make installing things a bit easier. Instead of downloading installers we just run one from the command line. But before we get to do any of that, we need NodeJs, there's a big green INSTALL button on their website, you can't miss it. Installing it should be easy. Click next/okay/yes/letsgetthisdone until it goes away.

Now run the Git Bash. It should show up in the Windows start button search box. Just type this in the command line and hit enter:

npm install -g cordova

Note: You may run into issues with these commands, on Windows 8.1 my Environment Variables weren't working properly. If you get an error similar to "npm not found", try a reboot.

Assuming Cordova installed correctly, now install ionic:

npm install -g ionic

Now that ionic is installed, you can create a starter app from a template using the following command:

ionic start myApp sidemenu

By default, a folder named myApp will be created in your user folder, usually located in the Users folder on the C drive. Open the myApp folder, then the WWW folder. Open the index.html file to see the app.

Most of the important files you will be working with are in the WWW folder. You can edit these with whatever IDE you prefer for JavaScript and HTML. I'll cover that at a later time.

Obligatory Introduction Post

First things first, I should introduce myself.

My name is Robert Bryant, and I am currently studying Software Development at the Galway-Mayo Institute of Technology (GMIT). I've got a decent background in IT and Communications, about five and half years in the US Navy as an IT. From radio communication with handheld HF transceivers, to network and server administration, I did a bit of everything. But, as cliche as it sounds, it didn't start there.


It started around the time I was seven, my family had an old Intel 386. It had a TURBO button, naturally it was never turned off. I remember playing your run of the mill children's games, chasing down the alphabet as Donald Duck. Eventually my father bought a new computer, a 486. I received the old one, along with the responsibility of fixing it when I broke it (and I did, a lot).  As my father continued to upgrade his computer, I continued to inherit his older ones, I broke them too. All in all I've spent a fair amount of time in front of a screen and my posture reflects that...


Fast forward 20 years.

This is my second year at GMIT, and so far things are going well. I'm enjoying

this course, it's been very hands on and I don't think there is a better way to learn coding. So far we've covered Java, C, C#, and HTML/CSS. We've done a fair bit of Business and Business Communications on the side as well. But this year GMIT changed the curriculum to include cross platform app development with the Ionic Framework. It is very much a "learn it yourself" environment at this point. I immediately realized that there are many different parts that go into making an Ionic app. In a way it's like a Windows app, you use a markup language to control the look and feel of the app, but the real work is done in a more object-oriented language. Except AngularJS isn't really a proper, full fledged object-oriented language... but technicalities are overrated, and metaphors are fun.

Learning Ionic, conveniently enough, coincides with a project in another course of mine; to create an online presence through a blog. As you might guess, this would be that blog. So I decided to put what I learn to the metaphorical paper, as I learn it.