Adventures in AngularJS Part 1

square

 

I recently had a conversation with a hiring person who was looking for a Front End Developer. Their stack consisted of mostly AngularJS and while having a cursory knowledge of Angular I am not as comfortable with working in that framework as I would like to be. That being said I starting looking through some tutorials and I am getting my hands dirty. Filthy some would say.

Some would also say that while learning all there is to learn about Angular I should also blog about it. So that it what I am going to do. This is the first part of a three part series in which I dive deep into AngularJS and try to come up just slow enough not to cause dybarism.

AngularJS was developed as a way to extend HTML and use it as a templating language allowing web apps to be rendered client side. It is most notably used to develop single page applications, or application that download with one request to the web server. With everything being on the client side you can save a lot of resources server side. I will show you what I mean. Lets create a simple html page called index.html:

<!DOCTYPE html>
<html>
	<head>
		<title>AngularJS Example>title>
	<head>
	<body>
	</body>
</html>

Now we add some spice, most notably we add a script tag so that we can download the AngularJS Script:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0rc3/angular.min.js"></script>

That’s it, no it’s not, but you thought you were a genius for two seconds right? Now that we have our script we can start doing some stuff. One thing that we need to realize is that AngularJS is an MVC framework. The description of which warrants its own blog post so this will assume that you have some knowledge of MVC frameworks. Our views as stated before are rendered using HTML, where we create our own models and controllers. That us our first task to create a controller for our application. So let’s create a new file on the root of the folder called core.js. The first line we want to add to our JS file will create our application:

var myApp = angular.module('myApp', []);

The above line uses a javascript variable to create an angular module. We name the module myApp and that will serve as the name of our application. We have to edit our HTML file to reflect the new application but we will go back to that when we create our controller. Now lets add to our core.js some code that will create our controller:

myApp.controller('GreetingController', ['$scope', function($scope) {
	$scope.greeting = 'I created an AngularJS App!';
}]);

With that we also have to add to our index.html:

<div ng-app="myApp" ng-controller="GreetingController">
	<h1>{{greeting}}</h1>
</div>

So we some new stuff that we need to explain. Lets start with the JavaScript first. since we initiated the app we use the controller constructor to create a controller. We call this controller GreetingController (they all use camelcase for naming stuff). We use the $scope as the glue for our views and controllers. We then use the function constructor and use the $scope as the argument. Within our new function we have our controller behavior. Here we are creating a greeting that we greet us when we load the page.

Now let’s explore the new things AngularJS allows us to do with our HTML. From an HTML compiler standpoint our Angular script creates some new HTML elements that we refer to as Directives. The first of note is the ng-app directive, which initiates or bootstraps our Angular application. It also sets up our root element which is important for our $scope, but I will go more into that in a later post. Usually the ng-app goes into our tag or even our element, but nonetheless we add in our application name which is myApp.

We then add on our ng-controller directive. The directive tells our HTML that this will use our previously created controller by adding our controller name of GreetingController. We can then access the $scope properties within the controller within our View. That brings us to those weird looking tags within the div. It is simply the Angular markup used to bind our elements to the view.

It should look like below:

See the Pen Binding Example by George Offley (@georGEO1989) on CodePen.

More Fun

One thing that I thought was cool was being able to manipulate the DOM live. I did this by going through some tutorials and adding Bootstrap4 to my HTML file. I will show you below. This is my HTML file:

<html>
 	<head>
 		<title>AngularJS Tutorials</title>
 		<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 	</head>
 	<body>
 		<div ng-app="myApp">
 			<div ng-controller="FirstCtrl">
	 			<input type="text" ng-model="data.message">
	 			<h1 class="{{ data.message }}">{{data.message}}</h1>
	 		</div>
 		</div>	
 		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
 		<script type="text/javascript" src="main.js"></script>
 	</body>
 </html>

And the JS file is as seen below:

// Service
var myApp = angular.module('myApp', []);

myApp.factory('Data', function () {
	return {message: "i'm data from a sservice"}
})

function FirstCtrl($scope, Data){
	$scope.data = Data; 
}

It should look like below:

See the Pen drJeA by George Offley (@georGEO1989) on CodePen.

The code is pretty comparable to the code before but with a couple of things added. We use the controller called StyelCtrl to help the HTML find our controller in the JS file. We also see the use of the {{ data.message }} markup and I can use that to reference our Data object. You also see in the JavaScript that we have to use the factory API to create our own service and then pass that service into our StyleCtrl. We then pass in the data into an input box and we can just add some bootstrap classes to change the h1 tag on the client side. Awesome right?!

I don’t pretend to know a lot. So if I’m wrong about something please comment below

Stay tuned for Part 2 of this adventure!

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply