Hii,
AngularJS is used to make web apps in a simple way which can be easily maintained, In this blog i am going to share a simple example by which you will learn how to create an AngularJS Applications.
Before you go through an example,you must have a clear concept about the following:
1)In angularJs Modules is the one which contains different components of an AngularJS appilcation and it is called a container of an application data
2)In angularJS controllers are the one which is used to control AngularJS applications.
3)ng-app(defines the module name) and ng-controllers(defines the controller) are the two most important directives used when we create an angularJs application.
How to create an angularJs application?
1)Firstly we will create a new module named anything you want(like i will name it as "firstApp"), it will contain different components of an AngularJS app.
var app = angular.module("firstApp", []);
2)Now we will add ng-app="firstApp" in the outermost html tag(body tag,div tag etc), which is used to define that the 'firstApp' module will live within the outermost html element and it will define the application scope.
<body ng-app="firstApp">
...
content inside the ng-app
...
</body>
3)Once the module is created and ng-app is defined,we will create a new controller named anything you want(like i will name it as "firstController"), it will manage and control AngularJS applications.
app.controller('firstControllerr', ['$scope', function($scope) {
$scope.firstName= "John";
}]);
4)In this step we will add a class in a html tag and define a ng-controller directive which will define the controller scope by which firstController become available to use within <div class="mainBody">.
<div class="mainBody" ng-controller="firstController">.
5)Inside <div class="mainBody"> $scope.expression accessed using {{ expression }}. This is called an expression.
$scope.firstName
Example:
<p>Try to change the names.</p>
<div ng-app="firstApp" ng-controller="firstController">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
Full Name: {{firstName + " " + lastName}}
</div>
<h3>Note:app name n controller can be anything.</h3>
<script>
var app = angular.module('firstApp', []);
app.controller('firstController', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
</body>
Output:
Try to change the names.
First Name:
Last Name:
Full Name: John Doe
Note:app name n controller can be anything.
0 Comment(s)