AngularJS

This is part two of a beginner series which compares popular Javascript frameworks. In the previous post I focused on React. I will discuss AngularJS in this post.

According to AngularJS Docs, AngularJS extends HTML vocabulary so your environment is extraordinarily expressive, readable and quick to develop. For the sake of comparison, we will render a list of hobbies on the screen just like we did in React.

MVC is a popular software design pattern that stands for.

Model: maintains the data

View: displays data

Controller: controls the interaction between View and Model or the logic

Angular offers a variant of the above model called MVW. The W stands for whatever.

Setting up

Here is how you get codepen.io ready for react:

1. Click on the HTML tab, then add the following script at the top of the html:

<script type=”text/javascript”
src=”//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js”></script>

2. Add a <html></html> tag

3. Add ‘ng-app’ to that <html>

<html ng-app>

This tells Angular in what container to be active.

Render ‘Hobbies’

There is not much to say about that. :)

Render List

In order to render the list, let’s add another container <body> and connect it with a controller. The controller is a function called ‘contact’ (remember the controller deals with the view and model).

<body ng-controller=’contact’>

In JS Tab:

define the function you attached to the <body>

function contact (){
}

$scope is a build in object that every controller has access to. $scope is how you access variables passed in by the view to the function, we need to first pass in $scope as an argument to the function. Inside the function we will a create a key with value. The value being the array of hobbies which will be attached to the $scope object.

The only other thing we need to do to is to display the list of hobbies on the screen.

Now that we have the list in the controller we need to connect it to the view.

In the HTML tab, : right after Hobbies let’s add <li>. There is a build in function that we can use to loop over an array called ‘ng-repeat’. This takes a value.

<li ng-repeat=’contact in contacts’> </li>

We can access each element with ‘contact’ and if we want to render the value of a variable we use {{}}.

<li ng-repeat=’contact in contacts’> {{contact}} </li>

Done! This will render the list!

Bonus

We will insert an input that adds new hobbies to the list. After rendering the <li>, before </body> add an input tag and also add a button tag like so:

<input type=’text’ />
<button> Add </button>

It’s time to add angular functionality to the pure html above. In the input before the the closing /> add ng-model=’mytext’. Now we can access the input from javascript with the value ‘mytext’. Similarly, with respect to the button tag let’s add a function to be invoked when the button is clicked. After the button tag, add ng-click=’add()’ . We will write the ‘Add’ function in a minute. Your code must look like this:

In JS Tab

We want to add logic and action to the two tags we created in the HTML tab earlier. Inside the contact function we created earlier, we need to add a function called ‘add’ in our $scope object. We will also access the array that we declared earlier and push the value of input to it. // is a function made inside the ‘contact’ function we created earlier:

$scope.add = function () {
$scope.contacts.push($scope.mytext); // $scope.mytext is the //value we put in the input
$scope.mytext = ‘’;// it makes the input field empty
}

here is the full code:

Tips

  1. Angular has two way data binding so if data changes in controller it will update in the view
  2. access the result of the value with {{}}
  3. AngularJS will invoke the controller with a $scope object. $scope objects glue the view with the controller
  4. All the variables are prefixed with $

That is it. :)

stay tuned for more