A brief overview of AngularJS
AngularJS (https://angularjs.org/) is a super heroic JavaScript MVC framework, which is maintained by Google. It is open source and its main goal is to assist with creating single page applications. These are typically one-page web applications that only require HTML, CSS, and JavaScript on the client side.
While one may argue that there are already many frameworks out there in the market that help with this issue, I would like to say that AngularJS is different in a few ways. And in quite a few of these instances, it makes your life much easier as a frontend programmer.
Core concepts
There are many concepts related to AngularJS, but I will cover the most commonly used ones for the sake of progressing through this chapter. As we go along in this book, I'll touch on other concepts, such as the use of self-defined directives and performing RESTful requests via AngularJS. The main concepts that you should understand in this section are directives, controllers, and data binding.
Controllers
If you have already used JavaScript frameworks, such as BackBone.js, Can.js, Ember.js, or KnockOut.js, you should be familiar with this concept. Controllers are the behavior behind the DOM elements. AngularJS lets you express the behavior in a clean readable form without the usual boilerplate of updating the DOM, registering callbacks, or watching model changes.
Data-binding
Data-binding is an automatic way to update the view whenever the model changes, as well as updating the model whenever the view changes. The coolest aspect of this concept is that it is a two way data-binding process. Used in tandem with controllers, this can save you a lot of code, as there is no need for you to write the usual updating of the DOM elements.
Directives
Directives are another awesome concept in AngularJS. What they do is teach your application new HTML syntax and new things specific to your application. Directives can be self-defined and predefined. Some of the more notable predefined directives include:
ng-app: This declares an element as a root element of the application, allowing its behavior to be modified through custom HTML tags.ng-bind: This automatically changes the text of an HTML element to the value of a given expression.ng-model: This is similar tong-bind, but allows two-way binding between the view and scope.ng-controller: This specifies a JavaScript controller class, which evaluates HTML expressions. In layman's terms, whatng-controllerdoes is that it applies a JavaScript function to this block of HTML so that this particular JavaScript function (including its accompanying logic, expressions, and more) can only operate in this block of HTML.ng-repeat: You can see this as a loop through a collection.
A conceptual example
Now, let's take a look at how some of the previous concepts play together. Consider the following piece of code:
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
</head>
<body>
<div>
<label>Say Hello World</label>
<input type="text" ng-model="yourHelloWorld" placeholder="Type anything here.">
<hr>
<h1>Hello {{yourHelloWorld}}!</h1>
</div>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Let's go through the code.
- We defined an HTML5 HTML document in this case, as seen in the first line
- Next, notice
ng-appin the second line of the code; this is an AngularJS directive, which tells AngularJS that this is the root of the AngularJS application - In order to use AngularJS, we obviously have to install the script on this web page, as shown in the
<script>tag - Within the body tag, we see a
label, aninput, and anh1tag. - Take note of the
inputtag, there is ang-modeldirective, which is mapped toh1 tag's {{yourHelloWorld}} - What the previous piece of code does is that anything that is typed into the input box, will be shown in place of
{{yourHelloWorld}}
Take note of the version of the code we are using in this chapter, version 1.2.12; should you be using newer versions of AngularJS, there is no guarantee that the code will work.
Now that we have briefly walked through the code, let us copy the code and run it on our web browser. Feel free to copy the code and save it as concepts.html. The source code for this chapter can be found in the concepts.html file in the Chapter 1 folder.
Copied the code? If so, open the file in your favorite web browser. You should see the following screenshot in your browser:
A sample concept web page
Got the previous code? Ok great! So now you can try typing into the input box and see new text being appended to Hello and before ! in the screen.
For instance, when we type world, we will see the new characters being appended to the screen as I continue to type. By the end of typing the word "World", we should see the following screenshot:
After typing World
Now that we have a brief idea as to how a simple AngularJS app works, let us move to a more complicated app.
