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.