Categories: AngularJS

Top 15 Awesome Tutorials To Learn AngularJS

AngularJS 1.x is more stable and mature and while Angular 2+ has taken off, there are many projects still using AngularJS. It still makes sense for web developers to learn AngularJS. In a few years that may change, but for now, AngularJS 1.x is still a viable alternative to React, Angular 2+, Vue.js and Ember and other frontend web frameworks.

If you’re interested in other Angular and AngularJS resources, check out the Learning AngularJS page.

Here are the top 25 awesome tutorials to learn AngularJS:

1. The Official AngularJS Tutorial

In this tutorial provided by the team that developed AngularJS, you will learn how to create templates, components, and how to work with two-way data binding. Dependency injection is also introduced in the tutorial.

Read the official AngularJS tutorial.

2. Year of Moo: AngularJS Guide

In this guide from Year of Moo (which I’ve linked to before for their unit testing guide for AngularJS), you will learn how to create components and services and how models and directives work. It goes in depth on how modules are created within AngularJS for organization of projects.

Read the Year of Moo AngularJS Guide.

3. Beginning AngularJS in 7 days

While the website has a lot of ads, the information on it is very good and is a good beginner tutorial for AngularJS. It goes into specifics on how to use REST resources with the $resource module and how to make HTTP requests with $http. What I like are the sections on filtering and sorting tables and form validation, two common tasks in web frontends.

Learn AngularJS in 7 days.

4. Todd Motto’s AngularJS Guide

Todd Motto is one of the top AngularJS writers and developers. His complete guide to AngularJS is also a good reference when working on a project. It begins with an overview of engineering concepts in JavaScript frameworks, moves on to services and controllers and goes in-depth on routes and the $http and $resource modules.

Read Todd Motto’s Comprehensive Guide to AngularJS.

5. AngularJS: Getting Started (PluralSight)

The courses on PluralSight are all very high quality and easy to learn from. They even offer an AngularJS quiz so you can gauge what your own skill level. In this course they show you how to build controllers and directives. In particular it shows how to use the ng-click, ng-repeat, and ng-model directives.

Watch the AngularJS Getting Started video course on PluralSight.

6. Building a Mobile App with AngularJS 1.6 and Ionic

In the video course, they cover how to build a mobile web app that can be deployed for iOS and Android using the Ionic framework.

Watch the Building A Mobile App With AngularJS 1 and Ionic video course.

7. Creating a Quiz with AngularJS

Test yourself by building a quiz web app with AngularJS! Or just build the quiz app and learn how AngularJS works. What’s nice about this course is that it not only shows you how to build the components and controllers for the app, it also shows you how to style the app and how to move from one screen to another and to carry over data.

Watch the Creating a Quiz with AngularJS 1 course on Lynda.com.

8. Build a GMail clone with AngularJS

This is always fun, instead of a contrived project to build in order to learn AngularJS, you build a clone of an existing product. This was one of the best ways to teach game programming, making clones of popular games like Tetris or Super Mario World or Final Fantasy.

In the web development world, making a clone of Instagram (as I’ve done for Elm) or GMail with AngularJS as this course shows you, is an excellent way to learn a frontend web framework.

Read the tutorial to build a GMail clone with AngularJS.

9. Creating an app with AngularJS and Rails 4

In this tutorial, you learn how to create a Rails API that can be used with AngularJS. It shows you how to use the $http HTTP module to make requests to a backend server.

Read the beginners guide to a web app with AngularJS and Rails 4.

10. Hands-on AngularJS Tutorial

This tutorial shows you how to build an online movie booking app with AngularJS. There is a really good section on creating services.

Read the Hands-on AngularJS Tutorial.

11. Animate your site with AngularJS

Animations are important for a smooth user experience, and this tutorial explains how CSS3 animations can be used to enhance your AngularJS app. Specifically, it shows you which directives have built-in animation support. Then it ends with walking you through how to create custom animations with JavaScript.

Watch the Animate Your SIte With AngularJS video course.

12. How to create animations with ngAnimate [article]

This article embeds code snippets of AngularJS so you can see the code in action and modify it and learn from it. It shows you how to animate a list of items, and how to show and hide validation messages for form validation.

Read the How To Create Animations With ngAnimate article.

13. AngularJS Routing Using UI-Router

Routing in an SPA (single page application) is how a URL is translated into the right controller and view to display in the app. For example, a router determines how to route /hello to the HelloController and /world to the WorldController.

