This is a quick start guide to getting started with AngularJS. While AngularJS (released in 2012) is a legacy version of what is now just called Angular (released in 2016), AngularJS’s adoption was vast and it is still used in lots of corporate systems. If you are creating a new system, you should checkout the latest version of Angular instead. But if you’re planning to work on a legacy AngularJS system and want to come up to speed quickly, you’re in the right place! Also, if you’d prefer to learn from a video tutorial you can checkout the AngularJS Fundamentals Pluralsight course.
Bootstrapping our AngularJS App
To get started, you need to first import angular. You can do this in the <head> of your html from CDN like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
Here is a jsFiddle with it already imported so you can follow along with each of the steps below. Just remember to save your jsFiddle after each change to force it to re-render.
Next we need to mount AngularJS in our single-page-app. With AngularJS imported above we can just add an ng-app tag to any element in our index.html page of our single page app. This is typically done on the body element like this:
```
<body ng-app>
</body>
```
Go ahead and add the ng-app directive to the body element like shown here. We won’t get into directives in this post, but ng-app is a built-in AngularJS directive. Directives are essentially html attributes or elements that encapsulate additional functionality and/or UI elements.
Basic Markup
We can now start intermingling AngularJS expressions with our html. Let’s add this line to our document:
```<div>Hello {{1 + 1}} the World!</div>```
This is all html except for the bit inside the double braces. That is an AngularJS expression! Angular will evaluate that expression and output the result. This expression will result in the output of “Hello 2 the World!” inside the enclosing <div>. This works because our expression is inside the body element which has the ng-app directive, so AngularJS scans everything inside our <body ng-app> tag for expressions like this and evaluates them.
Model Binding with ng-model
AngularJS uses two-way model-binding to bind html elements to data-elements behind the scenes. Imagine we have a user object. We can bind an input element to the firstName property of that user object like this:
```<input type="text" ng-model="user.firstName" />```
That ng-model directive magically handles all of our data binding for us. So when the user types anything in that input element, it will get updated on the user object. Now that we have that bound, let's change our Hello world div to use this bound value:
<div>Hello {{user.firstName}}</div>
Now try typing in that input field and see what happens. Sweet! As we type in that input field, the model is updated and our {{user.firstName}} expression gets re-evaluated to reflect the new value. This is two-way data-binding at work!
Initializing Our Data Models with ng-init
We'll see a better way to do this below when we talk about controllers, but you can initialize your data models using the built-in ng-init directive. To demonstrate, this let's initialize our data model with an array of users that we'll use here shortly. We can do that on our body tag like this:
```
<body
ng-app
ng-init="users = [{firstName: 'Jane', lastName: 'Doe', age:29}, {firstName: 'John', lastName: 'Doe', age: 32}]">
```
Everything inside the quotes on that ng-init line is just simple javascript. We're just creating a users array and populating the array with two user objects (Jane and John). This array is then being added to our model. So we now have an array of users we can access on our page.
Binding to Arrays with ng-repeat
It is very common in a web application to want to loop over an array of objects and display something for each object in the array. We can do this using the ng-repeat directive like this:
```
<div ng-repeat="user in users">
</div>
```
Now, that div will get repeated for every item in the array. In other words, a new div will be added to our resulting html document for each user in the array. We can demonstrate that by adding some content to that div like this:
```
<div>{{user.firstName}} {{user.lastName}} - Age: {{user.age}}</div>
```
Using Filters
Filtering data with AngularJS is easy. Try updating that ng-repeat clause so that it now looks like this:
```<div ng-repeat="user in users | filter:'Jane' ">```
The pipe ( | ) symbol tells Angular we want to apply a filter and then the filter expression that follows is saying, filter the users array for any users that have the word Jane in any properties on the user objects in that array. If you save that you can see that the output now only outputs the Jane user! Pretty cool. Amazing how easy all of this is.
You can get more specific with your filters too by limiting your filter to just a specific field on the objects contained in the array like this:
```<div ng-repeat="user in users | filter:{firstName: 'Jane'}">```
Now it will only return objects where the firstName is Jane.
Filters are actually kind of a funny name when you consider that you can also use filters for formatting. For example there is a built-in currency filter that you can apply to numeric fields to format them as currency. For example, an expression like this would format a salary field: `{{ salary | currency }}`.
Handling Events
Angular has built-in directives to allow you to respond to events. For example, the ng-click event allows us to execute code when an element is clicked, such as clicking on a button. To demonstrate, let's create a button that will change the last name of the first user in our users array. We can do that like this:
```<button ng-click="users[0].lastName = 'Smith'">Change Name</button>```
Notice that when you click that button Jill's last name changes in the data being displayed by our ng-repeat. Pretty cool! There are lots of of built-in events in addition to ng-click including events like ng-change, ng-blur, ng-mouseover, etc.
Using AngularJS Controllers
Everything we've demonstrated so far is really great for simple tasks, but we don't really want to do everything right in our html application as our app gets more complicated. You should limit how much JavaScript you put in your expressions in your html templates. As things get more complex, you inevitably want a place to put large amounts of JavaScript. This is where controllers come in. A controller is basically a separate javascript file that controls, or handles, all of the javascript for a section of your application or html template. AngularJS Controllers are added to AngularJS modules, so before we can add a controller, we need to add a module. To add our module and controller, we'll use the javascript section of the jsFiddle (likely the lower-left panel in your jsFiddle window). This will simulate creating a separate JavaScript file. In a normal application you'd probably create a .js file and import it with a script tag.
So to create our module, add this to the JavaScript pane in the jsFiddle:
```var myModule = angular.module('myModule', []);```
Ok, we now have an AngularJS module named myModule. We can now add a controller like this (also add this in the JavaScript pane below the line above):
```
myModule.controller('myController', function($scope) {
});
```
Ok, we now have a controller named my Controller. Now it's time to start moving some of our JavaScript into this controller. Let's start with our users array. If you remember we added that users array using the ng-init attribute in our body element, so first delete that attribute, and then instead we'll add the array inside our controller like this:
```
myModule.controller('myController', function($scope) {
$scope.users =
[
{firstName: 'Jane', lastName: 'Doe', age:29},
{firstName: 'John', lastName: 'Doe', age: 32}
];
});
```
The first interesting thing you may have noticed here is that `$scope` variable. The $scope is an important concept in an AngularJS application. It is basically the data scope for a section of your application, in this case, it's the scope for this controller. When we were using ng-init to add our user array previously, it was basically adding it to the scope contained by our body element.
Now, that we're using a controller, we're adding the users array to the controller's scope. But right now this controller isn't being used, so this scope isn't accessible. For that matter, our module isn't being used either so let's add them both to our template on the body tag like this:
```<body ng-app="myModule" ng-controller="myController">```
These don't have to be added to the body element, they could be added to any element on the page. Putting them here on the body tag now gives our entire page access to the controller.
And now that you've deleted the ng-init and added the controller, you can see our page is working again, only now it's getting the user data from our new controller.
Handling Events With a Controller
Now that we've added a controller and we're getting data from it, we can also move our event javascript into functions on our controller. Let's do that with our Change Name button. First we'll create a function on our new controller to change the first user's last name. We can do that like this:
```
$scope.changeFirstUsersLastName = function(newLastName) {
$scope.users[0].lastName = newLastName
};
```
We've now added a function to our scope which makes it accessible to our template. So now we'll change our button's ng-click event to call our new function like this:
```<button ng-click="changeFirstUsersLastName('Smith')">Change Name</button>```
Cool, now we've moved our JavaScript logic into our controller where it belongs and clicking that button should successfully change the first user's last name again.
This is now starting to resemble a typical AngularJS application. This is the general structure. You have a template that is tied to a controller and the controller supplies data and functions to the template via the scope.
Hopefully this tutorial has helped you to understand the basic structure of an Angular application. There's a lot more to AngularJS applications, though, including some core concepts like creating custom AngularJS directives and creating and using custom AngularJS services. For a deeper dive into these and other concepts be sure to check out Pluralsight's AngularJS Fundamentals course.
5 keys to successful organizational design
How do you create an organization that is nimble, flexible and takes a fresh view of team structure? These are the keys to creating and maintaining a successful business that will last the test of time.
Read moreWhy your best tech talent quits
Your best developers and IT pros receive recruiting offers in their InMail and inboxes daily. Because the competition for the top tech talent is so fierce, how do you keep your best employees in house?
Read moreTechnology in 2025: Prepare your workforce
The key to surviving this new industrial revolution is leading it. That requires two key elements of agile businesses: awareness of disruptive technology and a plan to develop talent that can make the most of it.
Read more