Although it is easy to start developing SPAs with AngularJS, but over time and as your application grows, there will be tasks that are more difficult to solve. So, it is very important to understand all the concepts very well. Unlike other JavaScript frameworks, AngularJS adopts a more connected approach to the HTML syntax, functioning as a kind of language extension.
We consider these topics as core concepts for a good understanding of the AngularJS framework: directives, scope, services, controllers, dependency injection, and expressions. Even this seems a lot, but it is not if we take into account the complexity of the framework. However, as this book is not an absolute guide to AngularJS, we will only discuss here a few concepts that are considered as fundamentals to build SPAs. Once the concepts are understood, you will have the necessary basics to move forward with the framework.
Throughout this chapter, we will be focusing on the following concepts:
- Starting the baseline application
- The AngularJS MVC pattern implementation
- Model
- View
- Controller
- Detailing directives, expressions, and scope
- Two-way data binding and templates
- Understanding dependency injection
- Services
- Modules
- Project organization
- Pattern implementation
As we said, AngularJS is a powerful tool to develop SPAs and can also be considered as an MVC or MVVM framework; its flexibility is so great that it suits our needs. Let's understand some concepts to help us to choose the better way.
As with any web application, we kick off with creating a basic page. Later, we will discuss all the components that appear in the following example, but this time, we focus on the basic initialization of an AngularJS application:
<html ng-app>
<head>
<title>Angular baseline</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>
<body>
<input type="text" ng-model="name">
<p>Hello: {{ name }}</p>
</body>
</html>By declaring the ng-app property on the html tag, we are initializing our application. It's the first of some new properties that we will use. The entire framework revolves around these new statements.
The ng-app property informs that our Document Object Model (DOM) and HTML document are also an AngularJS document. This property can be used in any element of the DOM. In many cases, only a single part of the HTML will be an AngularJS application, as shown in the following example:
<html>
<head>
<title>Angular baseline</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular.min.js"></script>
</head>
<body>
<div id="main">
<div class="container">
<div id="main-app" ng-app="myAngularApp">
<!--Application content will be rendered here-->
</div>
</div>
</div>
<script src="path_to_JavaScript_files"></script>
</body>
</html>Finally, the JavaScript files that are part of the project are added to the end of the HTML page like the previous example. In a real application, these files will be models, controllers, directives, and everything related to the application.