Hello everyone,In this article we are going to see what is angular JS? How to start coding with Angular JS. So let’s begin with introduction to angularJS.
Angular JS is Javascript framework introduced by Google in 2012. It is an extension provided to HTML tags with ng- directives. We know that html is used for creating web Applications which are static applications. But to create dynamic applications we can use Angular JS.
One more important thing is Angular JS uses MVC Architecture to create applications.to know more about MVC architechure Click Here.
Prerequisites:
1. Web Browser
2. Server to run Web Application.
3. Text Editor- Sublime Text editor is recommended.
4. angular.min.js file to run Angular Applications. You can download it from here.
- So now let’s start with coding our first angularJS application.
Create index.html file as shown as below:
<html>
<head></head>
<body>Hello</body>
</html>
The code above shown is html code used to show text “Hello” .
Now we will see how to use angularJs to print text ”Hello”.
We will need to create script.js file which contains AngularJs Code as follow.
var myApp=angular.module("myModule",[]);
which is used to create a module.
A module is container of our application which is similar to main method. This will be starting point of our application. Now create a controller for our application as:
var myController=function($scope){
$scope.message="String msg";
}
Controller is used to for retrieving model and attached it to our html view. Model is nothing but the data to be retrieved from db and to be displayed in View. Here $scope is an object which defines scope of controller within the view.
With the scope variable we can attach a value to the property message as,
$scope.message="Hello";
Now next step is we have to register our controller myController with module as
myApp.controller=("myController",myController);
Up till now we have seen,
var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="String msg";
}
myApp.controller=("myController",myController);
Now modify index.html file to add created module and controller to our application
<html ng-app="myModule">
<head></head>
<html ng-app="myModule">
<head></head>
<body ng-controller="myController">
<p>{{message}</p>
</body>
</html>
Where ng-app is a directve used to bind model with our html view.Here myModule is a name of our module created in script.js file. Also ng-controller is directive used to associate our model with html view. So we can print data to be retrieved from data base with the help of property attached to scope variable.
To print Hello text we have to use our message property as {{message}} within body section of our ng-controller. The scope of message will be within opening and closing tags of ng-controller.
add script.js and angular.min.js file within head of our html to make our AngularJS application running.
So final code will be
index.html
<html ng-app="myModule">
<head>
//include angular files
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<p> {{message}}</p>
</body>
</html>
script.js
var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="Hello";
}
myApp.controller=("myController",myController);
So now you will see output as
Hello
This is how you can create your first Application.If you have any query you can write us at testyourcoding111@gmail.com
For more references, goto
https://angularjs.org/
http://www.w3schools.com/angular/
https://www.youtube.com/user/angularjs
Angular JS is Javascript framework introduced by Google in 2012. It is an extension provided to HTML tags with ng- directives. We know that html is used for creating web Applications which are static applications. But to create dynamic applications we can use Angular JS.
One more important thing is Angular JS uses MVC Architecture to create applications.to know more about MVC architechure Click Here.
Prerequisites:
1. Web Browser
2. Server to run Web Application.
3. Text Editor- Sublime Text editor is recommended.
4. angular.min.js file to run Angular Applications. You can download it from here.
- So now let’s start with coding our first angularJS application.
Create index.html file as shown as below:
<html>
<head></head>
<body>Hello</body>
</html>
The code above shown is html code used to show text “Hello” .
Now we will see how to use angularJs to print text ”Hello”.
We will need to create script.js file which contains AngularJs Code as follow.
var myApp=angular.module("myModule",[]);
which is used to create a module.
A module is container of our application which is similar to main method. This will be starting point of our application. Now create a controller for our application as:
var myController=function($scope){
$scope.message="String msg";
}
Controller is used to for retrieving model and attached it to our html view. Model is nothing but the data to be retrieved from db and to be displayed in View. Here $scope is an object which defines scope of controller within the view.
With the scope variable we can attach a value to the property message as,
$scope.message="Hello";
Now next step is we have to register our controller myController with module as
myApp.controller=("myController",myController);
Up till now we have seen,
var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="String msg";
}
myApp.controller=("myController",myController);
Now modify index.html file to add created module and controller to our application
<html ng-app="myModule">
<head></head>
<html ng-app="myModule">
<head></head>
<body ng-controller="myController">
<p>{{message}</p>
</body>
</html>
Where ng-app is a directve used to bind model with our html view.Here myModule is a name of our module created in script.js file. Also ng-controller is directive used to associate our model with html view. So we can print data to be retrieved from data base with the help of property attached to scope variable.
To print Hello text we have to use our message property as {{message}} within body section of our ng-controller. The scope of message will be within opening and closing tags of ng-controller.
add script.js and angular.min.js file within head of our html to make our AngularJS application running.
So final code will be
index.html
<html ng-app="myModule">
<head>
//include angular files
<script src="angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myController">
<p> {{message}}</p>
</body>
</html>
script.js
var myApp=angular.module("myModule",[]);
var myController=function($scope){
$scope.message="Hello";
}
myApp.controller=("myController",myController);
So now you will see output as
Hello
This is how you can create your first Application.If you have any query you can write us at testyourcoding111@gmail.com
For more references, goto
https://angularjs.org/
http://www.w3schools.com/angular/
https://www.youtube.com/user/angularjs
No comments:
Post a Comment