{"id":1287,"date":"2015-10-10T18:34:15","date_gmt":"2015-10-10T23:34:15","guid":{"rendered":"http:\/\/www.kuulstuff.com\/blog\/?p=1287"},"modified":"2015-12-18T21:17:31","modified_gmt":"2015-12-19T03:17:31","slug":"angularjs-how-to-begin","status":"publish","type":"post","link":"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/","title":{"rendered":"AngularJS: How to Begin"},"content":{"rendered":"<p>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\u00a0applications with AngularJS.<\/p>\n<p><strong>Steps to Create<\/strong><\/p>\n<p>Here are the steps to create an application with <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1281\">AngularJS<\/a>:<\/p>\n<ol>\n<li>Download the latest angular js file from the Angular website. Or, you can include the CDN in the script tag of your web page<\/li>\n<li>Bootstrap the application with Angular by using ng-app<\/li>\n<li>Create a controller in the app<\/li>\n<li>Create the HTML view in the body<\/li>\n<li>Run the application in a web browser<\/li>\n<\/ol>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- GameCentral_Banner --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1297284887870121\"\n     data-ad-slot=\"6770181597\"\n     data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<p><strong>Angular Keywords<\/strong><\/p>\n<ol>\n<li><strong>Directives<\/strong>: AngularJS uses the directives to convert static HTML into dynamic Document Object Model (DOM) with the help of special attributes such as:\n<ol>\n<li>ng-app: To determine which part of the page will use Angular. It will load the respective module in that part.<\/li>\n<li>ng-controller: To identify which Javascript controller should be used in that part of the page.<\/li>\n<li>ng-model: To determine the binding between model and the input field ensuring two way binding.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Modules<\/strong>: Modules ensure separation of concerns in manageable units. It can comprise all the directives, expressions, controllers, services, and filters. Modules specify how an application can be bootstrapped. Advantages of using modules are:\n<ol>\n<li>Easy to declare and understand<\/li>\n<li>Code can be packaged as reusable chunks<\/li>\n<li>Easy to load in any order or load in parallel<\/li>\n<li>Faster unit tests because only relevant modules can be tested<\/li>\n<li>Modules can be used in end-to-end tests to override configuration<\/li>\n<\/ol>\n<\/li>\n<li><strong>Controllers<\/strong>: Controllers\u00a0are\u00a0defined by a JavaScript constructor function\u00a0that is used to augment the Scope. They carry the business logic and determine\u00a0how the view and model interact. The scope is a mandatory parameter that is passed to the controller.\n<ol>\n<li>A\u00a0controller is attached to the DOM via the ng-controller\u00a0directive.<\/li>\n<li>Then, \u00a0Angular instantiates a new Controller object, using the specified <a href=\"http:\/\/www.kuulstuff.com\/blog\/?p=1303\">Controller<\/a>&#8216;s constructor function.<\/li>\n<li>A new child scope will be created and made available as an injectable parameter to the Controller&#8217;s constructor function as $scope.<\/li>\n<\/ol>\n<\/li>\n<li><strong>Expressions: <\/strong>Expressions are Javascript code snippets that are placed in dual curly braces. {{ }}. They are used to load model directly into the view. Advantages of using expressions are:\n<ol>\n<li>Evaluated in the current scope not in the global window<\/li>\n<li>Evaluation of errors is either null or undefined<\/li>\n<li>Loops, functions, exceptions cannot be handled in Angular expressions<\/li>\n<li>You need to create a controller for complex\u00a0Javascript functions<\/li>\n<\/ol>\n<\/li>\n<p><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script><br \/>\n<!-- GameCentral_Banner --><br \/>\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1297284887870121\"\n     data-ad-slot=\"6770181597\"\n     data-ad-format=\"auto\"><\/ins><br \/>\n<script>\n(adsbygoogle = window.adsbygoogle || []).push({});\n<\/script><\/p>\n<li><strong>Scope: <\/strong>Scope is an object of the application model. It refers to the current context or boundary of the application. Scope establishes a connection between application controller and view. Some of the characteristics of the scope are:\n<ol>\n<li>Used to\u00a0observe model mutations<\/li>\n<li>Used to propagate\u00a0events similar to DOM events<\/li>\n<li>Can be nested to limit the properties and behavior of application components<\/li>\n<li>A child scope can inherit from the parent scope<\/li>\n<li>Provide a context for expressions to evaluate<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<p>There are some other key terms such as filters, forms, routing, and services which are key to an Angular application.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.<a href=\"http:\/\/kuulstuff.com\/blog\/angularjs-how-to-begin\/\" class=\"more-link\">Read More <span class=\"screen-reader-text\">AngularJS: How to Begin<\/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":[1042,1041,1074,1046,1047,1048,1073,1065,1068,1051,1071,1070,1069,1067,1066,1072,1075],"class_list":["post-1287","post","type-post","status-publish","format-standard","hentry","category-daytoday","category-technology","tag-angular","tag-angularjs","tag-controllers","tag-directives","tag-expressions","tag-filters","tag-forms","tag-modules","tag-nd-controller","tag-ng-app","tag-ng-bind","tag-ng-click","tag-ng-model","tag-ng-module","tag-routing","tag-scope","tag-two-way-binding"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p4AvRz-kL","jetpack-related-posts":[{"id":1281,"url":"http:\/\/kuulstuff.com\/blog\/forget-everything-just-learn-angularjs\/","url_meta":{"origin":1287,"position":0},"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":1303,"url":"http:\/\/kuulstuff.com\/blog\/angularjs-controllers\/","url_meta":{"origin":1287,"position":1},"title":"AngularJS Controllers","author":"KP","date":"October 17, 2015","format":false,"excerpt":"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.","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":1287,"position":2},"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":1287,"position":3},"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":1370,"url":"http:\/\/kuulstuff.com\/blog\/youtube-application-program-interface-api\/","url_meta":{"origin":1287,"position":4},"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":[]},{"id":220,"url":"http:\/\/kuulstuff.com\/blog\/three-steps-to-post-a-google-adsense-ad-in-your-blog\/","url_meta":{"origin":1287,"position":5},"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":[]}],"jetpack_likes_enabled":true,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1287","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=1287"}],"version-history":[{"count":5,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1287\/revisions"}],"predecessor-version":[{"id":1307,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/posts\/1287\/revisions\/1307"}],"wp:attachment":[{"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/media?parent=1287"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/categories?post=1287"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/kuulstuff.com\/blog\/wp-json\/wp\/v2\/tags?post=1287"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}