Let’s start our basic HTML site. We’ll bring in Bootstrap and Angular via a CDN to keep things simple. Here’s the very beginnings of ourindex.htmlfile:
Starting Angular 107
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>My First Angular Application!</title>
6
7 <!-- CSS -->
8 <!-- load bootstrap and our stylesheet -->
9 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/\
10 css/bootstrap.min.css">
11 <style>
12 body { padding-top:50px; }
13 </style>
14
15 <!-- JS -->
16 <!-- load angular and our custom application -->
17 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.mi\
This index.html file is barebones right now. We have loaded Bootstrap, adding a little CSS for spacing, and loaded Angular itself and our customapp.js. Nothing will happen if we view this in our browser yet since we haven’t applied our Angular app that we made to this view.
We talked about Angular directives earlier and this will be your first use of them. Angular provides directives to apply your application to your HTML. These are called ng-app and ng-controller. Let’s add the following to our<body>tag:
1 <!-- declare our angular application and angular controller -->
2 <body class="container" ng-app="firstApp" ng-controller="mainController as main">
We are using the controller as syntax and naming this controlleras main. We can now call variables and functions from our controller by prefixing with the wordmain.
Now we have our application applied to the body of our HTML. You can also place controllers to specific sections of your site so that you have a controller for let’s say a sidebar and a controller for the main content. This even further compartmentalizes your site, but for this example, we’ll just apply one controller to everything.
Let’s do the next easiest step and display the message variable we created earlier.
Add the following inside of your<body>tag:
1 <div class="jumbotron">
2
3 <!-- display the message -->
4 <h2>This is my message:</h2>
5 {{ main.message }}
6
7 </div>
Now we can see the message in our browser! Notice how we defined this variable on the main keyword. Angular uses the curly brackets ({{ }}) to display items to the view and will look for variables and functions that were defined in our controller.
Show Message Variable
You just displayed your first variable to your view! Now let’s handle the list of computers. This will use another Angular directive called ng-repeat. You’ll be using this a lot in your views since it acts as a foreach for showing off data.
Add the following below the message section:
Starting Angular 109
1 <!-- display the list using ng-repeat -->
2 <h2>This is my list:</h2>
3 <table class="table table-bordered">
4 <thead>
5 <tr>
6 <td>Name</td>
7 <td>Color</td>
8 <td>Nerd Level</td>
9 </tr>
10 </thead>
11 <tbody>
12 <tr ng-repeat="computer in main.computers">
13 <td>{{ computer.name }}</td>
14 <td>{{ computer.color }}</td>
15 <td>{{ computer.nerdness }}</td>
16 </tr>
17 </tbody>
18 </table>
Pretty neat right? Angular will know to loop over the computers and display each in its own table row.
Show List
We’ll do one more thing for this demo. This is the magic part where we get to see data-binding in action.
We’ll place an input field on this site and use yet another Angular directive (see the trend?) called ng-model to bind an input to a variable. This will immediately change the message. You’ll see the change happen right before your eyes! Let’s add the input box above the message section:
1 <!-- form to update the message variable using ng-model -->
2 <div class="form-group">
3 <label>Message</label>
4 <input type="text" class="form-control" ng-model="main.message">
5 </div>
Now view the site in your browser and start typing into the input box. The message variable immediately changes thanks to the magic of Angular and its directives.
Starting Angular 111
Show Data Binding
Here is aCodePen⁸³ so that you can see all of this in action quickly. The full code is also available in the code repository for this book.
Tip
$scope vs. this
In other Angular tutorials around the web, you may have seen$scopeas a way to bind information from the controller to the view. As of Angular 1.3, this method still exists, but it is encouraged to use controller as syntax.
⁸³http://codepen.io/sevilayha/full/DhLqk/
There are many benefits to this approach since it keeps our code cleaner and more organized. It is even easier to read in our views how our controllers are used.
Here are two quick comparisons of using $scope and not using $scope.
1 <!-- with $scope -->
2 <div ng-app="myApp" ng-controller="mainController">
3 <p>{{ myVariable }}</p>
4 </div>
5
6 <!-- without $scope - controller as -->
7 <div ng-app="myApp" ng-controller="mainController as main">
8 <p>{{ main.myVariable }}</p>
9 </div>
This has many benefits, especially when we start nesting controllers. It will be easier to see which variables and functions live within each controller.
This also has the benefit that it will force you to prepare for the new Angular 2.0 syntax, which is expected in about a year. The Angular team has already declared that$scopewill be killed off in favor of a syntax closer tocontroller as.
Don’t worry about Angular 2.0 though. If you build your Angular applications now using this syntax, migrating to the new version won’t be too painful.