The UI Router is more advanced than the router included with AngularJS which makes it powerful enough to be the default for many AngularJS projects.

Read the AngularJS Routing Using UI-Router article.

14. Learn AngularJS 1.x Interactively

CodeAcademy has an interactive way to learn AngularJS where you are given the code for the tutorials, it is explained and you’re free to edit it. The course is nice because it has both free form projects and quizzes to test your knowledge of AngularJS.

Learn AngularJS interactively.

15. AngularJS Data Modeling

This is an intermediate video course that shows you how to use caching in your models, how to add validation and manage validation through sub-classes. It is a thorough course at 104 minutes and 13 lessons.

Watch the AngularJS Data Modeling video course.

Categories: Web Dev Training

3 Great Videos about GraphQL

Since GraphQL is a hot topic and a new way of creating APIs for client devices and applications, it helps to learn what it is, how it’s used and why it’s becoming quickly adopted for new projects. So here are 3 great videos on YouTube that explain why your team should explore GraphQL and consider it as a viable technology for your next project.

Lessons From 4 Years Of GraphQL

A reflection on GraphQL’s successes and its evolution within Facebook, the company at which it originated.

Connect Your Angular App To Any GraphQL Backend

At Facebook they use React (it was created there too!) but a lot of companies use AngularJS and now are adopting Angular 2/4/5+. This video shows you how to use it with an Angular app. Angular offers a more complete framework in contrast to React; so if you’re already using it, it’s definitely possible to use it with APIs such as GitHub.

Implementing & Using GraphQL at GitHub

GitHub started to use it for their API in 2016 and revealed it at their yearly event GitHub Universe. They show how they implemented part of the API and then show the client-facing portion through the query explorer. The query explorer is a powerful way to construct and test different API queries.

Home » Blog » angularjs
Categories: AngularJS, Web Dev Training

How to use Local Storage for Caching in AngularJS 1.6

After we talk about window.localStorage and caching, I discuss the state of the Angular web framework with respect to AngularJS 1.6 and Angular 2/4/5+.

Local Storage and Caching in AngularJS 1.6

Let’s get to the fun stuff, Local storage in AngularJS 1.6!

Window Local Storage is an HTML5 web api that can be used to store data in the browser. The data is stored in a bucket for the current domain name (click here to view the Storage API).

An awesome developer created the angular-local-storage module for AngularJS 1.6 which gives you a nice API to work with in AngularJS for local storage.

What’s cool about is that you can listen for notifications whenever the local storage has been changed (with setItem or removeItem). It also lets you set the storage to use local storage or session storage. Session storage is great for quick caching while local storage is more long-term.

AngularJS API for Local Storage

The API for angular-local-storage is easy to use:

  • isSupported – whether the browser supports local storage
  • setPrefix – prefix used when setting keys
  • getStorageType – the type of storage used
  • set – set a value
  • get – get a value
  • keys – the list of keys that have been set in local storage (very very convenient!)
  • remove – remove a value
  • clearAll – remove all values set
  • bind – binds a value from local storage to a variable in the $scope

The most important API functions for angular local storage are: set, get, and bind.

Here’s an example of how it’s used:

var myApp = angular.module('myApp', ['angular-local-storage']);
myApp.controller('HomeCtrl', ['$scope', 'localStorageService', 'someApiService', function($scope, localStorageService, someApiService) {
  
  function $onInit() {
    console.log('the keys! ' + localStorageService.join(', '));
    console.log('storing a value from an API call');
    someApiService.fetchValues(function(values) {
      localStorageService.set('valuesFetched', values);
    });
    localStorageService.set('formSubmitted', false);
  }

  function submitForm() {
    if (localStorageService.get('formSubmitted')) {
      console.log('form already submitted!');
    } else {
      localStorageService.set('formSubmitted', true);
    }
  }
}]);

In the example you can see that angular local storage is used to fetch values when the controller HomeCtrl is initialized with $onInit. After the value is fetched, we use the localStorage service to set the initial value for formSubmitted.

When the form is submitted through the submitForm method, we check the value of formSubmitted through localStorage and then set its value. The idea is to prevent resubmission of the form. Of course this is just for the frontend and it’s a good idea to check for resubmission on the server backend.

Angular local storage is simple to use and highly valuable as a cache for AngularJS web apps.

The State of Angular 2/4/5+

