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!
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.
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, 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 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 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 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 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.
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, 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 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.
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.
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, 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.