A Beginner's Introduction to AngularJS

JavaScriptAngular JS

Please contribute by voting. Thanks!
4
Client-side framework such as AngularJS, Ember.js, Aurelia, Knockout and React (and so on, there are about a thousand of them...) has become immensely popular. Unfortunately, the learning curve for these frameworks is often pretty steep - starting learning these concepts from zero can be quite hard.

This article is meant to give a very brief introduction to AngularJS for people that haven't worked with a client-side framework before.

The theory

So what is AngularJS? Well it's a JavaScript library that helps you build web applications that runs in the browser. These kind of applications are commonly known as SPAs - single page applications. 

The idea is that you only fetch one "page" (thus the name SPA) from the server. The page will contain a HTML frame as well as references to various frameworks as well as your client-side application. All other resources (like HTML-templates for actual pages and data) will be fetched on demand by the library. This makes each navigation / action in your application both lean and fast (since you don't have to fetch the whole "page" for each navigation), but perhaps at the cost of taking it a little bit longer to initially load up the application.

An AngularJS application is written as components (of various types) that are called by the markup.  AngularJS is, at the same time, controlling the markup which leaves these both parts dependent on each other. Your markup will contain a lot of AngularJS specific code, expressions, attributes and tags.

Some practice

1. Some basic HTML

First, let's start with some basic HTML:

<!DOCTYPE html>
<html>
  <head>   </head>
  <body>
    <div>
      <p>Current name: </p>
      <p>
        Set new name:
        <input type="text">
        <button type="submit">Set name</button>
      </p>
    </div>
  </body>
</html>

Run it here: https://plnkr.co/edit/5J0VEqWq2vQV5KvFlxnx?p=preview

This piece of markup does actually nothing at all besides printing some stuff on the screen. Let's add an AngularJS application to the page so we can see how the markup and application interact with each other.

2. Load AngularJS and define our application

Let's load the AngularJS library, load our own source file as well as defining our application in the markup:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <script src="myapplication.js"></script>
  </head>
  <body ng-app="myFirstApplication">
    <div>
      <p>Current name: </p>
      <p>
        Set new name:
        <input type="text">
        <button type="submit">Set name</button>
      </p>
    </div>
  </body>
</html>
Run it here: https://plnkr.co/edit/aNnPTQMjGQeforAPBXUS?p=preview

Additions:

* Referenced AngularJS as well as our own script-file (myapplication.js) in the header

* Decorated the body tag with ng-app="myFirstApplication". This means that we intend to run an AngularJS application named  myFirstApplication. This application is yet to be defined.

3. Finishing the markup

We will finish the markup by adding a reference to our controller as well as some expressions and attributes that will print and bind data and execute an action:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.angularjs.org/1.4.8/angular.js"></script>;
    <script src="myapplication.js"></script>
  </head>
  <body ng-app="myFirstApplication">
    <div ng-controller="MyFirstController as vm">
      <p>Current name: <strong>{{vm.name}}</strong></p>
      <p>
        Set new name:
        <input type="text" ng-model="vm.newName">
        <button type="submit" ng-click="vm.setName()">Set name</button>
      </p>
    </div>
  </body>
</html>

Run it here: https://plnkr.co/edit/0Q05ndgmBBtW6ClEoUOd?p=preview

Additions:

* Defined our controller in the div tag with ng-controller="MyFirstController as vm". This means that we will display data and execute actions defined in the MyFirstController inside the div. We reference our controller in our markup by the short name vm.

* Added  {{vm.name}} in the "Current name"-paragraph. All this will be parsed by AngularJS and replaced with the name-variable defined in our controller.

* Added  ng-model="vm.newName" as an attribute to the input tag.  This means that the input field will display the content of the variable newName  defined in our controller. It will also actually update the variable in the controller when the user makes changes to the content of the input field (this is called two-way binding).

* Added ng-click="vm.setName()" as an attribute to the button. This will execute the function setName defined in our controller when the user clicks the button.

4. Writing our application and controller

Finally, we complete our project by defining our AngularJS application as well as our controller in our own js-file myapplication.js:

(function () {

    //Create application
    angular.module('myFirstApplication', []);
   
    //Create controller within application
    angular.module('myFirstApplication').controller("MyFirstController", [myFirstController]);

    function myFirstController() {
        var viewModel = this;
     
        //Model
        viewModel.name = "Robert";
        viewModel.newName = "";

        //Functions
        viewModel.setName = function() {
          viewModel.name = viewModel.newName;
        }
    }
   
})();

Run it here: https://plnkr.co/edit/iIFYTaoL6nyWP35hDwKS?p=preview

The file contains the following:

* A definition of our application (must be called the same as defined in the ng-app attribute)


* The MyFirstController controller which contains two variables as well as one function. These are called


So when you click the button, AngularJS will call the setName()-function in your controller. The function will replace the contents of the variable name with the contents of the variable newName. This will in turn automatically update the contents of the Current name-paragraph to reflect these changes.

Now this is a very simple AngularJS application but AngularJS is a large library with a lot of functions so there are much more to learn. If you want to dig a little deeper, here's a little more advanced example:
http://www.codeaddiction.net/articles/36/a-very-simple-wizard-in-angularjs-and-bootstrap


Article created: Feb 4 '16. Edited Feb 5 '16.

Your comment

You need to sign up / log in to comment this article

Author

Created by Robert Bengtsson [126] Feb 4 '16

Share article

Do you know about

TFS?

Write an article