{"id":1303,"date":"2015-10-17T09:11:31","date_gmt":"2015-10-17T14:11:31","guid":{"rendered":"http:\/\/www.kuulstuff.com\/blog\/?p=1303"},"modified":"2016-02-24T21:04:14","modified_gmt":"2016-02-25T03:04:14","slug":"angularjs-controllers","status":"publish","type":"post","link":"http:\/\/kuulstuff.com\/blog\/angularjs-controllers\/","title":{"rendered":"AngularJS Controllers"},"content":{"rendered":"<p>AngularJS Controllers are where the most magic happens. Think that the controllers of an AngularJS application as the brain. The controllers are super smart and can define what happens on the (DOM) Document Object Model. AngularJS controllers along with the dependency injection form the super power of the AngularJS.<\/p>\n<p><strong>Controllers<\/strong><\/p>\n<p>Here are some key details\u00a0<a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1287\" target=\"_blank\">AngularJS: How to Begin<\/a>.<\/p>\n<ul>\n<li>\u00a0Controllers are attached to the DOM through the ng-controller directive. When a controller is initialized, a javascript object will be created and all the functions in the .controller method can be accessed.<\/li>\n<li>The initial state for the Angular $scope is available at the point where a controller is registered. All the properties of the $scope can be\u00a0defined in the controller and can be accessed through the methods.<\/li>\n<li>The .controller method can be used to add the controller&#8217;s constructor function to the module. Thus the constructor function is out of global scope.<\/li>\n<li>Apart from the $scope, we can send additional parameters to the controller, such as services and functions. It is better to keep a controller as simple as possible. You can define as many controllers as you want in an AngularJS application.<\/li>\n<li>A common practice of keeping controllers focused on the required logic is to define services and functions, which can in turn be passed to a controller through dependency injection.<\/li>\n<li>Controllers can be nested and inherited. You have to note that the parent&#8217;s controller&#8217;s methods can be accessed in the child controller. And not vice versa.<\/li>\n<li>Finally, remember that the controllers contain Javascript functions and are created by a standard Javascript object constructor and is bounded to a particular scope.<\/li>\n<\/ul>\n<p><script src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\" async=\"\"><\/script><!-- GameCentral_Banner --> <ins class=\"adsbygoogle\" style=\"display: block;\" data-ad-client=\"ca-pub-1297284887870121\" data-ad-slot=\"6770181597\" data-ad-format=\"auto\"><\/ins><script>\/\/ <![CDATA[\n(adsbygoogle = window.adsbygoogle || []).push({});\n\/\/ ]]><\/script><\/p>\n<p><strong>Example<\/strong><\/p>\n<p>Here is an example of how the Controller is initiated. You have to create an angular app called myapp. Also, you need to declare in the html to tell that it is an Angular application.<\/p>\n<p>In the js:<\/p>\n<p><em>myapp.controller(&#8220;MyCtrl&#8221;, function($scope){<\/em><\/p>\n<p><em>$scope.message=&#8221;Hello&#8221;;<\/em><\/p>\n<p><em>});<\/em><\/p>\n<p>In the HTML or template:<\/p>\n<p><em>&lt;div ng-controller=&#8221;MyCtrl&#8221;&gt;<\/em><\/p>\n<p><em>{{message}}<\/em><\/p>\n<p><em>&lt;\\div&gt;<\/em><\/p>\n<p>Your div is binded to the controller using the &#8216;ng-controller&#8217; directive. The scope of the div is passed to the controller. The scope message variable&#8217;s value can be accessed in the div within the dual curly braces. Notice, how the name of the controller is defined with an &#8216;Ctrl&#8217; and the double quotes used while defining and accessing the controller.<\/p>\n<p>Similarly, you can have any number of controllers in your AngularJS application. You can have different Javascript files for each controller or just put it in one main file. This makes two way data binding easier and keeps your application simple!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJS Controllers are where the most magic happens. Think that the controllers of an AngularJS application as the brain. The controllers are super smart and can define what happens on the (DOM) Document Object Model. AngularJS controllers along with the dependency injection form the super power of the AngularJS.<a href=\"http:\/\/kuulstuff.com\/blog\/angularjs-controllers\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\">AngularJS Controllers<\/span><\/a><\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[21,61],"tags":[1041,1074,1057,1078,1046,1048,1032,115,1079],"class_list":["post-1303","post","type-post","status-publish","format-standard","hentry","category-daytoday","category-technology","tag-angularjs","tag-controllers","tag-css","tag-dependency-injection","tag-directives","tag-filters","tag-html","tag-javascript","tag-ng-controller"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4AvRz-l1","jetpack-related-posts":[{"id":1287,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/","url_meta":{"origin":1303,"position":0},"title":"AngularJS: How to Begin","author":"KP","date":"October 10, 2015","format":false,"excerpt":"AngularJS is the Javascript framework for website development. It is widely popular for the features including modularity and separation of concerns. Here are some of the keywords you must be familiar with in order to build web applications with AngularJS.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1316,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-routes-with-routeprovider-and-stateprovider\/","url_meta":{"origin":1303,"position":1},"title":"AngularJS Routes with $routeProvider and $stateProvider","author":"KP","date":"October 18, 2015","format":false,"excerpt":"AngularJS Routes are used to load different views or states depending on whether you use a ng-Route or ui-Route. The traditional way of linking the pages in your application is just fine, but with AngularJS routes you can handle dynamic binding better and the routes are easier to remember for\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1311,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-directives\/","url_meta":{"origin":1303,"position":2},"title":"AngularJS Directives","author":"KP","date":"October 18, 2015","format":false,"excerpt":"AngularJS directives are a cool way of defining behavior and using it any way you want. You can have a directive with your name and have it do any kind of work you want depending on the situation. AngularJS directives control your DOM behavior.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1281,"url":"http:\/\/kuulstuff.com\/blog\/forget-everything-just-learn-angularjs\/","url_meta":{"origin":1303,"position":3},"title":"Forget Everything: Just Learn AngularJS!","author":"KP","date":"October 10, 2015","format":false,"excerpt":"Angular or Angular JS is the next most powerful Javascript framework out there which is becoming increasingly popular among the tech world. Angular JS along with CSS frameworks such as Bootstrap coupled with the REST services is redefining Website development.","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":220,"url":"http:\/\/kuulstuff.com\/blog\/three-steps-to-post-a-google-adsense-ad-in-your-blog\/","url_meta":{"origin":1303,"position":4},"title":"Three Steps to Post a Google AdSense Ad in Your Blog","author":"KP","date":"May 27, 2010","format":false,"excerpt":"Google Adsense is widely popular among the blog industry. Everybody is blogging, but the real challenge is setting up the ads in a blog. Here are three simple steps to post an ad in to your blog.","rel":"","context":"In &quot;Technology&quot;","block_context":{"text":"Technology","link":"http:\/\/kuulstuff.com\/blog\/category\/technology\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1370,"url":"http:\/\/kuulstuff.com\/blog\/youtube-application-program-interface-api\/","url_meta":{"origin":1303,"position":5},"title":"YouTube Application Program Interface (API)","author":"KP","date":"January 22, 2016","format":false,"excerpt":"YouTube is the most popular video source for world wide web users. As a developer, if you would like to embed a YouTube application in your website or application, there are a number of tools available. However, there are some settings and customization required if you want to modify according\u2026","rel":"","context":"In &quot;Day to day&quot;","block_context":{"text":"Day to day","link":"http:\/\/kuulstuff.com\/blog\/category\/daytoday\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/comments?post=1303"}],"version-history":[{"count":3,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1303\/revisions"}],"predecessor-version":[{"id":1399,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1303\/revisions\/1399"}],"wp:attachment":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=1303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=1303"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=1303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}