by Just as you know by now, this series of tutorials based on the PWD (practice-while-learning) approach.
So in this tutorial we would create simple application using AngularJS and then discuss various part of the application. This follows from Tutorial 2.
The application will contain a form with the following inputs:
- Two textboxes
- A submit button
- An area to display result
In the second part, the user will enter his firstname and lastname, then when the button is clicked, you will display a greeting like:
Hello <firstname> <lastname>
Step 1: Open the Folder you created in Tutorial 2, which contains the two files: angular.min.js and Lesson 2 .html
Step 2: Open notepad and paste the following code or you can decide to type it out by yourself.
var FirstApp = angular.module('FirstApp', []); FirstApp.controller('MyController', function($scope){ $scope.Greet = function() { var firstname = $scope.fname; var lastname = $scope.lname; $scope.greeting = "Hello, " + firstname + " " + lastname; }; });
Step 3: Save it as Scripts.js in the same folder
Step 4: Open the html file you created and modify it with the following code
<!doctype html> <html ng-app="FirstApp"> <head> <title>KTG AngularJS Tutorial</title> <script src="angular.min.js"></script> <script src="Script.js"></script> </head> <body ng-controller="MyController"> Enter Firstname: <input ng-model="fname" type="" /> <br /> <br /> Enter Lastname: <input ng-model="lname" type ="" /> <br /> <button ng-click="Greet()"> Click</button> <br /> <br /> {{greeting}} </body> </html>
(Don’t worry, I will explain every bit of these codes. Just make sure you follow the procedure yourself!)
Step 5: Go ahead to save everything and open the html File. It would display as shown in the figure below:
Step 6: Test the program. Enter your firstname into the Firstname box and your lastname into the lastname box. Then Click on the button.
If you did everything correctly, then it would display a greeting with your firstname and lastname.
If you have any issues, leave a comment in the comment box below.
Now that you have completed this practical, we are not ready to discuss the parts of the lines of code we used in this tutorial. Let’s move on to Tutorial 4.
Also remember to watch the video lessons and download the powerpoint presentation.
[…] Now you can continue to Tutorial 3 – Write your First Script in AngularJS […]
[…] AngularJS Tutorial For Beginners 2: How to Set up AngularJS – The Genius Blog on AngularJS Tutorial for Beginners 3 – Your First AngularJS Application (Interesting!) […]
Hi. I have checked your kindsonthegenius.com and i see you’ve got some duplicate content so probably it is the reason that you don’t rank
high in google. But you can fix this issue fast. There is a
tool that creates articles like human, just search in google:
miftolo’s tools
[…] To create a module, use the AngularJS syntax below and specify the name of the module just like we did in Tutorial 2 and Tutorial 3. […]