{"id":50,"date":"2018-08-27T00:56:00","date_gmt":"2018-08-27T00:56:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/2018\/08\/27\/angularjs-tutorial-for-beginners-3-your-first-angularjs-application-interesting\/"},"modified":"2020-07-25T10:58:09","modified_gmt":"2020-07-25T08:58:09","slug":"angularjs-tutorial-for-beginners-3-your-first-angularjs-application-interesting","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/angularjs-tutorial-for-beginners-3-your-first-angularjs-application-interesting\/","title":{"rendered":"AngularJS Tutorial for Beginners 3 &#8211; Your First AngularJS Application (Interesting!)"},"content":{"rendered":"<p>Just as you know by now, this series of tutorials based on the PWD (practice-while-learning) approach.<br \/>\nSo in this tutorial we would create simple application using AngularJS and then discuss various part of the application. This follows from <a href=\"https:\/\/kindsonthegenius.com\/blog\/angularjs-tutorial-for-beginners-2-how-to-set-up-angularjs\/\" target=\"_blank\" rel=\"noopener\">Tutorial 2<\/a>.<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p>The application will contain a form with the following inputs:<\/p>\n<ul>\n<li>Two textboxes<\/li>\n<li>A submit button<\/li>\n<li>An area to display result<\/li>\n<\/ul>\n<p>In the second part, the user will enter his firstname and lastname, then when the button is clicked, you will display a greeting like:<br \/>\nHello &lt;firstname&gt; &lt;lastname&gt;<\/p>\n<p><b>Step 1<\/b>: Open the Folder you created in Tutorial 2, which contains the two files: angular.min.js and Lesson 2 .html<\/p>\n<p><b>Step 2<\/b>: Open notepad and paste the following code or you can decide to type it out by yourself.<\/p>\n<p>&nbsp;<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">var<\/span> FirstApp <span style=\"color: #333333;\">=<\/span> angular.module(<span style=\"background-color: #fff0f0;\">'FirstApp'<\/span>, []);\r\n\r\nFirstApp.controller(<span style=\"background-color: #fff0f0;\">'MyController'<\/span>, <span style=\"color: #008800; font-weight: bold;\">function<\/span>($scope){\r\n\r\n $scope.Greet <span style=\"color: #333333;\">=<\/span> <span style=\"color: #008800; font-weight: bold;\">function<\/span>()\r\n {\r\n  <span style=\"color: #008800; font-weight: bold;\">var<\/span> firstname <span style=\"color: #333333;\">=<\/span> $scope.fname; \r\n  \r\n  <span style=\"color: #008800; font-weight: bold;\">var<\/span> lastname <span style=\"color: #333333;\">=<\/span> $scope.lname;\r\n  \r\n  $scope.greeting <span style=\"color: #333333;\">=<\/span> <span style=\"background-color: #fff0f0;\">\"Hello, \"<\/span> <span style=\"color: #333333;\">+<\/span> firstname <span style=\"color: #333333;\">+<\/span> <span style=\"background-color: #fff0f0;\">\" \"<\/span> <span style=\"color: #333333;\">+<\/span> lastname;\r\n\r\n };\r\n\r\n});\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><b>Step 3:<\/b> Save it as Scripts.js in the same folder<\/p>\n<p><b>Step 4:<\/b> Open the html file you created and modify it with the following code<\/p>\n<p>&nbsp;<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #557799;\">&lt;!doctype html&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;html<\/span> <span style=\"color: #0000cc;\">ng-app=<\/span><span style=\"background-color: #fff0f0;\">\"FirstApp\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n  <span style=\"color: #007700;\">&lt;head&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;title&gt;<\/span>KTG AngularJS Tutorial<span style=\"color: #007700;\">&lt;\/title&gt;<\/span>\r\n    <span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"angular.min.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\r\n <span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">src=<\/span><span style=\"background-color: #fff0f0;\">\"Script.js\"<\/span><span style=\"color: #007700;\">&gt;&lt;\/script&gt;<\/span>\r\n  <span style=\"color: #007700;\">&lt;\/head&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;body<\/span> <span style=\"color: #0000cc;\">ng-controller=<\/span><span style=\"background-color: #fff0f0;\">\"MyController\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n\r\nEnter Firstname: <span style=\"color: #007700;\">&lt;input<\/span> <span style=\"color: #0000cc;\">ng-model=<\/span><span style=\"background-color: #fff0f0;\">\"fname\"<\/span> <span style=\"color: #0000cc;\">type=<\/span><span style=\"background-color: #fff0f0;\">\"\"<\/span> <span style=\"color: #007700;\">\/&gt;<\/span> <span style=\"color: #007700;\">&lt;br<\/span> <span style=\"color: #007700;\">\/&gt;<\/span> <span style=\"color: #007700;\">&lt;br<\/span> <span style=\"color: #007700;\">\/&gt;<\/span>\r\n\r\nEnter Lastname: <span style=\"color: #007700;\">&lt;input<\/span> <span style=\"color: #0000cc;\">ng-model=<\/span><span style=\"background-color: #fff0f0;\">\"lname\"<\/span> <span style=\"color: #0000cc;\">type =<\/span><span style=\"background-color: #fff0f0;\">\"\"<\/span> <span style=\"color: #007700;\">\/&gt;<\/span> <span style=\"color: #007700;\">&lt;br<\/span> <span style=\"color: #007700;\">\/&gt;<\/span>\r\n\r\n<span style=\"color: #007700;\">&lt;button<\/span> <span style=\"color: #0000cc;\">ng-click=<\/span><span style=\"background-color: #fff0f0;\">\"Greet()\"<\/span><span style=\"color: #007700;\">&gt;<\/span> Click<span style=\"color: #007700;\">&lt;\/button&gt;<\/span>\r\n\r\n<span style=\"color: #007700;\">&lt;br<\/span> <span style=\"color: #007700;\">\/&gt;<\/span> <span style=\"color: #007700;\">&lt;br<\/span> <span style=\"color: #007700;\">\/&gt;<\/span>\r\n{{greeting}}\r\n\r\n<span style=\"color: #007700;\">&lt;\/body&gt;<\/span>\r\n<span style=\"color: #007700;\">&lt;\/html&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>(Don&#8217;t worry, I will explain every bit of these codes. Just make sure you follow the procedure yourself!)<\/p>\n<p><b>Step 5:<\/b> Go ahead to save everything and open the html File. It would display as shown in the figure below:<\/p>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"margin-left: 1em; margin-right: 1em;\" href=\"https:\/\/4.bp.blogspot.com\/-84FIVgsjlEI\/W4NJVH5bjdI\/AAAAAAAACGg\/zl5CYvIyAcwxqSFAwy61oajemeUCR6-VwCLcBGAs\/s1600\/Tutorial%2B3%2BHTML%2BPage.JPG\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter\" src=\"https:\/\/4.bp.blogspot.com\/-84FIVgsjlEI\/W4NJVH5bjdI\/AAAAAAAACGg\/zl5CYvIyAcwxqSFAwy61oajemeUCR6-VwCLcBGAs\/s400\/Tutorial%2B3%2BHTML%2BPage.JPG\" alt=\"\" width=\"462\" height=\"254\" border=\"0\" data-original-height=\"577\" data-original-width=\"1050\" \/><\/a><\/div>\n<p>&nbsp;<\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p><b>Step 6:<\/b> Test the program. Enter your firstname into the Firstname box and your lastname into the lastname box. Then Click on the button.<\/p>\n<p>If you did everything correctly, then it would display a greeting with your firstname and lastname.<br \/>\nIf you have any issues, leave a comment in the comment box below.<\/p>\n<p>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&#8217;s move on to Tutorial 4.<\/p>\n<p>Also remember to watch the video lessons and download the powerpoint presentation.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 &hellip; <\/p>\n","protected":false},"author":1,"featured_media":492,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[113],"tags":[537],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/50"}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":1020,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/50\/revisions\/1020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media\/492"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}