{"id":23147,"date":"2020-01-21T23:43:53","date_gmt":"2020-01-21T15:43:53","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=23147"},"modified":"2020-02-20T19:52:00","modified_gmt":"2020-02-20T11:52:00","slug":"angularjs-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/","title":{"rendered":"15 Useful AngularJS Tools For Developers"},"content":{"rendered":"<p>Thinking of dipping your toes into Angular? If you have gone through our <a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/angularjs-tutorials-screencast\/\" rel=\"noopener noreferrer\">10 best tutorials to learn AngularJS <\/a>post and would like to play around with Angular on your own, you\u2019re on the right post. We have here some <strong>tools that can streamline your development workflow<\/strong>.<\/p>\n<p>We\u2019re looking at 15 of the <strong>best IDEs, text editors, tools for testing & debugging, modules<\/strong> and <strong>development tools and apps<\/strong> for building with Angular. If you have your favorite tools or apps, do share them with us in the comments below.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/angularjs-basic\/\" class=\"ref-block__link\" title=\"Read More: Getting Started With AngularJS\" rel=\"bookmark\"><span class=\"screen-reader-text\">Getting Started With AngularJS<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/angularjs-basic.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-22246 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/angularjs-basic.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">Getting Started With AngularJS<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tEvery once in a while a new tool arises and just as it suddenly appeared, it seeps down...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h2>IDE & Text Editor<\/h2>\n<p>In the programming world, there are two types of editors: <strong>full featured Integrated Development Environment <\/strong>(<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/cloud-ide-developers\/\" rel=\"external noopener noreferrer\">IDE<\/a>) and <strong>lightweight text editors<\/strong>. Both allow for faster development workflow.<\/p>\n<p>The IDE and text editor we listed below are pretty good tools to speed up your Angular development. They can be easily configured for the Angular environment.<\/p>\n<h3>WebStorm<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/www.jetbrains.com\/webstorm\/\" rel=\"noopener noreferrer\">WebStorm<\/a> is suited not just for Javascript but also HTML and CSS. It has an awesome live editor which lets you see your coding results on the browser without frequent refreshing needed.<\/p>\n<p>By default, their newest version carries the AngularJS plugin bundle although you will need to include the Angular script in your project first. For more details, read the WebStorm <a target=\"_blank\" href=\"https:\/\/blog.jetbrains.com\/webstorm\/2014\/03\/angularjs-workflow-in-webstorm\/\" rel=\"noopener noreferrer\">blog post<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg\" alt=\"webstorm\" width=\"800\" height=\"476\"><\/figure>\n<h3>Aptana<\/h3>\n<p><a target=\"_blank\" href=\"http:\/\/www.aptana.com\/\" rel=\"noopener noreferrer\">Aptana<\/a> is a free open source IDE which is actually the customized version of Eclipse focusing on Javascript, HTML, CSS and other web goodies. To extend Aptana for Angular support, all you need to do is install the <a target=\"_blank\" href=\"https:\/\/github.com\/angelozerr\/angularjs-eclipse\" rel=\"noopener noreferrer\">AngularJS Eclipse<\/a> extension from the <strong>Eclipse Marketplace<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/aptana.jpg\" alt=\"aptana\" width=\"585\" height=\"383\"><\/figure>\n<h3>Sublime Text<\/h3>\n<p>One of the most popular text editors available, <a target=\"_blank\" href=\"https:\/\/www.sublimetext.com\/\" rel=\"noopener noreferrer\">Sublime Text<\/a> is loved by many because of its customizability to adapt to any kind of programming environment. It is also fast and has customizable <a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-code-snippets\/\">code snippet<\/a> support, and has many packages including the <a target=\"_blank\" href=\"https:\/\/github.com\/angular-ui\/AngularJS-sublime-package\" rel=\"noopener noreferrer\">AngularJS package<\/a> which allow you to work with Angular.<\/p>\n<p>Here is a great <a target=\"_blank\" href=\"https:\/\/weblogs.asp.net\/dwahlin\/using-the-angularjs-package-for-sublime-text\" rel=\"noopener noreferrer\">post<\/a> by Dan Wahlin you can check out about this.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angular-sublimetext.jpg\" width=\"800\" height=\"471\" alt=\"Sublime Text code editor interface in macOS\"><\/figure>\n<p><strong>More on Sublime Text:<\/strong><\/p>\n<ul>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-plugins\/\">18 essential  Sublime Text plugins<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-tips\/\">12 Most-Wanted Sublime Text tips & tricks<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublimetext-insert-file-path\/\">How to insert File Path in Sublime Text <\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/preview-in-localhost\/\">Quick-preview Localhost project with Sublime Text<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/sublime-text-task-management\/\">Manage Notes and Lists with Sublime Text<\/a><\/li>\n<li><a href=\"https:\/\/www.hongkiat.com\/blog\/css-automatic-vendor-prefix\/\">Adding CSS Vendor Prefix with Sublime Text<\/a><\/li>\n<\/ul>\n<h2>Testing & Debugging Tools<\/h2>\n<p><strong>Testing and debugging<\/strong> are important parts of the development process especially in an environment like Angular. Here are some of the tools that can help you test and debug your application.<\/p>\n<h3>Karma<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/karma-runner.github.io\/0.12\/index.html\" rel=\"noopener noreferrer\">Karma<\/a> is a great test runner made for Angular, but can also be used with any other Javascript framework. It supports any type of testing: <strong>unit testing, midway testing <\/strong>and<strong> E2E testing<\/strong>.<\/p>\n<p>Karma works by opening browsers that you list in the configuration file. It then communicates with the active browser using <a target=\"_blank\" href=\"https:\/\/socket.io\/\" rel=\"noopener noreferrer\">socket.io<\/a> and asks you whether to run the test or not.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/karma.jpg\" alt=\"karma\" width=\"800\" height=\"433\"><\/figure>\n<h3>Jasmine<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/jasmine.github.io\/\" rel=\"noopener noreferrer\"><\/a><a target=\"_blank\" href=\"https:\/\/jasmine.github.io\/\" rel=\"noopener noreferrer\">Jasmine<\/a> is used for behavior-driven development (BDD), but you can use it for test-driven development (TDD) with a bit <a target=\"_blank\" href=\"https:\/\/code.tutsplus.com\/tutorials\/testing-your-javascript-with-jasmine--net-21229\" rel=\"noopener noreferrer nofollow\">customization<\/a>. It is usually coupled with Karma: Karma as the test runner, Jasmine as the test framework.<\/p>\n<p>Jasmine will automatically inspect all your Javascript classes and functions and notify you of unhandled code. The drawback is <strong>it doesn\u2019t know which environment (browsers) the test performed<\/strong>, but Karma compensates for this disadvantage.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/jasmine.jpg\" alt=\"jasmine\" width=\"800\" height=\"478\"><\/figure>\n<h3>MochaJS<\/h3>\n<p>When compared to Jasmine, <a target=\"_blank\" href=\"https:\/\/mochajs.org\/\" rel=\"noopener noreferrer\">MochaJS<\/a> <strong>is more flexible<\/strong> but <strong>Jasmine comes as an all-in-one package<\/strong>. With MochaJS, if you want to use spy framework, you need to set up Mocha with its appropriate library like <a target=\"_blank\" href=\"https:\/\/sinonjs.org\/\" rel=\"noopener noreferrer\">sinon.js<\/a>. And if you need assertion framework, Mocha needs to be configured with a framework like <a target=\"_blank\" href=\"https:\/\/www.chaijs.com\/\" rel=\"noopener noreferrer\">Chai<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/mocha.jpg\" alt=\"mocha\" width=\"686\" height=\"317\"><\/figure>\n<h3>Protractor<\/h3>\n<p><a target=\"_blank\" href=\"http:\/\/www.protractortest.org\/\" rel=\"noopener noreferrer\">Protractor<\/a> is probably the most powerful automated <strong> end to end<\/strong> (e2e) Angular testing tool. Developed by the Angular team, Protractor is built by combining some great technologies available today like <strong>NodeJS, Selenium, webDriver, Mocha, Cucumber <\/strong>and<strong> Jasmine<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/protractor.jpg\" alt=\"protractor\" width=\"600\" height=\"360\"><\/figure>\n<h3>Angular Batarang<\/h3>\n<p>Besides <strong>Protractor<\/strong>, another great tool developed by the Angular team is <a target=\"_blank\" href=\"https:\/\/github.com\/angular\/batarang\" rel=\"noopener noreferrer\">Angular Batarang<\/a>. <strong>Batarang<\/strong> is a Chrome extension for debugging Angular applications. After inspecting your app, Batarang will show you the <strong>model, performance and dependency<\/strong> debugging results in three different tabs.<\/p>\n<p>You can also control the inspection, deciding whether to show the <strong>applications, bindings or scopes<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angular-batarang.jpg\" alt=\"angular-batarang\" width=\"1000\" height=\"612\"><\/figure>\n<h3>ng-inspector<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/ng-inspector.org\/\" rel=\"noopener noreferrer\">ng-inspector<\/a> is a browser extension supported on Chrome and Safari. Unlike Batarang which shows up in DevTools, ng-inspector prefers the side panel display instead. You can inspect and highlight DOM elements as you hover over a scope. You can also see the scope and model updated in real time.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/ng-inspector.jpg\" alt=\"ng-inspector\" width=\"765\" height=\"412\"><\/figure>\n<h2>Modules<\/h2>\n<p>A quick search on <a href=\"https:\/\/github.com\/topics\/angular\" target=\"_blank\" rel=\"noopener noreferrer\">Github Angular Topic<\/a> should find you a plenty of Angular module developed by the community. But if you need a quick overview, below is a list of some good resources we\u2019ve collected for you.<\/p>\n<h3>Angular Material<\/h3>\n<p><a href=\"https:\/\/material.angular.io\/\">Angular Material<\/a> is a collection of UI components based on the very own <a href=\"https:\/\/material.io\/design\/\" target=\"_blank\" rel=\"noopener noreferrer\">Google Material<\/a> design language. Built by the team from Google and Angular, the collection comprises of each and every component from Material Design such as the Form Controls, Navigation, the Layout as well as its utility tools.<\/p>\n<p>If you\u2019re looking a complete package of UI framework with Angular, look no further.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angular-material.jpg\" alt=\"A phone illustration\" width=\"750\" height=\"480\"><\/figure>\n<h3>AngularUI<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/angular-ui.github.io\/\" rel=\"noopener noreferrer\">AngularUI<\/a> is a collection of UI components built with AngularJS. Its utility directives help you build Angular applications faster. Instead of widgets, AngularUI uses raw directives like <code>ui-router<\/code>, <code>ui-map<\/code>, <code>ui-calendar<\/code> etc. The directives you\u2019ll probably like the most is its <a target=\"_blank\" href=\"https:\/\/angular-ui.github.io\/bootstrap\" rel=\"noopener noreferrer\">UI-Bootstrap<\/a> which can natively <strong>create Twitter Bootstrap in Angular<\/strong>. Check out its clean and nice <a target=\"_blank\" href=\"https:\/\/angular-ui.github.io\/\" rel=\"noopener noreferrer\">documentation page<\/a> to get started.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angularui.jpg\" alt=\"angularui\" width=\"800\" height=\"538\"><\/figure>\n<h3>Restangular<\/h3>\n<p>With Angular, you may have a hard time working working <code>$resource<\/code> and <code>$http<\/code> for creating Rest API. <a target=\"_blank\" href=\"https:\/\/github.com\/mgonto\/restangular\" rel=\"noopener noreferrer\">Restangular<\/a> can help make<strong> the usage of get, delete, update and post data requests easier<\/strong>.<\/p>\n<p>Some features that set Restangular apart from <code>$resource<\/code> are HTTP method support, self-linking element, <a target=\"_blank\" href=\"https:\/\/docs.angularjs.org\/api\/ng.%24q\" rel=\"noopener noreferrer\">promises<\/a> usage and many more. Find out more <a target=\"_blank\" href=\"https:\/\/github.com\/mgonto\/restangular\" rel=\"noopener noreferrer\">here<\/a> and check out the live demo on <a target=\"_blank\" href=\"https:\/\/plnkr.co\/edit\/d6yDka?p=preview\" rel=\"noopener noreferrer\">Plunkr<\/a>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/restangular.jpg\" alt=\"restangular\" width=\"600\" height=\"372\"><\/figure>\n<h3>Angular Gettext<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/angular-gettext.rocketeer.be\/\" rel=\"noopener noreferrer\">Angular-Gettext<\/a> is a superb Angular module for super-easy localization. The key features are you can translate your web app as easy as adding <code>attribute<\/code>. It lets you focus on your app development and leave all translations to Angular-Gettext.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angular-gettext.jpg\" alt=\"angular gettext\" width=\"1000\" height=\"742\"><\/figure>\n<h2>Tools & Apps<\/h2>\n<p>Lastly, we\u2019re just going to leave this here. It\u2019s a list of more tools and apps that can probably make your Angular development process easier and smoother. They work well with those who are just starting to pick up Angular.<\/p>\n<h3>Generator Angular<\/h3>\n<p>Yeoman has a code generator called <a target=\"_blank\" href=\"https:\/\/github.com\/yeoman\/generator-angular\" rel=\"noopener noreferrer\">Generator Angular<\/a>. With this tool, you can speed up your Angular development with only couples of terminal command. It can automatically generate development server, unit and framework testing, view, directives and more.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/yeoman.jpg\" alt=\"yeoman\" width=\"600\" height=\"340\"><\/figure>\n<h3>Awesome Angular<\/h3>\n<p><a target=\"_blank\" href=\"https:\/\/github.com\/PatrickJS\/awesome-angular\" rel=\"noopener noreferrer\">AwesomeAngular<\/a> is a comprehensive list of anything Angular. You can find list of books, cheatsheets, source of learning, tutorials, components and Angular exports to follow in Twitter.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/angular-awesome.jpg\" alt=\"Awesome Angular logo\" width=\"750\" height=\"480\"><\/figure>","protected":false},"excerpt":{"rendered":"<p>Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with Angular on your own, you\u2019re on the right post. We have here some tools that can streamline your development workflow. We\u2019re looking at 15 of the best IDEs,&hellip;<\/p>\n","protected":false},"author":136,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[3313,2856,4117],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>15 Useful AngularJS Tools For Developers - Hongkiat<\/title>\n<meta name=\"description\" content=\"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with\" \/>\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.hongkiat.com\/blog\/angularjs-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"15 Useful AngularJS Tools For Developers\" \/>\n<meta property=\"og:description\" content=\"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-21T15:43:53+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-20T11:52:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg\" \/>\n<meta name=\"author\" content=\"Irfan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@IrfanFza\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Irfan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/\"},\"author\":{\"name\":\"Irfan\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\"},\"headline\":\"15 Useful AngularJS Tools For Developers\",\"datePublished\":\"2020-01-21T15:43:53+00:00\",\"dateModified\":\"2020-02-20T11:52:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/\"},\"wordCount\":1129,\"commentCount\":23,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-tools\\\/webstorm.jpg\",\"keywords\":[\"AngularJS\",\"Dev Tools\",\"Javascripts\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/\",\"name\":\"15 Useful AngularJS Tools For Developers - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-tools\\\/webstorm.jpg\",\"datePublished\":\"2020-01-21T15:43:53+00:00\",\"dateModified\":\"2020-02-20T11:52:00+00:00\",\"description\":\"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-tools\\\/webstorm.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/angularjs-tools\\\/webstorm.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/angularjs-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"15 Useful AngularJS Tools For Developers\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/483b1092b8017f37d977331e91935d8c\",\"name\":\"Irfan\",\"description\":\"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.\",\"sameAs\":[\"https:\\\/\\\/x.com\\\/IrfanFza\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/irfan_fauzii\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"15 Useful AngularJS Tools For Developers - Hongkiat","description":"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with","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.hongkiat.com\/blog\/angularjs-tools\/","og_locale":"en_US","og_type":"article","og_title":"15 Useful AngularJS Tools For Developers","og_description":"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with","og_url":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2020-01-21T15:43:53+00:00","article_modified_time":"2020-02-20T11:52:00+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg","type":"","width":"","height":""}],"author":"Irfan","twitter_card":"summary_large_image","twitter_creator":"@IrfanFza","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Irfan","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/"},"author":{"name":"Irfan","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c"},"headline":"15 Useful AngularJS Tools For Developers","datePublished":"2020-01-21T15:43:53+00:00","dateModified":"2020-02-20T11:52:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/"},"wordCount":1129,"commentCount":23,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg","keywords":["AngularJS","Dev Tools","Javascripts"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/","name":"15 Useful AngularJS Tools For Developers - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg","datePublished":"2020-01-21T15:43:53+00:00","dateModified":"2020-02-20T11:52:00+00:00","description":"Thinking of dipping your toes into Angular? If you have gone through our 10 best tutorials to learn AngularJS post and would like to play around with","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/angularjs-tools\/webstorm.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/angularjs-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"15 Useful AngularJS Tools For Developers"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/483b1092b8017f37d977331e91935d8c","name":"Irfan","description":"Irfan is a writer for hongkiat.com and tech enthusiast all-around. He also appreciates much on minimalist and clean design. Movie and football lovers and enjoy to travel around in his free time.","sameAs":["https:\/\/x.com\/IrfanFza"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/irfan_fauzii\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-61l","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/136"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=23147"}],"version-history":[{"count":4,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23147\/revisions"}],"predecessor-version":[{"id":49433,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/23147\/revisions\/49433"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=23147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=23147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=23147"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=23147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}