ion-nav-view - This is a placeholder to the real content. AngularJS and Ionic will put your content inside this tag automatically.

Note that we only provide the <head> and <body> tags because Meteor takes care of appending the relevant html parts into one file, and any tag we will use here will be added to Meteor's main index.html file.

This feature is really useful because we do not need to take care of including our files in index.html since it will be maintained automatically.

Our next step is to create the AngularJS module and bootstrap it according to our platform.
We will create a new file called app.js.

This bootstrap file should be loaded first, because any other AngularJS code will depend on this module, so we need to put this file inside a folder called lib, so we will create a file in this path: client/scripts/lib/app.js.

In this file we will initialize all the modules we need and load our module-helpers, so any time we create a module-helper it should be loaded here right after.

We will also check for the current platform (browser or mobile) and initialize the module according to the result:

Before we dive into building our app's different components, we need a way to write them using es6's new class system. For this purpose we will use angular-ecmascript npm package. Let's install it:

$ meteor npm install angular-ecmascript --save

angular-ecmascript is a utility library which will help us write an AngularJS app using es6's class system.
As for now there is no official way to do so, however using es6 syntax is recommended, hence angular-ecmascript was created.

In addition, angular-ecmascript provides us with some very handy features, like auto-injection without using any pre-processors like ng-annotate, or setting our controller as the view model any time it is created (See reference). The API shouldn't be too complicated to understand, and we will get familiar with it as we make progress with this tutorial.

From now on we will use our controller as the view model using the controllerAs syntax, which basically means that instead of defining data models on the $scope we will define them on the controller itself using the this argument. For more information, see AngularJS's docs about ngController.

Now we want to add some static data to this controller, we will use moment package to easily create time object, so let’s add it to the project using this command:

Note that we used the controllerAs syntax with the chats value. This means that that the controller should be accessed from the scope through a data model called chats, which is just a reference to the scope.

Now we will make the data stubs appear in our view.

We will use Ionic's directives to create a container with a list view (ion-list and ion-item), and add ng-repeat to iterate over the chats:

You might notice that the dates are not formatted, so let's create a simple AngularJS filter that uses moment npm package to convert the date into a formatted text, we will place it in a file named client/scripts/filters/calendar.filter.js: