The goal of this exercise is just to get some Angular running in a browser.
Activating the compiler
Angular is driven by the template. This is different from other MVC frameworks where the template is driven by the app.
We use the ng-app attribute (directive) to tell Angular to begin compiling our DOM. We can attach this attribute to any DOM node, typically the html or body tags:
<body ng-app> Hello! </body>
All the HTML5 within this directive is an Angular template and will be compiled as such.
Exercise 1 - Hello Universe
Let’s start with the simplest thing possible. Hello World.
- Download Angular latest uncompressed from here: https://angularjs.org/
- Concatenate the strings “Hello” and “World” to make a hello world app.
- Create an Angular template which tells you how many seconds there are in a day, a year, a century.
- Find out how many weeks there are in a human lifetime.
Exercise 2 - Visual Studio Setup (if you are using VS)
Visual Studio 2015 has excellent support for Angular. MS TypeScript is the language of Angular 2, and VS 2015 has Gulp and Node built right into it.
You may however have to adjust your thinking just a little bit, and you will have rather more hoops to jump through.
Creating the Project
- First create a new project.
- From Templates, create an ASP.Net Web Application.
- Choose Empty to create a completely empty application. We won’t be using any of the features of .Net in our front end application.
Create the HTML file
- Right click your new application, add new item, and create an html file. Call it index.html. This is our template.
- Insert a little bit of text inside it.
- Now right click the file and open in browser. See the text?
- Alt tab back to Visual Studio and make a change to the text.
- Now alt tab back to your web browser. Press refresh. See the change you made?
We can use NuGet to install Angular.
- Right click the project in the solution explorer and choose manage NuGet packages.
- Choose Angular Core from the list. It will be installed into your Scripts folder. Have a look there now.
Now we need to link Angular. Because this is the front end we do this with a script tag right in the html.
Now Attempt the Hello Universe exercise.
Optional Extension - if you are first to finish
You’ve downloaded Angular. Open it in your editor and have a quick browse through the Angular codebase. You’ll find it clean, and well commented and easy to scan.