Since its release in 2009, AngularJS has gained immense popularity due to the compelling features it’s packed with. Being an extremely advanced JavaScript MVW framework, not only does it enhance HTML with Directives; but it also simplifies both development and testing for developers.
For some people, it seems quite difficult to learn Angular through the official documentation provided. Attempting to gain knowledge of Angular, they repeatedly search for related resources and often don’t get satisfied with the results they get from search engines.
If you’re one of them, don’t worry. In this blog post, I’ve arranged a golden collection of 20 resources (tools, eBooks and frameworks) to help you become an expert in AngularJS.
Let’s master AngularJS with these 20 useful resources!
Tools
Karma
Karma is an open-source test runner developed to let developers test and debug their AngularJS applications on multiple devices and browsers. With Karma, you just need to include the browsers that you wish to capture in the configuration file and then, it will automatically open specified browsers to run all types of tests, including E2E, Unit and Midway. Even though it’s made for Angular, it also plays well with other JavaScript frameworks.
Jasmine
Jasmine is a DOM-less JavaScript testing framework used for Behavior Driven Development (BDD). It doesn’t rely on any JavaScript framework, nor on any browser. Usually coupled with Karma as testing framework, Jasmine inspects all the classes, variables and functions in the JavaScript code and notifies you of errors.
Protractor
Protractor, built on top of WebDriverJS, is a powerful automated end-to-end (E2E) test framework developed by the Angular team. With support for Angular-specific locator strategies, it lets you run tests against Angular-specific elements with no extra effort on your part. By taking advantage of browser-specific drivers and native events, Protractor interacts with your AngularJS apps just like a real user.
MochaJS
MochaJS is a user-friendly, flexible, and feature-rich JavaScript test framework built to make asynchronous testing simpler than ever. It runs on Node.js, has browser support and allows you to use any assertion library like should.js, expect.js, better-assert and Chai. Also, you can configure MochaJS with a mock/stub/spy framework such as Sinon.js.
Angular Batarang
Angular Batarang, developed by the Angular team, is a Chrome extension for debugging and profiling AngularJS code. It shows up in Chrome DevTools, inspects your AngularJS application, and displays debugging results in 3 different tabs: models, performance and dependencies. Also, you have full control over the inspection; you can decide what to show: applications, scopes or bindings.
Angular Kickstart
Angular Kickstart, based on Gulpjs, is a smart, complete and scalable build system developed to kick-start your AngularJS development and testing. To help you keep your project code organized, it ships with a by-feature files organization. It combines Gulpjs, Bower, and AngularJS together, while also supporting Unit testing (using Karma) and E2E testing (through Protractor).
Ng-Inspector
Ng-Inspector is an extension for Safari and Chrome which includes an inspector panel showing whole scope hierarchy along with associated controllers or directives in real time. As you mouse-over a scope in the inspector, the DOM elements attached to that scope get highlight. On the other hand, clicking on a model would console.log its values. Once the extension is installed, a button with the Angular logo is added next to browser’s address bar using which you can toggle the pane on and off.
Rectangular
Rectangular is a popular service that helps AngularJS developers easily use common get, update, delete and post data requests with the least amount of client-side code possible. It’s most suitable for web applications consuming data through a RESTful API. Some key features that makes Restangular different from $resource are use of promises, support for self-linking elements, all HTTP methods and nested RESTful resources.
Djangular
Djangular is a reusable app built to make app integration with AngularJS easier and better. By allowing you to both include and namespace AngularJS content per app, it saves you the trouble of building a single big application inside of Django, a popular Python-based web framework. Thus, you can selectively make use of apps on a per-site basis.
Generator Angular
Generator Angular is a handy code generator developed by Yeoman. This tool provides you with several terminal commands to boost your AngularJS development. With a single line of code, it generates all the boilerplate needed for you to get started. A lot of things, including directives, views, controllers, filters, constants, and decorators etc. , can be generated with this amazing tool.
eBooks
AngularJS in 60 Minutes
This eBook carries the transcription of the amazing video tutorial, titled AngularJS Fundamentals in 60-ish Minutes, which was published by Dan Wahlin in April 2013. Containing more than 100 pages, this eBook walks you through all of the key fundamentals of AngularJS with appropriate screenshots and the timestamp of when a topic appears in the original video. This eBook would prove to be a great starting point for whose are totally new to AngularJS.
A Better Way to Learn AngularJS
A Better Way to Learn AngularJS is a 13-part course that exposes you to the best learning materials available from multiple sources like videos, books, AngularJS documentation, and plenty of videos/screencasts by Egghead. The main purpose of this course is to simplify complex SPA development by providing high quality content on each of the key Angular concepts.
AngularJS Succinctly
AngularJS Succinctly, written by Frederik Dietz, outlines a variety of problems and their solutions for developers through 10 detailed chapters. Whether you’re an expert searching for a reference guide, or novice thinking to get started with Angular, the eBook gives you complete idea of how to overcome any challenge while using Angular.js.
Practical AngularJS
Practical AngularJS by Dinis Cruz introduces you to real-world examples of building applications with AngularJS in various platforms and scenarios like Eclipse, WebStorm, KarmaJS, O2 Platform, and Firebase. This book is indeed a collection of blog posts published on Dinis Cruz’s blog. As of now, it’s 70% complete and available to read online for free.
Recipes with AngularJS
Recipes with AngularJS is another book on Angular written by Frederik Dietz. Unlike AngularJS Succinctly, Recipes is a comprehensive cookbook of sorts that provides quick and easy to follow recipes for challenges you often face while working with Angular. Each recipe in the book has an efficient solution with in-depth discussion for a specific problem. You can read Recipes online for free here.
Frameworks
Ionic
Ionic is a popular and widely-used framework that developers use for creating rich and robust mobile applications. Each component in this framework is mobile-optimized to make your development fun and fast. Built to work perfectly with AngularJS, Ionic helps developers quickly build highly interactive apps using the Creator, a WYSIWYG editor.
Supersonic
Supersonic by AppGyver is a simple yet powerful UI framework designed to make building complex apps with AngularJS a breeze. On the UI side, it’s an Ionic fork that ensures the real native performance of an app. Although Supersonic is optimized to work great with Angular but being built on open-web standards, it can also be used with any other JavaScript framework.
Mobile Angular UI
Mobile Angular UI is a framework that comes with all-important mobile components, such as sidebars, switches, scrollable areas and overlays etc, which are not available in Bootstrap 3. It totally depends on AngularJS and utilizes most of the syntax from Bootstrap. A superiorly small CSS file is also provided so that your web apps could be responsive and have support for touch devices.
UI Grid
UI Grid, as the name itself implies, provides developers the best way to work with grid or table in Angular. It comes with three pre-built templates — default, autumn and sky — that you can easily customize using the Grid Customizer. Its drop-in plug-in architecture lets you execute only the features you need. Its standard features include filtering, sorting and user interaction, while advanced features are virtualization, grouping, column pinning, and more.
LumX
LumX is a responsive framework made with Google’s Material Design specifications in mind. Built with Sass, Neat and Bourbon, LumX lets you quickly customize the design of your application. With the help of Gulp, it automatically optimizes your Sass and JavaScript files to boost the performance of your application.
