{"id":261,"date":"2016-03-18T20:58:00","date_gmt":"2016-03-18T20:58:00","guid":{"rendered":"http:\/\/www.java2blog.com\/?p=261"},"modified":"2023-11-25T16:16:39","modified_gmt":"2023-11-25T10:46:39","slug":"angularjs-controller-examples","status":"publish","type":"post","link":"https:\/\/java2blog.com\/angularjs-controller-examples\/","title":{"rendered":"Angularjs controller examples"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_light_blue no_bullets\"><p class=\"toc_title\">Table of Contents<\/p><ul class=\"toc_list\"><li><a href=\"#AngularJS_tutorial\">AngularJS tutorial:<\/a><ul><li><a href=\"#What_are_controllers\">What are controllers<\/a><\/li><li><a href=\"#What_is_scope\">What is $scope?<\/a><ul><li><a href=\"#How_controllers_and_scope_are_related\">How controllers and scope are related?<\/a><\/li><li><a href=\"#Declaration_of_controller_syntax\">Declaration of controller syntax :<\/a><\/li><\/ul><\/li><li><a href=\"#Simple_example\">Simple example:<\/a><ul><li><a href=\"#appjs\">app.js<\/a><\/li><li><a href=\"#Live_Demo\">Live Demo:<\/a><\/li><li><a href=\"#What_if_you_don8217t_want_to_use_scope\">What if you don&#8217;t want to use $scope?<\/a><\/li><li><a href=\"#Lets_take_an_example\">Lets take an example:<\/a><\/li><li><a href=\"#appjs-2\">app.js<\/a><\/li><li><a href=\"#Live_demo\">Live demo:<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n<div dir=\"ltr\" style=\"text-align: left;\">\n<div style=\"text-align: justify;\">In previous post, we have seen a very simple <a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-hello-world-example.html\" target=\"_blank\" rel=\"noopener\">angularjs hello world example<\/a>. In this post, we are going to see about controllers.<\/div>\n<div>\n<h2 style=\"text-align: left;\"><span id=\"AngularJS_tutorial\">AngularJS tutorial:<\/span><\/h2>\n<ul>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-hello-world-example.html\">AngularJs hello world example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-controller-examples.html\">AngularJs controller examples<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-ng-repeat-example.html\">AngularJs ng-repeat example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/04\/angularjs-built-in-filter-examples.html\">AngularJs Built-in filter example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/04\/angularjs-custom-filter-example.html\">AngularJs custom filter example<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-ajax-example-using-http.html\">AngularJs ajax example using $http<\/a><\/li>\n<li dir=\"ltr\" style=\"text-align: left;\"><a href=\"http:\/\/www.java2blog.com\/2016\/03\/angularjs-restful-web-service-example.html\">AngularJS RESTful web service JAXRS CRUD example using $http<\/a><\/li>\n<\/ul>\n<h3 style=\"text-align: left;\"><span id=\"What_are_controllers\">What are controllers<\/span><\/h3>\n<\/div>\n<div>You can consider controllers as main driver for model view changes. It is a main part of angular js application and It is javascript functions or objects which actually performs ui operation. It controls data of angularjs applications.<\/div>\n<div>\n<h3 style=\"text-align: left;\"><span id=\"What_is_scope\">What is $scope?<\/span><\/h3>\n<\/div>\n<div>Scope is an object which is glue between model and view. So if you want to pass data from model to view and view to model, it is done through scopes object.<\/div>\n<div>\n<h4 style=\"text-align: left;\"><span id=\"How_controllers_and_scope_are_related\">How controllers and scope are related?<\/span><\/h4>\n<\/div>\n<div>Actually controllers passes scope object as constructor parameter and initialise model values and functions. Please don&#8217;t worry if it sounds very confusing, once we see simple example, you will be able to relate.<\/div>\n<div style=\"clear: both; text-align: center;\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/java2blog.com\/wp-content\/uploads\/2021\/09\/angularjsController.png\" width=\"640\" height=\"388\" border=\"0\"><\/div>\n<div>\n<h4 style=\"text-align: left;\"><span id=\"Declaration_of_controller_syntax\"><b>Declaration of controller syntax :<\/b><\/span><\/h4>\n<\/div>\n<div>You need declare module before creating controller. We will learn about module in our next tutorial.<\/div>\n<div>So we use module&#8217;s controller method to declare controller.<\/div>\n<pre name=\"code\">var app = angular.module('myApp', []);\napp.controller('java2blogContoller', function($scope) {\n    $scope.java2blogMsg = \"Hello from java2blog\";\n\n});<\/pre>\n<div><\/div>\n<div>\n<h3 style=\"text-align: left;\"><span id=\"Simple_example\"><b>Simple example:<\/b><\/span><\/h3>\n<div style=\"text-align: justify;\">Copy below text , open notepad , paste it and save it as\u00a0<b>angularJSControllerExample.html\u00a0<\/b>and open it in the browser.<\/p>\n<\/div>\n<pre class=\"xml\" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"text-align: left;\">\n\n\n<meta charset=\"UTF-8\">\n<title>Angular js<\/title>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.0\/angular.min.js\"><\/script>\n<script src=\"app.js\"><\/script>\n\n\n\n<div ng-app=\"myApp\" ng-controller=\"java2blogContoller\">\n\n \n  {{java2blogMsg}}  !!!\n<\/div>\n\n<\/pre>\n<h4 style=\"text-align: left;\"><span id=\"appjs\"><b>app.js <\/b><\/span><\/h4>\n<pre name=\"code\">var app = angular.module('myApp', []);\napp.controller('java2blogContoller', function($scope) {\n    $scope.java2blogMsg = \"Hello from java2blog\";\n\n});<\/pre>\n<h4 style=\"text-align: left;\"><span id=\"Live_Demo\">Live Demo:<\/span><\/h4>\n<p><a href=\"http:\/\/jsbin.com\/pimosi\/4\/embed?html,js,output\" target=\"_blank\" rel=\"noopener\">Angular js controller example<\/a><\/div>\n<p><!-- adsense --><\/p>\n<h4 style=\"text-align: left;\"><span id=\"What_if_you_don8217t_want_to_use_scope\">What if you don&#8217;t want to use $scope?<\/span><\/h4>\n<div>Yes, you can use <b>controller as <\/b>option too if you do not want to use $scope variable.<\/div>\n<div>so you need to use<\/div>\n<div>Advantages of using controller as options are:<\/div>\n<div>\n<ul style=\"text-align: left;\">\n<li>Code becomes more readable.<\/li>\n<li>It removes dealing with <b>this<\/b> scope and bindings.<\/li>\n<li>There is no dependency on alias used in view(.html) and javascript<\/li>\n<\/ul>\n<\/div>\n<div>\n<h4 style=\"text-align: left;\"><span id=\"Lets_take_an_example\">Lets take an example:<\/span><\/h4>\n<\/div>\n<div>\n<div>\n<div style=\"text-align: justify;\">Copy below text , open notepad , paste it and save it as\u00a0<b>angularJSControllerExample.html\u00a0<\/b>and open it in the browser.<\/p>\n<\/div>\n<pre class=\"xml \" data-blogger-escaped-name=\"code\" data-blogger-escaped-style=\"text-align: left;\">\n\n\n<meta charset=\"UTF-8\">\n<title>Angular js<\/title>\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.5.0\/angular.min.js\"><\/script>\n<script src=\"app.js\"><\/script>\n\n\n\n<div ng-app=\"myApp\" ng-controller=\"java2blogContoller as con\">\n\n \n  {{con.java2blogMsg}}  !!!\n<\/div>\n\n<\/pre>\n<\/div>\n<h4 style=\"text-align: left;\"><span id=\"appjs-2\"><b>app.js<\/b><\/span><\/h4>\n<pre name=\"code\" style=\"text-align: left;\">var app = angular.module('myApp', []);\napp.controller('java2blogContoller', function() {\n    var cont= this;\n    cont.java2blogMsg = \"Hello from java2blog with controller as option\";\n\n});\n\n<\/pre>\n<h4 style=\"text-align: left;\"><span id=\"Live_demo\">Live demo:<\/span><\/h4>\n<p><a href=\"http:\/\/jsbin.com\/tudigo\/embed?html,js,output\" target=\"_blank\" rel=\"noopener\">Angular js controller as example<\/a><\/div>\n<div><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Table of ContentsAngularJS tutorial:What are controllersWhat is $scope?How controllers and scope are related?Declaration of controller syntax :Simple example:app.jsLive Demo:What if you don&#8217;t want to use $scope?Lets take an example:app.jsLive demo: In previous post, we have seen a very simple angularjs hello world example. In this post, we are going to see about controllers. AngularJS tutorial: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_mi_skip_tracking":false},"categories":[49],"tags":[],"_links":{"self":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/261"}],"collection":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/comments?post=261"}],"version-history":[{"count":1,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/261\/revisions"}],"predecessor-version":[{"id":25858,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/posts\/261\/revisions\/25858"}],"wp:attachment":[{"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/media?parent=261"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/categories?post=261"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/java2blog.com\/wp-json\/wp\/v2\/tags?post=261"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}