{"id":12538,"date":"2015-06-22T04:39:00","date_gmt":"2015-06-22T04:39:00","guid":{"rendered":"https:\/\/viewmyprojects.com\/winwirewp\/?p=12538"},"modified":"2025-01-28T09:42:17","modified_gmt":"2025-01-28T09:42:17","slug":"introduction-to-angularjs","status":"publish","type":"post","link":"https:\/\/viewmyprojects.com\/winwirewp\/blog\/introduction-to-angularjs\/","title":{"rendered":"Introduction to AngularJS"},"content":{"rendered":"\n

AngularJS is a JavaScript UI framework that was initially designed by Misko Hevery and Adam Abrons in 2009. It has recently gained a lot of popularity (and is justified too!). Thanks to its unique approach that says \u2013 \u201cAngular is what HTML would have been, had it been designed for applications\u201d. Meaning it abstracts a lot of things which requires a web developer to write in order to create a Web application, which may include \u2013 CRUD functionality support, Data-Binding, DOM manipulation, some HTML templating solution etc., But what is special about Angular is that it achieves all of these using a special construct called as \u201cDirectives\u201d<\/strong> which look much like attributes in an html tag.<\/p>\n\n\n\n

While the javascript frameworks likes\u2019 jquery code written to create HTML and manipulate them, Angular goes in the opposite direction \u2013 it uses the directives approach and makes HTML to assemble the application which is quite unique.<\/p>\n\n\n\n

In addition, a major strength of AngularJS is its beautiful support for \u201cDependency Injection\u201d<\/strong> which opens up a huge set of opportunities for creating Web applications by providing the developers a complete client side solution where they can use patterns like MVC.<\/p>\n\n\n\n

In this blog, we are going to get a quick hands-on about how to work with AngularJS. It is purely a demonstration of some basic capabilities of AngularJS and in no way educates the reader best practices in AngularJS or JavaScript. To follow, you will need<\/p>\n\n\n\n

1. Simple text editor:<\/strong> You can use any simple text editor like \u201cNotepad\u201d. In the hands-on tutorial, I will be using an open source editor called as \u201cBrackets\u201d. Brackets has a nice feel and beautiful preview. A free download is available at http:\/\/brackets.io\/<\/a>. If you are a DOT Net Developer, you can follow this tutorial using Visual Studio.<\/p>\n\n\n\n

2. AngularJS scripts:<\/strong> AngularJS scripts can be downloaded from: https:\/\/angularjs.org\/<\/a> . You can use the provided CDN link. I will use the CDN link for simplicity.<\/p>\n\n\n\n

3. Browser:<\/strong> And last but not the least, you need a browser! For the purposes of this tutorial, I will be using Google Chrome. Google Chrome works with brackets in the live preview option.<\/p>\n\n\n\n

(Note: There is an interesting online editor called plnkr<\/a>. I prefer working offline because it is more comfortable)<\/p>\n\n\n\n

Let\u2019s get started \u2013 Setting up the stage:<\/strong><\/p>\n\n\n\n

\u2022 Step 1 \u2013 Create a Folder and File: Create a folder named \u201cNGDemo\u201d and save it to your desktop. Open brackets, click on \u201cFile\u201d in the menu, go to \u201cOpen Folder\u201d and select the\u201dNGDemo\u201d folder. Next, you will need to add a new file. Go to \u201cFile > New\u201d and save this file as \u201cdemopage.html\u201d.<\/p>\n\n\n\n

\u2022 Step 2 \u2013 Prepping the Page and Adding AngularJS script: To start the html page, add the following script tag and src attribute that points to: https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.15\/angular.min.js<\/a><\/p>\n\n\n\n

Congratulations! You are ready to work with AngularJS! In my next blog \u201cGetting started with AngularJS \u2013 Part 2\u2033<\/a> I will demonstrate some basic capabilities of AngularJS.<\/p>\n","protected":false},"excerpt":{"rendered":"

AngularJS is a JavaScript UI framework that was initially designed by Misko Hevery and Adam Abrons in 2009. It has recently gained a lot of popularity (and is justified too!). Thanks to its unique approach that says \u2013 \u201cAngular is what HTML would have been, had it been designed for applications\u201d. Meaning it abstracts a… Continue reading Introduction to AngularJS<\/span><\/a><\/p>\n","protected":false},"author":96,"featured_media":16768,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-12538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","entry"],"acf":[],"featured_image_src":"https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp","author_info":{"display_name":"Suryanarayana","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/suryanarayana\/"},"views":3663,"uagb_featured_image_src":{"full":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp",800,440,false],"thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic-150x150.webp",150,150,true],"medium":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic-300x165.webp",300,165,true],"medium_large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic-768x422.webp",750,412,true],"large":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp",750,413,false],"1536x1536":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp",800,440,false],"2048x2048":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp",800,440,false],"post-thumbnail":["https:\/\/viewmyprojects.com\/winwirewp\/wp-content\/uploads\/2023\/11\/Introduction-to-AngularJS-graphic.webp",800,440,false]},"uagb_author_info":{"display_name":"Suryanarayana","author_link":"https:\/\/viewmyprojects.com\/winwirewp\/author\/suryanarayana\/"},"uagb_comment_info":0,"uagb_excerpt":"AngularJS is a JavaScript UI framework that was initially designed by Misko Hevery and Adam Abrons in 2009. It has recently gained a lot of popularity (and is justified too!). Thanks to its unique approach that says \u2013 \u201cAngular is what HTML would have been, had it been designed for applications\u201d. Meaning it abstracts a……","_links":{"self":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/users\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/comments?post=12538"}],"version-history":[{"count":2,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12538\/revisions"}],"predecessor-version":[{"id":22517,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/posts\/12538\/revisions\/22517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media\/16768"}],"wp:attachment":[{"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/media?parent=12538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/categories?post=12538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/viewmyprojects.com\/winwirewp\/wp-json\/wp\/v2\/tags?post=12538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}