Getting Started with AngularJS

Getting Started with AngularJS

September 17, 2015

I plan on doing a few posts on the basics of AngularJS which will cover routes, directives, controllers and probably/hopefully a few other interesting things. Let's consider this Part 1 of many. In this post, I'll be going over the basic setup of Angular and if this is your first time using it, you may feel like your discovering electricity for the first time.

Plug it in

I’m not going to waste any more time here. First things first, let’s add the Angular script to the bottom of an html file.

<!DOCTYPE html>
<html lang="en"> 
<head>
<title>Brewitivity</title>
</head>
<body>
<!--AngularJS-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
</body>
</html>

I’ll load it from the CDN to get started quickly, but you can also just go download the file from the Angular site and add it directly to your project’s ‘js’ or ‘js/libs’ folder. This is the core Angular framework.

Turn on the power

Next let’s turn the power on and tell Angular that we are creating our app by adding the ng-app attribute to the html tag.

Right now we’ll leave the ng-app attribute generic. We’ll come back to this in the next post.

<!DOCTYPE html>
<!--add the 'ng-app' attribute to turn on angular -->
<html lang="en" ng-app> 
<head>
<title>Brewitivity</title>
</head>
...

Make sure we have juice

Just to make sure all the wires are connected properly we’ll go through a quick test. Note that I’m being completely unoriginal here and doing the same test that’s done in EVERY single Hello World Angular example. But its also a good quick way to make sure everything is working. This should go inside your body tag and above any scripts.

<input type="text" ng-model="something"/>
<h1>{{something}}</h1>

There’s two new things here:

Anything inside of the double curly braces will get evaluated. So you can put in basic javascript like a string, math (i.e. 2 +2), or in our case a property.

ng-model on the other hand is considered an Angular directive, which we’ll learn more about in later posts. The Angular documentation describes it as…

More on scope in future posts, but we want to think of ngModel as as a way to have input and form fields binded to other html elements through the curly brace syntax. As long as the value of ngModel is the same as what’s inside the curly braces then whatever we type in to the input field should show immediately in the h1 tag below it.


Conclusion

We know that Angular is hooked up properly because our simple example works and we see the power of Angular’s data binding. Next up, we’ll set up our routes.

Mastering CSS: Book by Rich Finelli
Mastering CSS, the Book! Flexbox, Layout, Animations, Responsive, Retina, and more!
Mastering CSS, 2nd Edition, video course by Rich Finelli
Mastering CSS, Second Edition: 47 videos on how to make websites like a boss! Flexbox, Animations, Responsive, Retina, and more!
Back to top