Recently I stumbled across an awesome new learning tool, Appcamp.

Appcamp teaches the basics of Angular and Ionic, so that you can use what you know about JavaScript to build mobile apps. If you didn’t already know, I really love Ionic. My project, TwisterJS is built using Angular and Ionic.

Appcamp has four courses: ‘The Basics’, ‘Angular’, ‘User Interface’, and ‘Networking’. I wouldn’t recommend getting started on Appcamp without a firm JavaScript foundation. I would say finish Codecademy’s JavaScript and Angular courses first. (Those can be found here and here.)

‘The Basics’ is pretty simple. It just gets you started on the HTML you’ll need to use building Ionic apps. ‘Angular’ is very similar. It gets you started on Angular concepts, like scope and passing data.

‘User Interface’ is where things start to get really fun. This starts introducing Ionic’s directives, which allow you to create lists, buttons, side menus, popups and so much more. This is where the real meat of your app is going to be. The other two courses are really important, but up to now they are just laying foundation.

And lastly, there is the ‘Networking’ course. It’s the shortest course, but don’t think that means it’s the least important. This course goes over pulling data from an API, and writing data to JSON. This is going to be so important if your app saves any information, or updates any type of information. Think about the Facebook app updating in real time, and the user being able to upload a photo and see it not only on the app, but on the computer as well – instantly.

This is where the ‘Networking’ course will come in handy.

Appcamp is a really great jumping off point, but it is no substitute for practice. Definitely a good place to start before building your first Ionic app, though. I wish I had started off on a tutorial like this before building TwisterJS!

Personally, I would like to see a references section on Appcamp, for newer coders who need to learn more about HTML and JavaScript before jumping into something like this.

If you are getting started on Appcamp, be careful in the ‘Angular’ course. Their courses use chaining on services and controllers, as opposed to just attaching these to an app variable. If you are used to chaining, you’ll be fine. But if you’re used to attaching controllers to your app variable, this might be confusing for you.

Using chains

angular.module('app', ['ionic'])

.controller('Page1Ctrl', function($scope, $state, formData) {
  $scope.user = {};
  $scope.submitForm = function(user) {
    if (user.firstName && user.lastName && user.comments) {
      console.log("Submitting Form", user);
      formData.updateForm(user);
      console.log("Retrieving form from service", formData.getForm());
      $state.go('page2');
    } else {
      alert("Please fill out some information for the user");
    }
  };
})

Using a variable

var app = angular.module('app', ['ionic']);

app.controller('Page1Ctrl', function($scope, $state, formData) {
  $scope.user = {};
  $scope.submitForm = function(user) {
    if (user.firstName && user.lastName && user.comments) {
      console.log("Submitting Form", user);
      formData.updateForm(user);
      console.log("Retrieving form from service", formData.getForm());
      $state.go('page2');
    } else {
      alert("Please fill out some information for the user");
    }
  };
});

If you aren’t used to chaining, this can definitely throw you off. It certainly confused me at first. But once I got the hang of it, I did just fine.

The important thing to watch here is your semicolon. When you use chaining, you’ll only have one semicolon at the very end, as opposed to when you use a variable and each controller ends with a semicolon.

If you have a stray semicolon in your chained version, things will break. (You can take my word for it!)

Overall, I am really happy with Appcamp, and I hope you enjoy it too!

For more info on chaining vs. variables, check out this very informative blog post.

Questions? Tweet me!