Last updated .
Disclaimer: This is work in progress!
I have long wanted to learn something about this angular thing, which seems to be so popular; I even took a free online course, but it didn't really tell me how to get started in practice. Being a .Net developer, I am used to working in Visual Studio and I want to keep it that way, at least for now. It seems that, these days, wherever you look, you are told to first install all kinds of "dependencies" with names like npm, node, bower, grunt, jshint and what not, without being told much about what all this is good for. I find it overwhelming and counterproductive to my learning that I have to wrap my head around all that, before I even get started. If I want to learn about all those libraries (I do, but later!), I will buy a book on each one separately. The approach I want to take here is to keep all external dependencies to a minimum in order to avoid as much "noise" as possible and focus on the topic at hand, which is Angular.js. Also, I will manage my infrastructure manually; I will not learn anything if all kinds of tools serve me automagically all the time. I am not letting myself be bugged down by matters of infrastructure or performance, either. Such worries can come back to me later.
With respect to styling, I will keep that to an absolute minimum, once again to remain focused, so things are going to look terrible in the browser. But who cares? This is about Angular, not css.
I am coming from a .Net background, and so hopefully this document will reflect the things that make such a person wonder and the things learned about Angular.js on the way. At least, that is my ambition.
The natural way to get started with anything web, to me, is to create a new ASP.Net application project using Visual Studio (I am using Visual Studio Community 2015). So that is what I did (untick the "Add Application Insigths" option), naming it "AngularProject":
In the next wizard step, select the "Empty" template and untick the options for unit test and references. I am not going to need much in the way of server-side functionality, and I can always add that later if needed.
After hitting OK, you will see a pretty empty project with just a web.config file and a bunch of references.
There is a NuGet package to install the Angular script files to the project, but in keeping with my mean and lean approach, I want to do this manually, in an attempt to be in control. If you want to follow along, these are the steps to get Angular into the project:
Get the Angular.js stuff in a zip file from the Angular.org site, selecting the Zip "Build" option:
In the Visual Studio Solution Explorer, create a "Scripts" folder with an "Angular" child folder:
Unzip the zip file you downloaded in step 1 into the new /Scripts/Angular folder. In my case, this caused the script files to be located in a \Scripts\Angular\angular-1.5.0-rc.0 folder. As you can see, the angular build number forms part of the folder name, and so is likely to be different over time. This has no practical significance except you will have to change the folder name in script tags in the upcoming examples, if you choose to copy them to play with.
It seems that the first step one has to take with Angular is to define a root module, essentially a container for the entire application. In .Net, all things are grouped into namespaces; in Angular, it seems that a module serves the same purpose: to group resources that are logically related, although it's a little more than that. The difference between a module in Angular and a typical namespace is that modules also have methods on them. And just as you can define child namespaces, you can submodules of a module.
So, in order to get things going, I created a minimal html file called Home.html, referencing the angular script file in a script tag. An angular root module is defined by the use of a ng-app directive (an attribute) on some html element. In adding this directive, a welcome surprise is to see that the intellisense support for it is already built in to Visual Studio, it even has its own purple text color:
The ng-app directive is the entry point of an Angular.js application. It causes the Angular.js framework to be initialized. The framework will check for an ng-app directive in the HTML document after the entire document has been loaded. As it turns out, this is not enough, though. The root module must also be created through script, or a very ugly error message is logged by Angular.js.
My first attempt at the code for a working Angular.js application is this:
<!doctype html>
<html ng-app="AngularProject">
<head>
<title>Home</title>
<meta charset="utf-8" />
<script src="Scripts/Angular/angular-1.5.0-rc.0/angular.js"></script>
</head>
<body>
<h1 id="header">Welcome to </h1>
<script>
var appModule = angular.module('AngularProject', []);
document.getElementById("header").innerHTML += appModule.name;
</script>
</body>
</html>
As you can see, the app is defined with a ng-app directive on the root html element and the angular script file is referenced with a script tag in the html head section. Also, there is a startup script that creates the root application module, named "AngularProject". The script also causes the text "Welcome to AngularProject" to be displayed in the browser. If you want to follow along, add an an html file to the project root (I called it "Home.html"), paste the above code into it and load it in a browser.
You might be wondering how the inclusion of the angular script file in the head tag can trigger anything to happen. Well, the thing is that the script registers a callback, which is then executed when the document is finished loading, thus creating the app, as instructed through the ng-app directive. When the app is created, Angular will run through the DOM scope of that app and process any directives found. After that, Angular will just hang around waiting for events that might trigger model updates.
Directives are a central pillar of Angular. You can think of a directive as an instruction to the Angular framework. Directives are placed on html elements as attributes and thus decorate elements with new behaviour. In addition to the built-in directives, you can make your own if you need something special. This extensibility is understandably popular, and you can find a lot of custom directives out there.
ng-app: The ng-app directive tells Angular which part of the page forms the application. If the directive is placed on the root html element, the whole page is an Angular application. Optionally, a name for the application can be specified.
angular.module: angular.module(name, [requires], [configFn]); A global function to create an Angular module.
If called with only the first parameter, the function gets an already created module by name.
Directive: An Angular instruction placed on a html element as an attribute.
If you want to try it yourself in the browser, you can request the html file directly from the file system; there is no need to start an IIS Express server by pressing F5 in Visual Studio.
To advance from this Hello World-ish first try at an angular app, I think it's time to consider some project structure and then to experiment with some data binding. More on this in the next chapter.
Next : Forward from the first Hello World sample >
2016 by Niels Hede Pedersen
