Learning Angular Q&A

While I’ve been learning Angular for the past couple of weeks, I’ve been able to get a pretty good idea of how the framework works as well as a lot of the best practices for it. While reflecting on what I had learned, I came up with several questions for myself to research to get a better understanding of more patterns and what I should use for certain things in Angular. Here are the questions I came up with and the results of my research.

Highlighting JavaScript this keyword in Sublime Text 2

I’ve looked for something like this before but I’ve only recently found it. Sublime Text 2 uses textmate themes which can use regular expressions and scopes to highlight certain keywords that are only relevant in certain languages. I got a new theme which I love called itg.flat and while the colors are great, it was lacking a highlight for the this keyword in JavaScript, which makes in harder to spot and locate scope issues.

I found this on a Sublime Text 2 forum post, which highlights the keyword. You just need to add this to the .tmtheme file for your theme, which will usually be located in {user}/Library/Application Support/Sublime Text 2/Packages/Theme - Name/ for Mac and %APPDATA%\Sublime Text 2\Packages\Theme - Name\ in Windows:

1
2
3
4
5
6
7
8
9
10
11
12
13
<dict>
	<key>name</key>
	<string>Super this (JavaScript)</string>
	<key>scope</key>
	<string>source.js variable.language.js</string>
	<key>settings</key>
	<dict>
		<key>fontStyle</key>
		<string>bold italic</string>
		<key>foreground</key>
		<string>#DE4DB4</string>
	</dict>
</dict>

You can get rid of the bold/italic if you want or change the hex color code too. You may also want to check out the Sublime Text 2 Color Scheme Editor. Here you can see the result. Before:

After:

AngularJS styleguide by @john_papa

This AngularJS styleguide, written by @john_papa, has been a fantastic resource for me while learning Angular:

https://github.com/johnpapa/angularjs-styleguide

Among the key takeaways in style that I found most important were the following:

1. Wrap all angular components, factories, controllers, and directives in an Immediately Invoked Function Expression (IIFE). This is to prevent variables and functions polluting the global namespace.
2. Use named functions instead of anonymous functions to help with debugging (generally a good idea for all JavaScript)
3. Use the ControllerAs syntax to get access to this from the controller instead of using $scope. This is to avoid the “dot problem” in the views. It is also a good idea to assign this to a consistent variable such as VM to avoid this scoping issues.
4. Use $inject to list all dependencies in an array for the component to prevent minification mangling, and huge function declarations including dependencies can be hard to read.

The whole document is a great read though and I really encourage you to read it if you are working on an Angular project.

Using “Controller as” syntax in Angular routes

I’m working with Angular routes and trying to nail down the best practices, which includes using the “Controller as” syntax with routes. See this article from Will Anderson for how to achieve this:

Using “Controller as” Syntax in Angular Routes @ Will Anderson

Writing and programming, crafts worth honing

I’ve been doing quite a lot of writing lately, and quite a lot of thinking about writing, and a fair bit of reading too. This of course was one of my goals for 2015, and I’ve been keeping a consistent journal for the first time ever (fourteen days straight and counting). From all of this writing there is one thing I’ve come to realize and it’s that writing begets writing. The more you write, the better you become at clearly expressing your thoughts and ideas through writing and translating them from the jumble in your head to the written word. Your fingers fly across the keyboard with very little barrier between your mind and the keys.