{"id":354,"date":"2015-03-01T07:17:01","date_gmt":"2015-03-01T01:47:01","guid":{"rendered":"http:\/\/code.ciphertrick.com\/?p=354"},"modified":"2024-10-03T11:21:03","modified_gmt":"2024-10-03T11:21:03","slug":"cool-angularjs-libraries","status":"publish","type":"post","link":"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/","title":{"rendered":"Cool AngularJS libraries"},"content":{"rendered":"<p>Angular Js is slowly becoming the top framework of choice for JavaScript applications.The fact that it is developed and maintained by Google makes it awesome.Oh, and yes there are lots of libraries built for angular js that makes this framework even more awesome.Below are few of them.<\/p>\n<blockquote><p>Blog was last updated on April 14th 2015 &#8211; Added Ionic to the list<\/p><\/blockquote>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Ionic_Advanced_HTML5_Hybrid_Mobile_App_framework\" >Ionic: Advanced HTML5 Hybrid Mobile App framework<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Angular_Strap\" >Angular Strap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Angular_Ui-bootstrap\" >Angular Ui-bootstrap<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#UI-router\" >UI-router<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Angular_Loading_Bar\" >Angular Loading Bar<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Angular_Growl-2\" >Angular Growl-2<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Angular_Formly\" >Angular Formly<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#dirPaginate\" >dirPaginate<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#UI-Grid\" >UI-Grid<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/thrivemyway.com\/cool-angularjs-libraries\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h3><span class=\"ez-toc-section\" id=\"Ionic_Advanced_HTML5_Hybrid_Mobile_App_framework\"><\/span>Ionic: Advanced HTML5 Hybrid Mobile App framework<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ionic is an opensource library of HTML, CSS and JS components, optimized for mobile, to create hybrid mobile apps.<br \/>\nIonic utilizes Angular, creating a powerful SDK to build rich and responsive browser based applications.<br \/>\nIonic is a HTML5-Angular framework and hence uses Apache Cordova to utilize device APIs and run web app as a native mobile app.<br \/>\nThis is the perfect framework for Angularjs developers looking for building hybrid mobile apps. Also the plans for Angular 2.0 support are already in place.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"http:\/\/ionicframework.com\/\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">Try It<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular_Strap\"><\/span>Angular Strap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Angular strap provides a set of directives that allows you to use web components such as modal,popovers etc provided by bootstrap into your angular js application.<br \/>\nIt has no external dependency expect the bootstrap css.<br \/>\nIt also provides good range of animations using ngAnimate such as fade,slide,flip etc.<br \/>\nOne of the must try modules if your UI has a stack of angular js and bootstrap css.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/mgcrea\/angular-strap\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular_Ui-bootstrap\"><\/span>Angular Ui-bootstrap<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Similar to angular-strap. Provides a set of bootstrap components in pure angular js, no dependency on bootstrap javascript and jquery .<br \/>\nDevelopers have an option of choosing any of the two between angular Ui-bootstrap or Angular strap.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/angular-ui\/bootstrap\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"UI-router\"><\/span>UI-router<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lets face it, the official router provided by angular js is good for building simple application but lacks features when the applications are&nbsp;big and complex.UI-router is a powerful routing library which turns your application into a state machine. UI- router provides states which are bound to views.Unlike the ngRoute module ,Ui-router allows you to have parallel as well as nested views.<br \/>\nThese states may or may not have routes.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/angular-ui\/ui-router\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular_Loading_Bar\"><\/span>Angular Loading Bar<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>As the name suggests, this provides a loading bar at the top of the screen, similar to the one you might have seen on you-tube.<\/p>\n<p>What makes this library standout from others is that this is completely automatic. You only have to include the js and css files and inject the dependency and the loading bar will show in your next $http call.It also provides various configurable options.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/chieffancypants\/angular-loading-bar\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular_Growl-2\"><\/span>Angular Growl-2<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This library provides a convenient and clean way to display alert messages or notifications for your angular application.<\/p>\n<p>It also provides lots of configurable options.Uses standard bootstrap alert classes.Notifications can be displayed inline or globally.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/JanStevens\/angular-growl-2\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a>&nbsp;&nbsp;Tutorial<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Angular_Formly\"><\/span>Angular Formly<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This is one of the awesome module out there , which allows us to render JavaScript forms .In simple terms is allows us to generate forms dynamically using JavaScript objects.Angular-formly makes your forms more manageable and reusable.A must use library when your application involves lots of forms.<\/p>\n<p>Further more it comes with pre built templates, but the user my opt to build their own custom templates and use them.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/formly-js\/angular-formly\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"dirPaginate\"><\/span>dirPaginate<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Pagination is an important part of any application which displays list of items, you can not let your users to a never ending scroll.That would be just bad. dirPaginate is not the only option available for pagination but its simplicity of use makes it stand out. Using this you don&#8217;t need any logic in your controller just add an attribute and your navigation and it works.<\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/michaelbromley\/angularUtils\/tree\/master\/src\/directives\/pagination\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"UI-Grid\"><\/span>UI-Grid<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>This is a massive library that provides almost all features that you would need to implement on your grid system viz : Sorting,searching,pagination and much more. UI-grid is rebuilt on ng-grid and is currently in beta stage.Requires no other dependency other than angular js.<br \/>\nExplore more on UI-grid <a href=\"http:\/\/ui-grid.info\/\" target=\"_blank\" rel=\"noopener\">here<\/a><\/p>\n<p style=\"text-align: center;\"><a class=\"fasc-button fasc-size-large fasc-type-popout fasc-ico-before dashicons-welcome-view-site\" style=\"background-color: #1fa67a; color: #ffffff;\" href=\"https:\/\/github.com\/angular-ui\/ng-grid\" target=\"_blank\" data-fasc-style=\"background-color:#1fa67a;color:#ffffff;\" rel=\"noopener\">View on Github<\/a><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>These were some of the libraries based on my personal choice but I&#8217;m sure there are a lot more out there.<br \/>\nPlease mention in the comments below if you have any based on your experience in angular js.I will check them out and add them in this post.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Angular Js is slowly becoming the top framework of choice for JavaScript applications.The fact that it is developed and maintained [&hellip;]<\/p>\n","protected":false},"author":3000066,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"image","meta":{"_acf_changed":false,"footnotes":""},"categories":[3001981,3001974],"tags":[],"class_list":["post-354","post","type-post","status-publish","format-image","hentry","category-angular-js","category-javascript","post_format-post-format-image"],"acf":[],"_links":{"self":[{"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/posts\/354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/users\/3000066"}],"replies":[{"embeddable":true,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/comments?post=354"}],"version-history":[{"count":1,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/posts\/354\/revisions"}],"predecessor-version":[{"id":3035539,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/posts\/354\/revisions\/3035539"}],"wp:attachment":[{"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/media?parent=354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/categories?post=354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thrivemyway.com\/wp-json\/wp\/v2\/tags?post=354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}