Learning Angular.js Reply

misc4_bgOver the past few months I have been working with Angular a lot.  I had no previous knowledge of Angular before this.  The Pluralsight course that helped me out the most was AngularJS: Get Started by Scott Allen.  It was very easy to follow along.  Scott was very good at explaining what he was doing.

One other resource that I found was very helpful was a walkthrough on scotchio.  This was good to go through after watching the training video.  This walkthrough actually showed how to set up a simple project.  It didn’t have as much explanation involved but it was a good walkthrough of exactly how to get a sample project set up and was a good starting point for creating a project to play around with.

One thing I ran into after watching this course and then starting to help out with an actual customer Angular application was the different ways to access variables in the controller in the HTML page.  The Pluralsight video and the walkthrough show $scope injected into the controller, and displayed on the page by including the variable name in brackets.

JavaScript:

$scopeController

HTML:

$scopeHtml

Result:
$scopeResult

 

Another way it can be done is setting a variable = this in the controller and using that instead of $scope in the controller.   In the HTML page you have to set ng-controller=”ControllerName as <variable>” and use this in the page.

JS:

vmController

 

HTML:

vmHtml

 

Result:

vmResult

This needs to be done in the route definition if you are using routes instead of declaring the controller in the HTML.

JS w/ routes:

vmControllerRoute

Both ways work equally well but it is good to note that there are different ways of getting this done and when working on a project keep it consistent to avoid confusion.  ControllerAs is the preferred syntax, according to JohnPapa’s Angular styleguide, which is the closest thing there is to an actual official Angular styleguide.

ControllerAsWhy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s