Getting Started with Angular.JS - Part 1

  • Article

In my quest to get M.E.A.N. I started learning Angular and I honestly don't know why I waited so long to learn a JavaScript framework.  I have been a web developer for a long time and when I needed to write JavaScript, I wrote JavaScript.  But recently I wanted to make a change to the BlogEngine.NET admin pages (written in Angular) and I was lost.  I was reading the code and it made ZERO sense.  There was magic happening that I didn't understand and it really bothered me.  So .. I decided to learn Angular.  I'm only a day or so into learning but I was so impressed with how easy it is to get started, I thought I should share. As I continue to learn, I'll continue to share.  

The Basic Setup

To get started with Angular you need to include the AngularJS JavaScript <script> tag into the head of your HTML document.  You will also want to create a .js file to hold your Angular code. The embedded CodePen below shows the HTML and JS files of a very basic Angular app. 

See the Pen ZYeWrq by Tim Benroeck (@timrnd) on CodePen.

HTML
In the HTML I added <script> references to the AngularJS framework and our app.js file.  I also referenced our Angular app in the <body> tag using the ng-app directive. A directive is Angular's way of telling the Angular HTML "compiler" to attach specific behavior to and/or transform the DOM.  It is also scoped to that tag and the children of that tag.  I have seen many examples where the ng-app directive is placed in the <html> tag.  In the body of the HTML page you notice {{"World"}}  and  {{1+2}}, these are Angular expressions.  Expressions are what bind the Angular code to our HTML page and they will render where they are placed. 

JS
The app.js file in this example is super boring. I am creating an Angular module called myApp with no dependencies.  If this module was dependent on another module then I would pass the other module name into that empty array.  I will talk more about dependent modules in a future post about ui-bootstrap. In this example this file is overkill because I could have easily put ng-app=""  and gotten away with not declaring the module at all. 

Result
A very simple static Hello World example. 

Adding a controller

Now that we have our app structure in place, let's add an Angular controller. A controller is primarily used for handling the business logic of our application. It has it's own scope and is also limited by where in the HTML markup you put the ng-controller directive. Let's create a controller and move our application's business logic inside. 

See the Pen azJmNy by Tim Benroeck (@timrnd) on CodePen.

 
HTML
I added the ng-controller directive to the <div> tag and in quotes I put the name of my controller (cleverly named MyController) and aliased the controller as mc. By adding an alias I can easily refer to the controller properties and functions. I then replaced the static expression of {{"World"}} with {{mc.name}} . Now Angular will reference the logic in my controller to return the name property.  Similarly, I replaced 1+2 = {{1+2}} with {{mc.num1}}+{{mc.num2}} = {{mc.doMath()}}.  

JS
Now we are actually doing something with our Angular code. We added a controller to our app with properties for name, num1, num2 and a doMath function that returns the sum of num1 and num2. Any logic we want when accessing these properties should be done in the controller. 

Result
A static Hello World example with logic separated from the presentation layer. 

Adding interactivity 

Let's add a form to the page that will ask the user for their name and numbers to add. 

See the Pen RNpGKE by Tim Benroeck (@timrnd) on CodePen.

HTML
We added a form and inputs for name, num1, and num2 and we are now using the ng-model and ng-show Angular directives. The ng-model directive will bind the input value to the property in our controller with a two-way binding.  Meaning if I change the value of he input or I change the property value in the controller both will reflect the new change.  I'm also using the ng-show directive to control the visibility of the heading tags.  I only want to show the greeting and math equation when it makes sense.  There is also an ng-hide directive that will hide elements if the value returns true, this way you do not need to negate the ng-show value to hide controls. 

JS
We made no changes to our Angular controller.  What!?  Yup, this is part of the magic of Angular.  The ng-model directive bound the values in the HTML input fields to our controller.  We didn't have to write any code to update the properties or submit the form to execute the doMath() function. 

Result
A proper hello world example allowing the user to interact with the page.  Try it out! 

Summary 

Although the example we used in this post was super simple, I hope you started to see the power of what Angular can do.  I'm going to continue learning more about Angular and I'll post more on advanced topics as I learn them.