After the last year of keeping up with Angular 2/4/5+ development, it seems that they’re still gearing up. In my eyes, they have taken on a lot of work and have shifted the ground underneath developers quite a bit. The full adoption and support for TypeScript is welcome news, but there are still many development shops that will use JavaScript and ES6 with Babel. The documentation and examples do not seem to support JavaScript as much as they support TypeScript. This is also true for Dart, which is used by Google for one of the larger Angular projects, but even they cannot count on full support from the Angular team.

There’s also the rapid rate of change. Angular has an upgrade path however it is not fun to upgrade dependencies and change code every few months because the API of the framework has changed.

The state of Angular 2/4/5+ at this point is similar to the state of the Django web framework before it was version 1.0. Before 1.0 of Django, every single week seemed to bring new changes in the codebase. It was fun to be on the cutting edge and the latest and greatest but Django before 1.0 was not ready for production. This cycle is happening to Angular 2/4/5+. If you want to be on the cutting edge, use Angular and be careful when deploying and maintaining a production app.

When should you consider using Angular 2/4/5+?

If you are starting a new project, you should consider Angular 2/4/5+

If you want to develop a mobile app using Angular, use NativeScript with Angular 2./4/5+

If your web development team has at least 3 developers, consider using Angular 2/4/5+

When should you consider using AngularJS 1.6?

If you have an older AngularJS 1.x project, consider upgrading it to AngularJS 1.6 (don’t attempt a rewrite in Angular 2 until you do that!)

If your web development team has 1 to 3 developers, consider AngularJS 1.6 because you will find a lot of modules that have been production-ready and are well-tested. You will be able to ship the project into production and support it for years to come. As I pointed in the last Learning AngularJS issue about Siberian CMS, they are using AngularJS 1.3 for mobile apps and it still works just fine for them.

Thanks for reading!

Thanks for reading! If you’re still using AngularJS 1.6, don’t worry you are not alone, there are thousands of projects out there also using it and the modules are well-tested and production-ready! If you ever wanted to use local storage in AngularJS, now here’s your chance with angular-local-storage.

Click here to read more Learning AngularJS.

Categories: AngularJS, Web Dev Training

SiberianCMS: make amazing mobile AngularJS apps

SiberianCMS, a mobile AngularJS CMS, is a content management system. Much like Drupal or WordPress it is easy to manage a lot of content and to produce a mobile app.

Its most unique feature is that it makes mobile apps. The code will compile into a native Android or iOS/iPhone app with all of the content managed by the SiberianCMS backend. If you ever wanted to quickly create a mobile app, this might be the tool for you. I’m considering using it to lower the effort and cost required to create a mobile shopping app and to use it for hackathons.

Continue reading “SiberianCMS: make amazing mobile AngularJS apps”

Categories: Portfolio, Web Dev Training

Instagram clone in Elm

CodeMentor has published the first part of my tutorial on creating an Instagram clone in Elm. It covers how to create nested components and the basic life cycle and architecture of Elm frontend web apps.
I am seeing more power and usability in the Elm programming language and it has been great to compare it with how AngularJs, Ember.js and React & co. work. The performance is really quite something, the virtual dom is very cool and it is neat to see how the DOM changes in the developer tools of Chrome and Firefox.

What I love is the syntax which has sensible import and export module declarations, cleaner and almost completely optional type annotations (excellent type inference), all data structures are immutable by default, and the compilation speed is quick.

The frontend web development world has changed a lot in the last 5 years and it is wonderful to see developers using ES6 and Flow or TypeScript and realizing the value of type checking and of great tools like webpack.

The reason I am writing about Elm and exploring the language and its libraries is because it is so unlike the typical JavaScriot syntax and is much more integrated than the alternatives (such as React). The other reason is to see what ideas and design patterns can be brought back into the usual JavaScript development. That was why I explored Sweet.js which is a way to have compile-time macros that are modeled after Lisp integrated with JavaScript.

It is exciting to be a frontend web developer with all these good tools, frameworks and libraries.

click here to check out the first part of Building An Instagram Clone in Elm.

Categories: Portfolio, Software Development

React vs Elm: Creating a comment box component in Elm

I recently published an article on CodeMentor.io titled “Building a Facebook-like comment box: a React tutorial in Elm” where I use the Elm programming language to essentially duplicate the React.js tutorial.

Update: I conducted a webinar where we built an Instagram clone in Elm.

