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.
👉 AngularJS features that every Beginner must know 
Using the MVC architecture, the framework separates a web application into a simple and yet manageable structure, which comprises of “views”, “models” and “controllers”.
The framework provides in-build directives (or attributes) to extend the HTML inside a web page. When we attach these directives to the HTML elements and attributes, it creates a dynamic web page with very little coding.
It would very difficult for a beginner to understand this without an example. Therefore, let us create our first application using AngularJS framework.
Hello World with AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-app="HelloWorldApp" ng-controller="HelloWorldController">
<h1> Hello {{who}} </h1>
</div>
<script>
var HWApp = angular.module('HelloWorldApp', []);
HWApp.controller('HelloWorldController',
['$scope', function ($greet) {
$greet.who = 'World!';
}]
);
</script>
</body>
</html>To begin with, we first need to add the JavaScript file inside the <head> tag of our application. The Google CDN URL (for faster loading) has the file that provides all the functions, directives etc. However, if you wish to work offline with AngularJS, then you can download the entire framework from here. In this example, I have used the framework version 1.3.8 released on December 19 2014.
View
The Angular directives and the HTML in a web page form the view. In our example, the view comprises the DIV element, the <h1> header tag with an expression {{who}} and two directives namely ng-app and ng-controller.
Expression
Inside the <h1> tag, did you notice the curly braces with a text who.
{{who}}
It is an expression. Angular expressions are different from JavaScript expressions. You cannot use an Angular Expression for setting conditions (if...else) or run loops. Instead, an Angular expression will receive values from the model ($scope) and display the result exactly where it is located.
Note: In case of an error the expression will display as it is, that is, the text with the four curly braces.
Directive “ng-app”
The ng-app directive tells Angular which part is associated with an Angular application. Usually, we define ng-app inside a root element in an HTML file, that is, <html> or the <body> tag. If I define this directive inside the <html> or <body> tag, then the entire page is an Angular application.
Instead, I have added the ng-app to the DIV element.
<div ng-app="HelloWorldApp">
Why is that so? This technique will allow me to define multiple apps in the same page using multiple ng-app directives. In addition, it leaves me with an option of defining a separate section, which may not be an AngularJS app.
For example,
<div ng-app="mySecondApp">
The Second Angular app
</div>
<div>
This section is separate from Angular app
</div>Directive ng-controller
The ng-controller directive allows us to bind a unique controller to a view. The ng-controller directive, which I have attached to the DIV element, tells Angular that HelloWorldController will receive the values from a model object and return it to the view.
ng-controller="HelloWorldController"
Controller in AngularJS
The controller works as a mediator between views and models. It controls the business logic in your application, by connecting a view to a JavaScript object called the $scope (model). You need to add the controller inside the <script> tag in our application.
👉 How to inject AngularJS date Filter in Controller using JavaScript 
However, before adding the controller, we will first initialize and register our application by creating a new Angular Module.
var HWApp = angular.module('HelloWorldApp', []);
The idea behind creating a module is to create a well-defined structure, which will keep everything organized, at one place.
Once our module is declared, it is time to create the controller using the controller() method, a constructor, and add it to the module.
HWApp.controller( 'HelloWorldController', ['$scope', function ($greet) { $greet.who = 'World!'; } ] );
Multiple Model, View and Controller
This is getting interesting now. A single module can have multiple controllers and views nested inside a single app. I will extend the above example and add another DIV element inside the first DIV.
<div ng-app="HelloWorldApp" ng-controller="HelloWorldController"> <h1>Hello {{who}} </h1> <!--NESTED VIEW AND CONTROLLER--> <div ng-controller="whoAmI"> <span style="font:15px Verdana;">I am {{firstname}} {{lastname}}!</span> </div> </div>
I now have another view, using ng-controller directive with a value whoAmI. With a single module HWApp, I can now create multiple controllers.
var HWApp = angular.module('HelloWorldApp', []);
HWApp.controller(
'HelloWorldController',
['$scope', function ($greet) {
$greet.who = 'World!';
} ]
);
HWApp.controller(
'whoAmI',
['$scope', function ($greet1) {
$greet1.firstname = 'Arun';
$greet1.lastname = 'Banik';
} ]
);Output
Model
The model is where your actual data are. The data can either be a static value (the “World!” in our first example), or dynamically fetched from a server side data source using JSON, and later deliver the data to the view.
The $scope is an object in the model, which is linked with the controllers. The $greet variable, passed as a parameter to the controller, assigns the value to the property (see expression above).
I just created a simple application using AngularJS framework. Being a beginner myself with Angular, I wanted to share little things that I have come across while working with this framework.
This article covers the basics of AngularJS, such as directives, controllers, modules, $scope object, the MVC architecture etc. It was an interesting experience, and if you are a beginner like me, then I am sure you must have load of queries in your mind now. Please, do not hesitate to ask. Just leave a message below.