{"id":3675,"date":"2014-02-15T08:26:39","date_gmt":"2014-02-15T02:56:39","guid":{"rendered":"http:\/\/JitendraZaa.com\/blog\/?p=3675"},"modified":"2014-02-15T08:26:39","modified_gmt":"2014-02-15T02:56:39","slug":"getting-started-with-angularjs","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/getting-started-with-angularjs\/","title":{"rendered":"Getting Started with AngularJs"},"content":{"rendered":"<figure id=\"attachment_3676\" aria-describedby=\"caption-attachment-3676\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/AngularJS-by-Google.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-3676\" alt=\"AngularJS by Google\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/AngularJS-by-Google-300x84.png?resize=300%2C84&#038;ssl=1\" width=\"300\" height=\"84\" \/><\/a><figcaption id=\"caption-attachment-3676\" class=\"wp-caption-text\">AngularJS by Google<\/figcaption><\/figure>\n<p style=\"text-align: justify;\"><a title=\"AngularJs Documentation\" href=\"http:\/\/docs.angularjs.org\/guide\/\">AngularJs <\/a>is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked\u00a0somewhere\u00a0while using this library, you will have tons of\u00a0supporters.<\/p>\n<p style=\"text-align: justify;\"><strong>So what is so special about this framework, other than its developed by Google ?<\/strong><\/p>\n<ul>\n<li>Unlike <a title=\"Backbone Js\" href=\"http:\/\/backbonejs.org\/\">Backbone <\/a>and <a title=\"EmberJs Framework\" href=\"http:\/\/emberjs.com\/\">Ember<\/a>, You don&#8217;t have to spend time on Event Handling (Bind, UnBind Events etc).<\/li>\n<li>It Works on principal of Dirty Checking.<\/li>\n<li>Automatically fires event if something gets changed.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\"><strong>What ? Dirty checking ? wouldn&#8217;t it be performance impact on my web application?<\/strong><\/p>\n<p style=\"text-align: justify;\">You are correct. But Google team has answer for this.<\/p>\n<ul>\n<li>AngularJS performance mainly linked to your computer (Client&#8217;s Computer) performance.<\/li>\n<li>Ergonomical\u00a0point of view, an HTML page should not have more than 200 fields. More fields will just distract users.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">In this article, I will demonstrate how to use AngularJs framework to create simple application.<!--more--><\/p>\n<p>Application will look like :<\/p>\n<figure id=\"attachment_3677\" aria-describedby=\"caption-attachment-3677\" style=\"width: 300px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Getting-Started-with-AngularJs.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-3677\" alt=\"Getting Started with AngularJs\" src=\"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Getting-Started-with-AngularJs-300x195.png?resize=300%2C195&#038;ssl=1\" width=\"300\" height=\"195\" \/><\/a><figcaption id=\"caption-attachment-3677\" class=\"wp-caption-text\">Getting Started with AngularJs<\/figcaption><\/figure>\n<p style=\"text-align: justify;\">We have already discussed about <a title=\"How to use Underscore - Getting Started\" href=\"https:\/\/jitendrazaa.com\/blog\/salesforce\/client-side-templating-using-underscore-js-and-jquery\/\" target=\"_blank\">using underscore library<\/a> for javascript collection related utilities and templating in previous article. In this demo also, I have used this library to clear list of items which are checked using method &#8220;<a title=\"filter method in UnderscoreJs\" href=\"http:\/\/underscorejs.org\/#filter\">filter<\/a>&#8220;.<\/p>\n<p style=\"text-align: justify;\"><a title=\"Live Demo of AngularJs application\" href=\"http:\/\/jsfiddle.net\/ilovenagpur\/uWvN6\/embedded\/result\/\">Live Demo of application<\/a><\/p>\n<p style=\"text-align: justify;\"><!--more--><\/p>\n<p style=\"text-align: justify;\">HTML Code :<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;body ng-app&gt;\n    &lt;h2&gt; Angular Demo with BootStrap and Underscore.js&lt;\/h2&gt;\n\n    &lt;div ng-controller=&quot;ItemCtrl&quot;&gt;\n          Total Items -  {{items.length}}\n        &lt;ul class=&quot;unstyled&quot;&gt;\n            &lt;li ng-repeat=&quot;item in items&quot;&gt;\n                &lt;input type=&quot;checkbox&quot; ng-model=&quot;item.done&quot;&gt;\n                    &lt;span class=&quot;done-{{item.done}}&quot;&gt; {{item.txt}} &lt;\/span&gt;\n            &lt;\/li&gt;\n        &lt;\/ul&gt;\n\n            &lt;form class=&quot;form-horizontal&quot;&gt;\n                 &lt;div class=&quot;form-group&quot;&gt;\n                    &lt;input type=&quot;text&quot; ng-model=&quot;itemToAdd&quot;   placeHolder=&quot;Add Item&quot;\/&gt;\n                    &lt;button   class=&quot;btn&quot; ng-click=&quot;add()&quot;&gt;\n                        &lt;i class=&quot;icon-plus-sign&quot;&gt;&lt;\/i&gt;  Add\n                    &lt;\/button&gt;\n                &lt;\/div&gt;\n                &lt;button class=&quot;btn&quot; ng-click=&quot;clear()&quot;&gt;\n                    &lt;i class=&quot;icon-trash&quot;&gt;&lt;\/i&gt; Clear Completed Items\n                &lt;\/button&gt;\n            &lt;\/form&gt;\n    &lt;\/div&gt;\n&lt;\/body&gt;\n<\/pre>\n<p>JavaScript code :<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nfunction ItemCtrl($scope)\n{\n\n  $scope.items = &#x5B;\n    {txt:&quot;Angular is Awsome&quot;, done:false},\n    {txt:&quot;Next is Node.js&quot;, done:false}\n  ];\n\n  $scope.add = function() {\n  $scope.items.push({txt:$scope.itemToAdd,done:false});\n\t\t$scope.itemToAdd = &quot;&quot;;\n  }\n\n  $scope.clear = function(){\n    \/\/Here we will use Underscore as simplest library to work with Collections\n    $scope.items = _.filter($scope.items, function(item){\n    return !item.done;\n  });\n}\n}\n<\/pre>\n<p>For look and Feel we are using <a title=\"Bootstrap by Tweeter\" href=\"http:\/\/getbootstrap.com\/css\/\">Tweeter&#8217;s Bootstrap\u00a0library<\/a>.<\/p>\n<p>Additional CSS :<\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n.done-true {\n    text-decoration:line-through;\n    color:grey;\n}\n<\/pre>\n<p>Output of above code is already shown above.<\/p>\n<p>Now Lets understand above code and few basics of AngularJs.<\/p>\n<p><strong>How to define variables ?<\/strong><\/p>\n<p>Variable can be used in HTML as well as javascript part of your application. Inside Javascript, you can use it normally, however if you want to use any variable inside HTML (View) then your variable has to be enclosed between\u00a0<strong>double curly bracket<\/strong>.<\/p>\n<p>Lets take other example to understand this.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\n&lt;body ng-app&gt;\n  &lt;p&gt;Hello {{name}}&lt;\/p&gt;\n  &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;\n&lt;\/body&gt;\n<\/pre>\n<p>As shown in above code, &#8220;name&#8221; is variable. Without single line of javascript code, your angularJs will understand that whatever entered inside text box has to be updated in &lt;p&gt; tag. If you see, we have not added any onchange event on textbox. It all works automatically on principal of dirty checking, Isn&#8217;t it so cool ? \ud83d\ude42<\/p>\n<p><a title=\"Run AngularJs without single line of Javascript ode\" href=\"http:\/\/jsfiddle.net\/ilovenagpur\/55hm7\/\">Working demo of above example<\/a>.<\/p>\n<p>Lets come back to our original code. If you see HTML part, we have used many variables like {{item.length}} and it is defined in\u00a0JavaScript\u00a0code.<\/p>\n<p><strong>What is Angular application or &#8220;ng-app&#8221; ?<\/strong><\/p>\n<p>Your web page can have one or many application defined by tag &#8220;ng-app&#8221;. This represents one unit of application which will have its own controller. In order to use AngularJs, you must need to have atleast one ng-app.<\/p>\n<p>Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application.<\/p>\n<p><strong>What is Controller ?<\/strong><\/p>\n<p>Controller will decide that what action has to perform on part of your web application. It Controls flow of execution and logic.<\/p>\n<p>This is defined with help of attribute &#8220;<strong>ng-controller<\/strong>&#8220;\u009d. This is actually Engine Directive used to define Controller. $scope variables can be accessed only between its definition. In our Example, we have defined controller by name &#8220;ItemCtrl&#8221;\u009d. In Simple words you can say that Controller is plain javaScript function where you define your data to visible in scope and operations to be performed.<\/p>\n<p>There are many ways to define controller. One of the simplest way, which I followed in this example is to define normal javaScript function and supply $scope argument.<\/p>\n<p>Inside Controller &#8220;ItemCtrl&#8221;, we have defined items available for List , also we have defined two methods named add() and clear().<\/p>\n<p><strong>What is Scope ?<\/strong><\/p>\n<p>Scope is object in Angular which is used to bind data and other information between Controller and View. $scope defines that which data and which method can be accessed by controller. It is represented as <strong>$scope<\/strong>. If you see our javascript part of code, we have supplied $scope to controller method &#8220;ItemCtrl&#8221;.<\/p>\n<p><strong>Model or directive &#8220;ng-model&#8221;:<\/strong><\/p>\n<p>This is defined using directive &#8220;<strong>ng-model<\/strong>&#8220;\u009d. This is Engine Directive used to perform two way Binding of variable between View and Controller.<\/p>\n<p>As shown in above code ; When we click on Checkbox, &#8220;ng-modal&#8221;\u009d directive will make sure that &#8220;done&#8221;\u009d attribute of item also set accordingly both side (Controller and View). In Same way When any value is added in Text Box, ng-model &#8220;itemToAdd&#8221;\u009d makes sure that it is available to Controller.<\/p>\n<p><strong>How to iterate over List ? &#8220;ng-repeat&#8221; is savior.<\/strong><\/p>\n<p>If you check our javascript part of code, you might be amazed that how list of items are iterated and added in UI? This magic is happen because of <strong>&#8220;ng-repeat&#8221;\u009d<\/strong> directive. One of the most used directives, it comes handy while iterating through list of items. In our case we iterated through items to create checkbox and &#8220;ng-modal&#8221;\u009d is used to make sure there is two way binding between View (HTML Components) and Controller.<\/p>\n<p><strong>Last but not least, &#8220;ng-click&#8221;.<\/strong><br \/>\nUsed to invoke Javascript function defined in <strong>$Scope<\/strong> of Controller on click event. In Our case, we have defined two methods, add() and clear().<\/p>\n<p>I hope this article will give you start with Javascript framework AngularJs. Feedback and suggestions are welcome !!!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>AngularJs is most accepted MVC framework in Javascript developed by Google. In my point of view, If its developed by Google then there must be something new and unique about this library. It can be used to provide MVC architect to your web application. It has great developers community, so if you are stucked\u00a0somewhere\u00a0while using [&hellip;]<\/p>\n","protected":false},"author":1,"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_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[26],"tags":[35,49,126,206,207,208],"class_list":["post-3675","post","type-post","status-publish","format-standard","hentry","category-web","tag-angularjs","tag-bootstrap","tag-javascript","tag-underscore","tag-underscore-js","tag-underscorejs"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":4384,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/getting-started-with-react\/","url_meta":{"origin":3675,"position":0},"title":"Getting started with React","author":"Jitendra","date":"April 15, 2015","format":false,"excerpt":"React is open source Javascript library used by Facebook and currently very popular amongst web developers to create user interface. React can be used as View part of MVC design pattern with powerful templating feature supported by \"JavaScript syntax extension (JSX)\". React focuses on component based development where each components\u2026","rel":"","context":"In &quot;Web Technology&quot;","block_context":{"text":"Web Technology","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/"},"img":{"alt_text":"React Javascript library by Facebook","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/04\/fbreact.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3951,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/creating-salesforce-query-builder-in-node-js-and-angularjs-using-salesforce-rest-api-and-oauth2\/","url_meta":{"origin":3675,"position":1},"title":"Creating Salesforce Query Builder in Node.js and AngularJs using Salesforce REST API and OAuth2 with Heroku Button","author":"Jitendra","date":"August 18, 2014","format":false,"excerpt":"In this post, we will be creating a\u00a0Salesforce Query (SOQL) Builder.\u00a0It uses Google's Angularjs MVC Javascript library and REST API provided by Salesforce. For Authentication, it uses OAuth2. Node.js is used as a primary language and hosted on Heroku. If you want to directly deploy to your Heroku Account, You\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"SOQL Builder Using Node.js AngularJs Salesforce REST API on Heroku","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/08\/SOQL-Builder-Using-Node.js-AngularJs-Salesforce-REST-API-on-Heroku-1024x504.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3745,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/table-with-sorting-and-searching-using-angularjs\/","url_meta":{"origin":3675,"position":2},"title":"Table with Sorting and Searching using AngularJS","author":"Jitendra","date":"February 22, 2014","format":false,"excerpt":"I hope, from last article you got basic information about AngularJS. This time, I will demonstrate how to add basic Searching and Sorting capability to data table using AngularJs. Output will look something like this : Prerequisite Libraries : UnderscoreJs Bootstrap CSS AngularJs Complete Html Code : [html] <div ng-app=\"myApp\">\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching and Sorting in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-and-Sorting-in-Table-using-AngularJS-300x128.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3756,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/dependency-injection-in-angularjs\/","url_meta":{"origin":3675,"position":3},"title":"Dependency Injection in AngularJs","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"In this series, we have gone through many articles on AngularJs. This time I will discuss about Dependency Injection in AngularJs . Dependency injection is a software design pattern that allows the removal of hard-coded dependencies and makes it possible to change them, whether at run-time or compile-time. Before going\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4047,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/how-to-use-postgresql-in-nodejs\/","url_meta":{"origin":3675,"position":4},"title":"How to use PostgreSQL in Nodejs","author":"Jitendra","date":"November 17, 2014","format":false,"excerpt":"I have written many articles on Node.js and AngularJs. In this article, I will demonstrate how to use PostgreSQL with Node.js and deploy on Heroku. I think you already smelled that this is one of starting article which will finally merged with Salesforce to create some cool application. Assuming you\u2026","rel":"","context":"In &quot;Node.js&quot;","block_context":{"text":"Node.js","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/others\/node-js\/"},"img":{"alt_text":"PostgreSQL in Node.js","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/11\/PostgreSQL-in-Node.js.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":3751,"url":"https:\/\/www.jitendrazaa.com\/blog\/webtech\/web\/pagination-and-sorting-of-data-table-using-angularjs\/","url_meta":{"origin":3675,"position":5},"title":"Pagination, Searching and Sorting of Data Table  using AngularJS","author":"Jitendra Zaa","date":"February 22, 2014","format":false,"excerpt":"We have already discussed \"Basics of AngularJS\" and \"Simple Searching and Sorting\". In this article, we will add Pagination feature also to our previous example. What makes difficult is Sorting result when values are returned from Search and pagination is enabled. Unlike previous post we cannot use standard \"OrderBy\" filter\u2026","rel":"","context":"In &quot;HTML&quot;","block_context":{"text":"HTML","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/webtech\/web\/"},"img":{"alt_text":"Searching Sorting and Pagination in Table using AngularJS","src":"https:\/\/i0.wp.com\/jitendrazaa.com\/blog\/wp-content\/uploads\/2014\/02\/Searching-Sorting-and-Pagination-in-Table-using-AngularJS-300x156.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=3675"}],"version-history":[{"count":0,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/3675\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=3675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=3675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=3675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}