The article has code examples and a step-by-step on installing Elm, running the Elm Reactor and then writing the code for the comment box. There is no JavaScript involved aside from the JavaScript generated by the Elm compiler.

elm vs react tutorial on codementor by Rudolf Olah
Click above to read the Elm Tutorial on building a comment box just like Facebook’s

Comparing Elm to React for JavaScript Frontend Web Development

The article has a brief comparison between React and Elm. It explains why you would want to use Elm for building your JavaScript frontend:

While the performance of React is awesome, at a certain point, you will notice that having React just isn’t enough.

You’ll also want Redux, Flux, or some other data flow library installed.

You will want Webpack and Babel installed so that you can use the latest features of ES6 (also known as EMCAScript 2016).

Then you’ll probably want to add type-checking and static types at that point, so you will also need to install Flow, a JavaScript type-checker.

Elm will give all the goodies that React, Redux/Flux, and Flow give you but as a collective programming language rather than as individual libraries.

Essentially, Elm is a functional language with the framework built in for solid frontend web development, it compiles to JavaScript. It’s similar to TypeScript in that respect, however Elm goes much further because it has its own syntax for better type-checking and compilation.

Also, instead of having to find individual tools, everything that you need to create fast components and single page applications come with Elm. It’s a batteries-included language. It comes with a REPL (command line interface). The Elm-Reactor included with it will reload any changes you have made to an Elm file. With all these elements, it is the perfect language for rapid frontend web development. You can learn Elm quickly, and learn to quickly build, test, and refactor Elm components in a way that can’t be replicated by tools like TypeScript or ES6 or React or Angular.

Compare React and Angular To Elm

So while React is great for creating web components, when we compare it to Elm, it can be hard to get started because it requires a bit more infrastructure around it (with Babel, Webpack, Flow, TypeScript, etc.) to really get started on developing a production-ready web application.

Note: React isn’t the only JavaScript framework/language/library to suffer from this, Angular also has a problem with setting up infrastructure (as do other JavaScript libraries). This is probably why React killing Angular in the JavaScript web framework wars is not so far-fetched. You can learn React and Angular fairly easily for the simple tasks. However, when projects become complex, the infrastructure starts to get in the way and it can be hard to learn how to debug the issues. It may be possible that if you compare other JavaScript frameworks like Vue.js to Elm, you will find they have better infrastructure and a good developer feedback loop.

Updated: Instagram Clone Article Published

It’s one of the first pieces of code I’ve written in Elm. I have been working on two other projects; one is an Instagram-clone, which I did an “office hours” live coding session for on CodeMentor.io.

The instagram code is neat because you can see how quickly you can write up a grid layout. You can see how to work with modals/pop-ups and how to manage state within an app. You can check out the code for the instagram clone here. The instagram clone is licensed under the Apache license 2.0.

Event Creation Tool written in Elm

The event creation tool for an event ticket sales page is cool. It explores more state management in the context of an app. For example there’s a way to switch the type of event you’re creating in the app. When you switch, an explanation page appears in between to give you guidance on how to create the different type of event that you just switched to. the event creator web app is licensed under the AGPL. You can check out the code for the event creation page for an event ticket sales website is here.

More Articles On Elm

I will be publishing another article on Elm (update: it has been published) very soon that is a continuation of the Instagram-clone code. It will include an API server to show how to use HTTP and AJAX calls. Furthermore, it will show you how to embed and fullscreen a component. This is vital if you want to use Elm today in an existing project and integrate components in a piecemeal fashion.

2017 UPDATE

instagram clone in elmUPDATE: The 2-part article on creating an Instagram clone in Elm (instaelm) has been posted on Codementor:

 

Categories: AngularJS, Portfolio, Software Development

Forget React, Learn AngularJS 2.0 with this video tutorial!

In the last few weeks I’ve been busy preparing AngularJS 2 courses and I’m really excited about the first video tutorial that NeverFriday Software Expertise is releasing.

1

In this tutorial you learn how to create an AngularJS 2.x project and how to create a comment box directive component. In the React tutorial, they show you how to create a comment box just like on Facebook so I thought, why not show how easily it can be done in AnagularJS 2?

And let me tell you, it was really easy. AngularJS 2 has all the same features you liked in AngularJS but it has a better structure and better modularity. I just made a giant list of differences between Angular 2 vs 1.

