"Getting" Angular in 5 minutes

There's a lot out there about Angular, but - I found - knowing where to start was somewhat tricky.

A lot of the tutorials start you out directly with some kind of start-kit (for example the Angular Seed Project). I find that a lot of these resources confuse the matter by introducing the toolset before they introduce the framework.

This tutorial tries to go the other way: I will show you the very smallest amount of stuff so that you can see why this Angular thing is kinda cool.

Getting Started

Right .. let's start out with an HTML document. Create a page called index.html and paste this into it:

<!DOCTYPE html>
<html>
<head>
  <title>Hello App</title>
</head>

<body ng-app="HelloWorldApp" >
	<div ng-controller="HelloController" ></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

I have ng-app="HelloWorldApp" on my body tag
I have ng-controller="HelloController" on my div tag.

What that does:

ng-app tells Angular to that everything contained within that element is part of the HelloWorldApp module - it will expect a corresponding module in my JavaScript.
ng-controller will look for a corresponding controller registered against the containing module.

Load that up in your browser (just double-click). Open the developer console, and you should see an error stating:

Uncaught Error: No module: HelloWorldApp

Angular is complaining cause we've told it ng-app="HelloWorldApp", but we don't have a matching app.

Let's add some code

Put the following in script tags after where you have included Angular:

// this is our global app: 
angular.module('HelloWorldApp', []);

Reload the page and you should now see a new error:

Error: Argument 'HelloController' is not a function, got undefined

Right, we've defined: ng-controller="HelloController" and we don't have a corresponding controller in our code.

Update your script so that now it looks like:

var HelloController = function($scope) {
    $scope.message = "Hello!";
};

// register our controller/s
angular.module('HelloWorldApp.controllers', [])
    .controller("HelloController", HelloController);

// this is our global app: 
angular.module('HelloWorldApp', ['HelloWorldApp.controllers']);

Reload the page, and now you should see a very satisfying message that says: Hello!

Notes:

angular.module is just a getter and setter. In the above example, we create a module called HelloWorld.controllers, against which we register our controller function. We then inject this dependency into our app using the array syntax: angular.module('HelloWorldApp', ['HelloWorldApp.controllers']); - this registers all the controllers that we add to our module HelloWorldApp.controllers to our global module (HelloWorldApp).

$scope.

Finally, you will notice in our controller code that we pass in $scope, and we set $scope.message to "Hello!" -> and this is magically rendered in our view .. that is the crux of the matter with controllers: we write our code in the controller .. and it has a shared $scope which is available in our view ... this is pretty powerful!

Let's add in some magic:

In our html, add:

<input type="text" ng-model="message" />

the ng-model tag binds the input from this text field to our $scope.message value.

Reoad the page, and you should now see a text field - edit it, and you can see the message updates as you type ... pretty cool hey?

Let's get "fancy"

update your controller code to be:

var HelloController = function($scope) {
    $scope.messages = [
        {"msg": "Hello!"},
        {"msg": "Hola!"},
        {"msg": "Bonjour!"}
    ]
};

and update your html to:

<div ng-repeat="message in messages" >        
    <input ng-model="message.msg" /> {{ message.msg }}
</div>

Any that's what sold me on Angular!

Conclusion

We're just scratching the surface of Angular here, but the idea was to demonstrate the power that the framework gives you, and to give you enough of an idea of what is going on so that you can start diving into some more advanced topics.

Over the next week or so, I hope to follow this up with a slightly more in depth article which dives into some more advanced topics such as services, testing, filters, partials and project structure and setup.

Finally, here is the code from the above tutorial. You can literally just save it as an html file and double click to run it in your browser:

Resources

Menu