AngularJS is a JavaScript framework (library) based on a very popular software architecture called the MVC or Model-View-Control. Developed by Google engineers in the year 2009, the framework slowly gained popularity and today it is one of most widely used JavaScript frameworks. You can measure its success by the fact that not only large, but it is also adopted and applied in medium and small web applications around the world.
Now an obvious question comes to my mind, is why would I use this framework? The MVC architecture, which I mentioned above, is critical for understanding the reason why you should use it in your application.
First AngularJS Application:
Let's create a simple AngularJS web application step by step and understand the basic building blocks of AngularJS.
1. First, create an HTML document with <head> and <body> elements, as show below.
Example: HTML Template
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
2. Include angular.js file in the head section (you have learned how to download angular library in the previous section). You can take a reference from the CDN also. (all the examples in this tutorials will use CDN reference.)
Example: Include AngularJS Library
<!DOCTYPE html>
<html>
<head>
<title>First AngularJS Application</title>
<script src= "~/Scripts/angular.js"></script>
</head>
<body>
</body>
</html>
3. Here, we will be creating a simple multiplier application which will multiply two numbers and display the result. User will enter two numbers in two separate textboxes and the result will be displayed immediately, as shown below.
The following is the HTML code with AngularJS for the above multiplier example.
Example: First AngularJS Application
<!DOCTYPE html>
<html>
<head>
<title>First AngularJS Application</title>
<script src= "~/Scripts/angular.js"></script>
</head>
<body ng-app >
<h1>First AngularJS Application</h1>
Enter Numbers to Multiply:
<input type="text" ng-model="Num1" /> x <input type="text" ng-model="Num2" />
= <span>{{Num1 * Num2}}</span>
</body>
</html>
The above example is looks like HTML code with some strange attributes and braces such as ng-app, ng-model, and {{ }}. These built-in attributes in AngularJS are called directives.
The following figure illustrates the AngularJS building blocks in the above example.
Template:
In AngularJS, a template is HTML with additional markups. AngularJS compiles templates and renders the resultant HTML.
Directive:
Directives are markers (attributes) on a DOM element that tell AngularJS to attach a specific behavior to that DOM element or even transform the DOM element and its children.
Most of the directives in AngularJS are starting with ng. It stands for Angular. We have applied ng-app and ng-model directive in the above example.
ng-app: The ng-app directive is a starting point. If AngularJS framework finds ng-app directive anywhere in the HTML document then it bootstraps (initializes) itself and compiles the HTML template.
ng-model: The ng-model directive binds HTML element to a property on the $scope object. You will learn about this model later but for now let us consider this as a model property.
In the above example, we have included ng-model directive to both the textboxes with different names Num1 and Num2. AngularJS framework will create two properties called Num1 and Num2 in the scope and will assign a value that we type into textboxes.
Expression:
An expression is like JavaScript code which is usually wrapped inside double curly braces such as {{ expression }}. AngularJS framework evaluates the expression and produces a result. In the above example, {{ Num1 * Num2}} will simply display the product of Num1 and Num2.
The following table lists all the important concepts in AngularJS.
| Concept | Description |
|---|---|
| Template | HTML with additional markup |
| Directives | Extends the HTML with custom attributes and elements |
| Model | The data shown to the user in the view and with which the user interacts |
| Scope | A context where the model is stored so that controllers, directives and expressions can access it |
| Expressions | Executes JavaScript code inside brackets {{ }}. |
| Compiler | Parses the template and instantiates directives and expressions |
| Filter | Formats the value of an expression for display to the user |
| View | what the user sees (the DOM) |
| Data Binding | Sync data between the model and the view |
| Controller | Maintains the application data and business logic |
| Module | a container for different parts of an app including controllers, services, filters, directives which configure the Injector |
| Service | Reusable business logic, independent of views |
| Dependency Injection | Creates and wires objects and functions |
| Injector | Dependency injection container |
Learn about the ng-app directive in the next section.
No comments:
Post a Comment