Learn AngularJS 2 and create a cool component in less than 30 minutes. Click here to buy the video (prices go up in November so buy it now!)

 

Categories: Portfolio

gcal-invoice/MountainView Invoice coding update

So I shared gcal-invoice/MountainView Invoice with a few people and they looked at the code and thought it was pretty good and I realized that I’ve neglected the project for too long because it wasn’t even possible to hit a running copy of the web app. So yesterday I spent the day getting JSCS, JShint added, the unit tests passing and documenting the setup/install process for the project.

What’s been done

This is what’s been done for the project:

  • fixing unit tests, adding some mocks/spies/stubs using Sinon for googleCalendar module, testing selectCalendarAndFilterEvents (which is one of the main parts of the app)
  • getting the unit tests to run with PhantomJS rather than Firefox
  • measuring code coverage with karma-coverage
  • integration with Codacy to check for code issues and automated code review
  • integration with Codacy for code coverage using node-codacy-coverage
  • fixing style of JavaScript code and unit tests to match Google’s JavaScript style guide (using JSCS for the style checking)
  • cleaned up a few small issues that JSHint caught
  • making the app webserver work with Cloud9 (using environment variables for binding the hostname/port rather than hard-coding the values)
  • getting the Gruntfile updated to run jshint, jscs, codacy
  • locking down some dependency version numbers
  • TravisCI integration

What is it?

MountainView Invoice is an AngularJS web app that lets you login to Google Calendar and select a bunch of events, enter an hourly rate, enter any other fees/discounts and gives you a nice daily table with the total, perfect for an invoice. I needed it while I was consulting because there were some days where I worked in 1.5-3 hour blocks, I had a few half hour blocks too and it was such a pain to go through them.

I didn’t feel the need for a time-tracker like Harvest because that’s too task and minute specific. I wanted the clients to look at how much value was delivered in the day rather than having them focus on minute-by-minute tasks. High-level view vs low-level details.

So anyway, it’s hard to up 1.5 + 3 + 0.5 + 0.5 + 0.75 + 1.5 + … for every day in a week for months was getting to be a pain big enough that it could use some automation.

With MountainView Invoice I would just select all the events in bi-weekly chunks, copy/paste the table of hours per day worked into an invoice. Then send it off to the client. Much faster and after double-checking the calculations manually and checking them with unit tests I was confident that I could just breeze through invoice creation.

Very important note: the code is licensed under the GNU GPL (General Public License) version 3 or later. I was considering making it AGPL and may do so if I continue to work on it.

Categories: AngularJS, Software Development

Screenshots with Selenium WebDriver

Here we learn to use Protractor with Selenium WebDriver providing the functionality to take screenshots.

Update: Andrew Batz has kindly put together an NPM-installable package with the code in this article. Click here to check it out or download it using npm install screenshot-protractor

As I work with SPAs (Single Page Applications) it becomes more obvious that some parts of a web app can only be inspected visually. As part of an end2end test or user acceptance testing, manually checking screenshots is still faster than manual testing. Screenshots at different steps of a process can be put together into a presentation or PDF and presented to clients or other stakeholders to show them that not only is the backend code working, but the frontend looks and feels right.

So here’s a snippet for taking a screenshot with Protractor, which is designed for AngularJS, and an end2end test that uses Jasmine and Protractor:

https://gist.github.com/rudolfolah/60b03873977551bcf68b

When to take screenshots during an end2end test:

  • to inspect the layout/styling
  • to inspect how the site looks across multiple browsers
  • to verify with client/stakeholders that we’re building the right thing
  • to share with other developers when debugging an issue
Categories: Software Development

Emacs angularjs-mode v1.0 release!

I’ve finally had some time to upgrade Emacs angularjs-mode with some expandable code snippets (thanks to YA Snippets) and added auto-complete mode dictionaries.

What I’ve found a pain when coding AngularJS is that you really need your environment setup well for it before you can get a lot done with it. Having angularjs’s javascript files installed, a basic index.html, a Gruntfile, a Karma and Protractor configuration saves a lot of time. But even with a basic project structure, you still need to be faster when writing new controllers, directives and services. Auto-complete-mode and snippets can help with that.

All of the top-level definitions in the AngularJS API are included in the auto-complete dictionaries. The dictionary for angular-html-mode contains all the common directives.

Use Emacs angularjs-mode for faster angularjs coding! Now with 100% more auto-complete and snippets!