{"id":20178,"date":"2018-01-11T16:15:26","date_gmt":"2018-01-11T14:15:26","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=20178"},"modified":"2018-01-12T16:18:05","modified_gmt":"2018-01-12T14:18:05","slug":"angularjs-development-environment-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/","title":{"rendered":"AngularJS Development Environment Example"},"content":{"rendered":"<p>Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best Angular learning and working experience.<\/p>\n<h2>1. Introduction<\/h2>\n<h3>1.1 What is AngularJS?<\/h3>\n<p><em>AngularJS<\/em> is a JavaScript MVC or Model-View-Controller framework developed by Google that lets developers build well structured, easily testable, and maintainable front-end applications. Before we start with creating an actual application using AngularJS, let us see what the actual parts of an AngularJS application are.<br \/>\n[ulp id=&#8217;LXJcMJZXSsqGXYW8&#8242;]<\/p>\n<h4>1.1.1 Templates<\/h4>\n<p>In AngularJS, a <span style=\"text-decoration: underline;\">template<\/span> is an <code>HTML<\/code> with additional markups. AngularJS library compiles the templates and renders the resultant <code>HTML<\/code> page.<\/p>\n<h4>1.1.2 Directives<\/h4>\n<p><span style=\"text-decoration: underline;\">Directives<\/span> are the markers (i.e. attributes) on a DOM element that tell AngularJS to attach a specific behavior to that DOM element or even transform the DOM element and its children. Most of the directives in AngularJS library starts with the <code>ng<\/code>. The directives consist of the following three parts:<\/p>\n<ul>\n<li><code>ng-app<\/code>: The <code>ng-app<\/code> directive is a <em>starting point<\/em>. If the AngularJS framework finds the <code>ng-app<\/code> directive anywhere in the <code>HTML<\/code> document, it bootstraps (i.e. initializes) itself and compiles the <code>HTML<\/code> template<\/li>\n<li><code>ng-model<\/code>: The <code>ng-model<\/code> directive binds an <code>HTML<\/code> element to a property on the <code>$scope<\/code> object. It also binds the values of AngularJS application data to the <code>HTML<\/code> input controls.<\/li>\n<li><code>ng-bind<\/code>: The <code>ng-bind<\/code> directive binds the AngularJS application data to the <code>HTML<\/code> tags<\/li>\n<\/ul>\n<h4>1.1.3 Expressions<\/h4>\n<p>An <span style=\"text-decoration: underline;\">expression<\/span> is like a JavaScript code which is usually wrapped inside the double curly braces such as <code>{{ expression }}<\/code>. AngularJS library evaluates the expression and produces a result.<\/p>\n<h3><a name=\"usage\"><\/a>1.2 Why should we use AngularJS?<\/h3>\n<p>Using the Model-View-Controller architecture, the framework separates a web application into a simple and yet manageable structure, which comprises of \u201cviews\u201d, \u201cmodels\u201d and \u201ccontrollers\u201d. The AngularJS library provides the in-build directives (or attributes) to extend the <code>HTML<\/code> inside a web page. When developers attach these directives to the <code>HTML<\/code> elements and attributes, it creates a dynamic web-page with very little coding.<\/p>\n<p>These new APIs make a developer life easier, really! But it would be difficult for a beginner to understand this without a solid development environment. Therefore, let us create a development environment, for having the best Angular experience.<\/p>\n<h2>2. AngularJS Development Environment Example<\/h2>\n<p>Here is a step-by-step guide to set-up a development environment for AngularJS.<\/p>\n<h3>2.1 Tools<\/h3>\n<p>We need the following tools to set up a development environment for AngularJS.<\/p>\n<ul>\n<li>AngularJS Library<\/li>\n<li>Eclipse Ide<\/li>\n<li>Browser<\/li>\n<li>Web Server<\/li>\n<\/ul>\n<h3>2.2 AngularJS Library<\/h3>\n<p>To download AngularJS Library, go to <a href=\"https:\/\/angularjs.org\/\" target=\"_blank\" rel=\"noopener\">this<\/a> link -&gt; Click on <em>Download AngularJS<\/em> button, which will open the following popup.<\/p>\n<figure id=\"attachment_20316\" aria-describedby=\"caption-attachment-20316\" style=\"width: 617px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_1_new.jpg\"><img decoding=\"async\" class=\"wp-image-20316 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_1_new.jpg\" alt=\"Fig. 1: Download AngularJS Library\" width=\"617\" height=\"432\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_1_new.jpg 617w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_1_new-300x210.jpg 300w\" sizes=\"(max-width: 617px) 100vw, 617px\" \/><\/a><figcaption id=\"caption-attachment-20316\" class=\"wp-caption-text\">Fig. 1: Download AngularJS Library<\/figcaption><\/figure>\n<p>Select the required AngularJS version from the download popup and click on the download button in the popup. This screen also gives various options for using the Angular JS as follows:<\/p>\n<ul>\n<li><strong>Downloading &amp; Hosting Files Locally<\/strong>:\n<ul>\n<li>There are two different options i.e. <em>Legacy<\/em> and <em>Latest<\/em>. The names itself are self-descriptive. Legacy has version less than <code>1.2.x<\/code> and latest has <code>1.6.x<\/code> version<\/li>\n<li>Developers can also go with the minified, uncompressed or the zipped version<\/li>\n<\/ul>\n<\/li>\n<li><strong>CDN Access<\/strong>: Developers also have access to a CDN. The CDN will give them access around the world to the regional data centers i.e. Google Host. This means using CDN moves the responsibility of hosting the files from your own servers to a series of external ones. This also offers an <em>advantage<\/em> that if the visitor to your webpage has already downloaded a copy of AngularJS from the same CDN, it won&#8217;t have to be re-downloaded. Developers can include the AngularJS library from the following CDN URL:\n<pre class=\"brush:bash; wrap-lines:false;\">https:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.16\/angular.min.js\r\n<\/pre>\n<\/li>\n<\/ul>\n<h3>2.3 Editor<\/h3>\n<p>AngularJS is eventually an HTML and the JavaScript code. So they can install any good editor or IDE as per their choice. The following editors are recommended:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener\">Sublime Text<\/a><\/li>\n<li><a href=\"http:\/\/www.ultraedit.com\/\" target=\"_blank\" rel=\"noopener\">Ultra Edit<\/a><\/li>\n<li><a href=\"https:\/\/eclipse.org\/\" target=\"_blank\" rel=\"noopener\">Eclipse<\/a><\/li>\n<li><a href=\"https:\/\/www.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">Visual Studio<\/a><\/li>\n<li><a href=\"http:\/\/www.jetbrains.com\/webstorm\/\" target=\"_blank\" rel=\"noopener\">WebStorm<\/a> etc.<\/li>\n<\/ul>\n<h3>2.4 Web Server<\/h3>\n<p>Developers can use any web server such as Apache Tomcat, JBoss, and IIS etc. for the development purposes.<\/p>\n<h3>2.5 Browser<\/h3>\n<p>Developers can install any browser of their choice as AngularJS supports the cross-browser compatibility. However, it is recommended to use <a href=\"https:\/\/www.google.com\/chrome\/\" target=\"_blank\" rel=\"noopener\">Google Chrome<\/a> while developing an application.<\/p>\n<h3>2.6 Setting up AngularJS in Eclipse Ide<\/h3>\n<p>Now, open the Eclipse Ide and navigate to <code>Help -&gt; Eclipse Marketplace<\/code>. In the Find text box enter \u2018<em>AngularJS<\/em>\u2019 and press enter.<\/p>\n<figure id=\"attachment_20315\" aria-describedby=\"caption-attachment-20315\" style=\"width: 559px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_2_new.jpg\"><img decoding=\"async\" class=\"wp-image-20315 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_2_new.jpg\" alt=\"Fig. 2: Eclipse Market Place\" width=\"559\" height=\"657\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_2_new.jpg 559w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_2_new-255x300.jpg 255w\" sizes=\"(max-width: 559px) 100vw, 559px\" \/><\/a><figcaption id=\"caption-attachment-20315\" class=\"wp-caption-text\">Fig. 2: Eclipse Market Place<\/figcaption><\/figure>\n<p>Look for the plugin \u2018<em>Angular IDE 2017 CI 10<\/em>\u2019. Click Install. Eclipse will ask you to confirm the selected features.<\/p>\n<figure id=\"attachment_20317\" aria-describedby=\"caption-attachment-20317\" style=\"width: 558px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_3_new.jpg\"><img decoding=\"async\" class=\"wp-image-20317 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_3_new.jpg\" alt=\"Fig. 3: Confirm Selected Features\" width=\"558\" height=\"655\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_3_new.jpg 558w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_3_new-256x300.jpg 256w\" sizes=\"(max-width: 558px) 100vw, 558px\" \/><\/a><figcaption id=\"caption-attachment-20317\" class=\"wp-caption-text\">Fig. 3: Confirm Selected Features<\/figcaption><\/figure>\n<p>Click Confirm. Eclipse will ask you to Review the Licenses. Click \u2018<em>I accept the terms of the license agreement<\/em>\u2018 and press Finish.<\/p>\n<figure id=\"attachment_20318\" aria-describedby=\"caption-attachment-20318\" style=\"width: 526px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_4_new.jpg\"><img decoding=\"async\" class=\"wp-image-20318 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_4_new.jpg\" alt=\"Fig. 4: Review Licenses\" width=\"526\" height=\"545\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_4_new.jpg 526w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_4_new-290x300.jpg 290w\" sizes=\"(max-width: 526px) 100vw, 526px\" \/><\/a><figcaption id=\"caption-attachment-20318\" class=\"wp-caption-text\">Fig. 4: Review Licenses<\/figcaption><\/figure>\n<p>Eclipse will start installing the plugin and will show you a Security Warning pop-up as below. Click OK.<\/p>\n<figure id=\"attachment_20319\" aria-describedby=\"caption-attachment-20319\" style=\"width: 400px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_5_new.jpg\"><img decoding=\"async\" class=\"wp-image-20319 size-full\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_5_new.jpg\" alt=\"Fig. 5: Security Warning\" width=\"400\" height=\"119\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_5_new.jpg 400w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/01\/angular_js_env_project_guide_5_new-300x89.jpg 300w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/><\/a><figcaption id=\"caption-attachment-20319\" class=\"wp-caption-text\">Fig. 5: Security Warning<\/figcaption><\/figure>\n<p>Eclipse will ask you to restart for the changes to take effect. Click <em>Yes<\/em>. To confirm that the plugin was installed correctly you can go to <code>Help -&gt; About Eclipse<\/code> and look for the AngularJS Eclipse plugin in the <code>Installation Details<\/code> section.<\/p>\n<p>Now open up the Eclipse Ide and follow this <a href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angular-js-step-step-beginner-tutorial\/\" target=\"_blank\" rel=\"noopener\">link<\/a> to start with your introductory <strong>AngularJS<\/strong> application. That\u2019s all for this post and happy learning!!<\/p>\n<h2>3. Conclusion<\/h2>\n<p>In this section, developers learned how to install an AngularJS plugin in Eclipse. I hope this article served developers with whatever they were looking for.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best Angular learning and working experience. 1. Introduction 1.1 What is AngularJS? AngularJS is a JavaScript MVC or Model-View-Controller framework developed by Google that lets developers build well structured, easily testable, and maintainable front-end applications. Before &hellip;<\/p>\n","protected":false},"author":2162,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[48,266],"class_list":["post-20178","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-angular","tag-angularjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>AngularJS Development Environment Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJS Development Environment Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-01-11T14:15:26+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-01-12T14:18:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Yatin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Yatin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\"},\"author\":{\"name\":\"Yatin\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367\"},\"headline\":\"AngularJS Development Environment Example\",\"datePublished\":\"2018-01-11T14:15:26+00:00\",\"dateModified\":\"2018-01-12T14:18:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\"},\"wordCount\":871,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"angular\",\"angularjs\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\",\"name\":\"AngularJS Development Environment Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2018-01-11T14:15:26+00:00\",\"dateModified\":\"2018-01-12T14:18:05+00:00\",\"description\":\"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"AngularJS Development Environment Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367\",\"name\":\"Yatin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g\",\"caption\":\"Yatin\"},\"description\":\"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AngularJS Development Environment Example - Web Code Geeks - 2026","description":"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.","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:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/","og_locale":"en_US","og_type":"article","og_title":"AngularJS Development Environment Example - Web Code Geeks - 2026","og_description":"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-01-11T14:15:26+00:00","article_modified_time":"2018-01-12T14:18:05+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Yatin","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Yatin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/"},"author":{"name":"Yatin","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367"},"headline":"AngularJS Development Environment Example","datePublished":"2018-01-11T14:15:26+00:00","dateModified":"2018-01-12T14:18:05+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/"},"wordCount":871,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["angular","angularjs"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/","name":"AngularJS Development Environment Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2018-01-11T14:15:26+00:00","dateModified":"2018-01-12T14:18:05+00:00","description":"Hello readers, in this tutorial, we will guide you for setting up a solid development environment for having the best AngularJS learning and working experience.","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/angularjs-development-environment-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"AngularJS Development Environment Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/6c946b8aea919fb2cd83fb17268e9367","name":"Yatin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3f011dd665043468ba193f7b07472ebbedfa359cff5e576a91a5901c130ca6f1?s=96&d=mm&r=g","caption":"Yatin"},"description":"The author is graduated in Electronics &amp; Telecommunication. During his studies, he has been involved with a significant number of projects ranging from programming and software engineering to telecommunications analysis. He works as a technical lead in the information technology sector where he is primarily involved with projects based on Java\/J2EE technologies platform and novel UI technologies.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/yatin-batra\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20178","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/2162"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=20178"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/20178\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=20178"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=20178"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=20178"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}