Demystify Angular Controller $scope vs. this

Tue, 20 Oct 2015 00:00:00 +0000

There are two main patterns we can use to construct controller functions in Angular. The classic way is to use $scope to link controllers to views as such:

// View: <div ng-controller='LabController'></div>
app.controller('LabController', function ($scope) {
  $scope.labEquipment = {
    labEquipmentProperty: 'Some value'
  };
});

Since Angular version 1.2.0, we could use the this and Controller as syntax:

// View: <div ng-controller='LabController as lab'></div>
app.controller('LabController', function () {
  this.labEquipment = {
    labEquipmentProperty: 'Some value'
  };
});

These two paradigms are generally interchangeable. However, binding properties to the view using $scope is an expensive operation, so the use of this can be advantageous for keeping $scope uncluttered. But when using this, make sure to check that it is bound the the proper scope!

Whichever paradigm you choose, remember that the use of one pattern over another should remain consistent within an application, and $scope does need to be injected into the controller to use $scope functions such as $watch and $digest.

Check out the resources below for a more in-depth exploration of $scope and this syntax.

Resources

Digging into Angular's "Controller as" syntax by Todd Motto
Rethinking AngularJS Controllers by Todd Motto
Do You Like Your Angular Controllers with or without Sugar? by John Papa

Start a Blog with Jekyll and GitHub Pages

Sat, 10 Oct 2015 00:00:00 +0000

In starting this blog, one of the first questions I considered was which blogging platform I should use. My initial top choice was WordPress, but in the end I decided to go with Jekyll and GitHub Pages. If you're familiar with GitHub, Jekyll is a great blogging platform that provides simplicity and speed.

Content Management System (CMS) or Static Website

WordPress and other similar platforms are Content Management Systems (CMS) that use databases to store content. Content Management Systems are very powerful applications, but if you only need a static site, like I did for my blog, CMS dynamic code and database calls can unnecessarily slow down loading time.

On the other hand, Jekyll is a static blog generator that compiles all files into static HTML before publication and has no database, which is great for loading speed. Essentially, Jekyll is a minimalist platform, with the bonus of free GitHub Pages hosting. If you don't need the added complexity of a dynamic blog, Jekyll is a solid choice.

If you need some help deciding whether a CMS or static website is right for you, check out this article.

Quickstart Guide to Jekyll

Fork an existing Jekyll template. I used Jekyll Now to start, but you can find some other great themes here.
Click the Settings button on your forked repository and change the repository name to yourusername.github.io, replacing yourusername with your GitHub handle. Your website should go live within a couple minutes and be accessible from http://yourusername.github.io.
Edit the _config.yml file and save the changes to your repository. There are two main ways to edit the blog and publish the changes:
- Clone the repository onto your local machine, edit the file, and commit and push the changes to GitHub.
- Make changes to the file in the browser on GitHub by navigating to the file in your repository and clicking the pencil icon to edit. Edit the file and commit the changes.
Edit the about.md file to change the content on the About page.

Previewing Your Blog Locally

If you're editing your blog locally, you may want to preview your blog on your local machine before pushing your commits. To do this, first make sure you have Ruby and Ruby Gems installed. Then run the following commands:

gem install jekyll

gem install github pages

Finally, in your blog's repository, run jekyll serve in the command line and navigate to http://localhost:4000 in the browser to see your blog!

Writing a Blog Post in Jekyll

For your first post, edit the /_posts/2014-3-3-Hello-World.md file on your local repository or on GitHub.
Update the title at the top of the Markdown file. The variables at the top between the triple-dashed lines are called front matter, which you can read more about here.
Rename the file name to include the date and title of the post in the format year-month-day-title.md. Jekyll requires this format for your posts' file names.
Preview the post either on GitHub or on your local machine. Commit and save the changes.
For future blog posts, create a new file in the _posts folder. You can create a new file either in your local repository, or on GitHub by navigating to the _posts folder in your remote repository and clicking on the + icon. Remember to format the file name correctly and include the front matter, which is set at the top of the file between triple-dashed lines.

Blog posts are generally written in Markdown. A great reference is this Markdown Cheatsheet.

Happy blogging!