{"id":46793,"date":"2019-01-12T09:12:58","date_gmt":"2019-01-12T03:42:58","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=46793"},"modified":"2020-01-31T10:44:40","modified_gmt":"2020-01-31T05:14:40","slug":"angularjs-controller","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/","title":{"rendered":"Define AngularJS Controller with Syntax and Examples"},"content":{"rendered":"<p>AngularJS Controller is a heart of Angular application. What controls the data in angular? How it controls? Explore this AngularJS Controller tutorial, to know the answers of all these queries. Here, we will learn how to define a controller with the example. Along with this, we will see\u00a0the purpose and limitations of the controller in AngularJS.<\/p>\n<p>So, are you ready to explore <strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-tutorial-for-beginner\/\">AngualrJS<\/a><\/strong> Controller?<\/p>\n<div id=\"attachment_46805\" style=\"width: 1210px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-46805\" class=\"wp-image-46805 size-full\" src=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg\" alt=\"Define AngularJS Controller with Syntax and Examples\" width=\"1200\" height=\"628\" srcset=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg 1200w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01-150x79.jpg 150w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01-300x157.jpg 300w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01-768x402.jpg 768w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01-1024x536.jpg 1024w, https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01-520x272.jpg 520w\" sizes=\"auto, (max-width: 1200px) 100vw, 1200px\" \/><\/a><p id=\"caption-attachment-46805\" class=\"wp-caption-text\">Define AngularJS Controller with Syntax and Examples<\/p><\/div>\n<h2>1. What is AngularJS Controller?<\/h2>\n<p>AngularJS controller controls the flow of data from the model part to the view part. Data is taken from the view part as an input by the controller, then it processes the data and sends back to the view part (HTML part) that is being displayed to the user. It consists of the core business logic.\u00a0It is defined in an angular application using a <a href=\"https:\/\/data-flair.training\/blogs\/angularjs-directives\/\"><strong>directive<\/strong><\/a> known as ng-controller.<\/p>\n<h2>2. How to Define Controller in AngularJS?<\/h2>\n<p>There are two ways to define a controller in an AngularJS application.<\/p>\n<ul>\n<li>Define as an application module<\/li>\n<li>Define as an JavaScript function<\/li>\n<\/ul>\n<h3>i. An application Module<\/h3>\n<p>A controller define as an application <strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-modules\/\">module<\/a><\/strong>.<\/p>\n<p><strong>Syntax &#8211;\u00a0<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">angular.module(\"myapp\", []) \r\n.controller(\"appController\", function($scope) { \r\n\/\/ definition of controller \r\n} );<\/pre>\n<p><strong>Example &#8211;\u00a0<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n&lt;head&gt; \r\n&lt;title&gt;Understanding Controllers In AngularJS&lt;\/title&gt; \r\n&lt;script src=\"angular.js\"&gt;&lt;\/script&gt; \r\n&lt;\/head&gt; \r\n\r\n&lt;body ng-app=\"myapp\"&gt; \r\n&lt;div&gt; Application.controller&lt;\/div&gt; \r\n&lt;div ng-controller=\"appController\"&gt; \r\n&lt;div&gt; My Name (app.contrller): {{myName}} &lt;\/div&gt; \r\n&lt;\/div&gt; \r\n&lt;br\/&gt; \r\n&lt;script&gt; \r\nangular.module(\"myapp\", []) \r\n.controller(\"appController\", function($scope)\r\n{ \r\n$scope.myName = \"DataFlair\"; \r\n}); \r\n&lt;\/script&gt; \r\n&lt;\/body&gt; \r\n&lt;\/html&gt;\r\n\r\n<\/pre>\n<p><strong>Output-<\/strong><\/p>\n<p>Application.controller<\/p>\n<p>My name (app.controller): DataFlair<\/p>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/why-angularjs-used\/\">Do you know why AngularJS is used?<\/a><\/strong><\/p>\n<h3>ii. JavaScript Function<\/h3>\n<p>AngularJS controller defines as a Javascript function.<\/p>\n<p><strong>Syntax-<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">function controllerAsFunction($scope){ \r\n\/\/definition of controller \r\n}<\/pre>\n<p><strong>Example &#8211;<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt; \r\n&lt;html&gt; \r\n&lt;head&gt; \r\n&lt;title&gt;Understanding Controllers and Services In AngularJS&lt;\/title&gt; \r\n&lt;script src=\"angular.js\"&gt;&lt;\/script&gt; \r\n&lt;\/head&gt; \r\n&lt;body ng-app=\"myapp\"&gt; \r\n&lt;div&gt; Controller as function&lt;\/div&gt; \r\n&lt;div ng-controller=\"Controller As Function\"&gt; \r\n&lt;div&gt; My Name (controller as function): {{myName}} &lt;\/div&gt; \r\n&lt;\/div&gt; \r\n&lt;script&gt; \r\nfunction controllerAsFunction($scope) { \r\n$scope.myName = \"DataFlair\"; \r\n} \r\n&lt;\/script&gt; \r\n&lt;\/body&gt; \r\n&lt;\/html&gt;<\/pre>\n<p><strong>Output-<\/strong><\/p>\n<p>Controller As Function<\/p>\n<p>My name (controller as function): DataFlair<\/p>\n<h2>3. Purpose of AngularJS Controller<\/h2>\n<p>There are two purposes of the controller:<\/p>\n<ul>\n<li>The initial value of $scope object is set by using a\u00a0controller.<\/li>\n<li>Behaviour is attached to $scope object using a\u00a0controller.<\/li>\n<\/ul>\n<p><strong><a href=\"https:\/\/data-flair.training\/blogs\/angularjs-mvc\/\">Do you know How MVC Works in AngularJS?<\/a><\/strong><\/p>\n<h2>4. AngularJS Controller in External Files<\/h2>\n<p>For a larger application, it is possible that we can store controller in external files.<\/p>\n<p>You have to create an external file and save this file with extension .js. For example- name_of_file.js and you can provide its path by using source attribute in a script tag.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.6.9\/angular.min.js\"&gt;&lt;\/script&gt;\r\n&lt;body&gt;\r\n&lt;div ng-app=\"myApp\" ng-controller=\"personCtrl\"&gt;\r\nEnter Name: &lt;input type=\"text\" ng-model=\"fName\"&gt;&lt;br&gt;\r\n&lt;br&gt;\r\nTutorial Name: {{fullName()}}\r\n&lt;\/div&gt;\r\n&lt;script src= \u201cinfocontroller.js\u201d&gt;\r\n&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>Save the below-written code as infocontroller.js<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">var app = angular.module('myApp', []);\r\napp.controller('personCtrl', function($scope) {\r\n$scope.fullName = function() {\r\nreturn $scope.fName;\r\n};\r\n});<\/pre>\n<p><strong>Output &#8211;<\/strong><\/p>\n<p>Enter Name:<\/p>\n<p>Tutorial Name:<\/p>\n<p>When we write text in textbox output will be<\/p>\n<p>Enter Name: DataFlair<\/p>\n<p>Tutorial Name: DataFlair<\/p>\n<h2>5. Restrictions on Controller in AngularJS<\/h2>\n<p>Look at the scenarios where we can&#8217;t use a controller:<\/p>\n<ul>\n<li>We cannot use a controller to share code or state across.<\/li>\n<li>We cannot use AngualrJS controller to filter output. For this purpose there are various built-in filters are provided by AngularJS such as uppercase, lowercase and many more. Also one can create custom filters too.<\/li>\n<li><a href=\"https:\/\/data-flair.training\/blogs\/dom-in-angularjs\/\"><strong>DOM (Document object model)<\/strong><\/a> can&#8217;t manipulate by a controller. For this purpose, <strong><a href=\"https:\/\/data-flair.training\/blogs\/data-binding-in-angularjs\/\">data binding<\/a><\/strong> or directives are theirs.<\/li>\n<li>We can&#8217;t use the controller to format input. For that angular form, controls are there.<\/li>\n<\/ul>\n<p>Basically, we should keep AngularJS controller short and simple as possible. This is because a controller contains business logic only. When we can include presentation logic with business logic in a controller, its testability gets\u00a0effects.<\/p>\n<p>The easiest and efficient alternative for these services encapsulate all those works that do not deal with business logic (or that does not belong to a controller) into services. We can use these services by dependency injection in a controller.<\/p>\n<h2>6. Conclusion<\/h2>\n<p>Therefore, we can conclude that the controller is functionality provided in the module container. Business logic is written inside a\u00a0controller. It can contain attributes or properties and functions. Using $scope object AngularJS controller is invoked. Hope, you liked our explanation. If you have any query, feel free to ask in the comment tab.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS Controller is a heart of Angular application. What controls the data in angular? How it controls? Explore this AngularJS Controller tutorial, to know the answers of all these queries. Here, we will learn&#46;&#46;&#46;<\/p>\n","protected":false},"author":5,"featured_media":46805,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18153],"tags":[18337,18343,18342,18338,18341,18339,18340],"class_list":["post-46793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs-controller","tag-angularjs-controller-external-files","tag-angularjs-controller-purpose","tag-controller-in-angularjs","tag-limitations-of-controller","tag-ng-controller","tag-what-is-angularjs-controller"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Define AngularJS Controller with Syntax and Examples - DataFlair<\/title>\n<meta name=\"description\" content=\"What is AngularJS Controller-define ngcontroller, Purpose and limitations of Controller, How to use AngularJS Controller in external files, syntax &amp; example\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/angularjs-controller\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Define AngularJS Controller with Syntax and Examples - DataFlair\" \/>\n<meta property=\"og:description\" content=\"What is AngularJS Controller-define ngcontroller, Purpose and limitations of Controller, How to use AngularJS Controller in external files, syntax &amp; example\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/angularjs-controller\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-12T03:42:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-01-31T05:14:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Define AngularJS Controller with Syntax and Examples - DataFlair","description":"What is AngularJS Controller-define ngcontroller, Purpose and limitations of Controller, How to use AngularJS Controller in external files, syntax & example","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/","og_locale":"en_US","og_type":"article","og_title":"Define AngularJS Controller with Syntax and Examples - DataFlair","og_description":"What is AngularJS Controller-define ngcontroller, Purpose and limitations of Controller, How to use AngularJS Controller in external files, syntax & example","og_url":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2019-01-12T03:42:58+00:00","article_modified_time":"2020-01-31T05:14:40+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg","type":"image\/jpeg"}],"author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823"},"headline":"Define AngularJS Controller with Syntax and Examples","datePublished":"2019-01-12T03:42:58+00:00","dateModified":"2020-01-31T05:14:40+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/"},"wordCount":589,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg","keywords":["AngularJS Controller","AngularJS Controller external files","AngularJS Controller Purpose","Controller in AngularJS","Limitations of Controller","ng-Controller","What is AngularJS Controller"],"articleSection":["AngularJS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/angularjs-controller\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/","url":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/","name":"Define AngularJS Controller with Syntax and Examples - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#primaryimage"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#primaryimage"},"thumbnailUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg","datePublished":"2019-01-12T03:42:58+00:00","dateModified":"2020-01-31T05:14:40+00:00","description":"What is AngularJS Controller-define ngcontroller, Purpose and limitations of Controller, How to use AngularJS Controller in external files, syntax & example","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/angularjs-controller\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#primaryimage","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2019\/01\/AngularJS-Controller-01.jpg","width":1200,"height":628,"caption":"Define AngularJS Controller with Syntax and Examples"},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/angularjs-controller\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"AngularJS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/angularjs\/"},{"@type":"ListItem","position":3,"name":"Define AngularJS Controller with Syntax and Examples"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/7f83c342f5d1632d6f7b4b0b0f447823","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/4cf3a74600d131330b8c481d519afd1574093ed89f6d3396a95393ad223eb7cd?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team creates expert-level guides on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. Our goal is to empower learners with easy-to-understand content. Explore our resources for career growth and practical learning.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam1\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=46793"}],"version-history":[{"count":6,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46793\/revisions"}],"predecessor-version":[{"id":49578,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/46793\/revisions\/49578"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media\/46805"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=46793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=46793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=46793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}