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 theHelloWorldApp
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