AngularJS Part 1 - Getting started with the basics

Yngve Bakken Nilsen -

This post is part of a series of posts on AngularJS, and here are the parts so far:

AngularJS has taken the web with storm, and there are plenty of blogposts outlining how one should go about structuring an AngularJS application. Some of the examples are very good, and some are really not that scalable. I will attempt to write down my experiences and cover as many of the AngularJS aspects as I can on the way, trying to keep it realistic, because - let's face it - demo code is just demo code. :) The examples will be hosted in an ASP.NET MVC WebApp, but it could just as well be a plain html/js solution.

Modules

Modules are a key part of the AngularJS stack, and you will always start with a module to bootstrap your app. Normally we bootstrap the app by adding the ng-app directive to the root tag that defines the boundary of our app, i.e. <body> or <html>. The module needs to be defined, so let's kick things off with a proposed file-structure right away.

Structure

No matter if your app is likely to grow or not, a good structure will never hurt. I like to group everything about my app in a separate /app/ folder in the root of my project, and the core scripts in /scripts/. As I normally host my app in an ASP.NET MVC website, this follows the NuGet-convention, making it easy to add scripts using install-package AngularJS.Core, etc. Also, if I'm developing a Single Page Application, I can leverage MVC's Bundling and just create a bundle of everything in my /app/-folder.

So far in our app, we'll have a single js-file, and we'll name it app.js. Our structure will now look something like this:

/root
    /app/app.js
    /scripts/angular.js
    /views/main/index.cshtml

app.js

This is where we kick off our application. The first thing we need is to register our main application module, and the syntax for this is pretty straightforward:

angular.module('app', []);

Notice the empty brackets? These are important as they will contain the dependencies for this module. It is also a completely different function than angular.module('app');. The latter will simply find a reference to the module and return it, whereas the former will create a new module called 'app'. We'll see why this is extra important once we get to the part on controllers and services.

index.cshtml

Now that we have our module, we can add the ng-app directive in our view:

<html>
	<body ng-app='app'>
	</body>
</html>

The directive is case-sensitive, so make sure you get it right.

Make sure to add a reference to angular.js and app.js (in that order) in your HTML if you're not using some bundling-mechanism

To demonstrate that the angular-app works, we can add a control with some databinding for illustration purposes

Note: The following code is 'demo-code' and will be removed in the next part, but it shows that Angular is bootstrapped, and that our module is defined

<html>
	<body ng-app='app'>
		<input type='text' ng-model='text'>
		{{text}}
	</body>
</html>

Typing something in the text-box should now be reflected immediately next to the textbox. As I mentioned in the note above, this is typical demo-code and not something you would use in a production application. We'll go in detail on the binding-syntax in the next part when we talk about controllers and scopes.

[Complete code for this post on Github.com](https://github.com/yngvebn/blog-angular/tree/Part1)