The main parts of a very simple angularJS application are Module, Controller, scope and directives.They are described below along with a simple AngularJS application code.
Module :
The module is a container for the different parts of the application. The main module is declared using ng-app directive in the view (HTML file). This ng-app directive bootstraps the application using this module.
<html ng-app='mySimpleApp'>
var myApp = angular.module('mySimpleApp', []);
Controller:
<div ng-controller='MySimpleController'></div>
In the js file, it is defined as following.
app.controller('MySimpleController', MySimpleController);
function MySimpleController ($scope) {
$scope.message = "My Simple AngularJS app";
}
Scope:
Scope is the glue between the View and the ViewModel or the controller. Both the View and the ViewModel have reference to the scope, but not to each other. This enables the ViewModel to be independent of the HTML DOM and the directives.
In the js file, it is defined as following.
function MySimpleController ($scope) {
$scope.message = "My Simple AngularJS app";
}
In the HTML file, it is used as follows. The scope can be directly referenced by the HTML using the double curly braces {{ }} . It can also be referenced using the ng-model directive.
<div>
Message is:{{message}}
</div>
<div>
<input type="text" ng-model="message">
</div>
Download code here:
My First Simplest AngularJS application
View the output here:
My First Simplest AngularJS application output
Note: This is the most simplest definition of these components. It gets really complex as your application grows big.
Module :
The module is a container for the different parts of the application. The main module is declared using ng-app directive in the view (HTML file). This ng-app directive bootstraps the application using this module.
<html ng-app='mySimpleApp'>
var myApp = angular.module('mySimpleApp', []);
Controller:
Controllers are used to manage the flow of the data in the application.This is the ViewModel part of the MVVM architecture. It is declared in the view(HTML file) using ng-controller directive.
<div ng-controller='MySimpleController'></div>
In the js file, it is defined as following.
app.controller('MySimpleController', MySimpleController);
function MySimpleController ($scope) {
$scope.message = "My Simple AngularJS app";
}
Scope:
Scope is the glue between the View and the ViewModel or the controller. Both the View and the ViewModel have reference to the scope, but not to each other. This enables the ViewModel to be independent of the HTML DOM and the directives.
In the js file, it is defined as following.
function MySimpleController ($scope) {
$scope.message = "My Simple AngularJS app";
}
In the HTML file, it is used as follows. The scope can be directly referenced by the HTML using the double curly braces {{ }} . It can also be referenced using the ng-model directive.
<div>
Message is:{{message}}
</div>
<div>
<input type="text" ng-model="message">
</div>
Download code here:
My First Simplest AngularJS application
View the output here:
My First Simplest AngularJS application output
Note: This is the most simplest definition of these components. It gets really complex as your application grows big.
No comments:
Post a Comment