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: Portfolio, Software Development

Speaking at PyCon Canada 2017 on “Python as a Philosophy”

I’m going to be in Montreal this weekend for PyCon Canada to give a talk on “Python as a Philosophy”. It will explore some of the ideas that are part of Python, built into its core and affect its community and how those ideas have spread to other software and software developers:

A number of programming languages that have not been used quite as frequently as others contain “profound enlightenment” that a developer learns through their use. Languages such as Lisp and Smalltalk are in this category. This presentation suggests that Python is also one of those languages. Python and PEP20 The Zen Of Python can affect how a developer writes code and then translates their practice into using other programming languages. For example, my own hands-on programming in Python has allowed me to carry on a number of practices into JavaScript and Ruby. The talk will specifically cover “explicit rather than implicit” code and the value of documentation as a developer-user experience. I will outline several examples and counter-examples of Python-inspired code practices within the context of JavaScript and Ruby.

Update: slides for the presentation are up.

https://speakerdeck.com/omouse/python-as-a-philosophy

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: 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!

Categories: AngularJS, Web Dev Training

Unit Testing in AngularJS

The modern way of development is to build and deliver web apps that include automated unit test suites. These automated tests exercise your web app to make sure that it works and doesn’t have any bugs. Tests give you the confident to say to your client or project manager or customer, yes we have the right features and yes they all work.

“Test-driven development is a set of techniques that any software engineer can follow, which encourages simple design and test suites that inspire confidence…following these two simple rules can lead us to work much more closely to our potential.

  • Write a failing automated test before you write any code.
  • Remove duplication.”

Kent Beck, Test Driven Development

Unit Tests

Unit testing is essential and of course, AngularJS lets you do some unit testing. In fact, it was built from the ground-up to co-operate with unit testing by using dependency injection.

One of the better tutorials on fully testing your AngularJS app is Full-Spectrum Testing With AngularJS and Karma.

To begin unit testing AngularJS, you need the following:

  • Karma test runner
  • Jasmine or Mocha/Chai test frameworks
  • Sinon for mocking/spies/stubs

The Karma test runner will run whatever tests you have. The Jasmine test framework lets you define tests and has assertions (such as myValue.is.expected.toBe(3)). Personally, I prefer the Mocha framework since it only defines tests, and lets you use whatever assertion library you want to use such as Chai, it also has lots of nice features.

A classic on unit testing is Test Driven Development: By Example, it’s by Kent Beck who was one of the founders of the Extreme Programming movement.

Mocking Dependencies for Integration and Unit Testing AngularJS

Sometimes when you’re writing a test, you want to make sure that your service or provider is making the right calls to another service. The way to do this is with mocks. Mocks are fake objects that keep track of which methods were called on them.

Mocks are not essential for writing tests, but there are cases where they do help. When you’re writing a controller that connects to your web app’s REST API, you want to make sure that it calls methodX and methodY. By creating a mock service and registering it with AngularJS, you can write a unit test that makes sure those two methods have been called. When using external 3rd party REST APIs, you may want to mock the $httpBackend to make sure the right calls are being made and the correct responses are returned.

Sinon is valuable for defining mocks. It lets you create method stubs and it lets you spy on method calls.

ng-modules

Find more modules on ngmodules.org

News

AngularJS Meetups

Categories: AngularJS, Web Dev Training

AngularJS Books

Today we’re covering some AngularJS books that can get you started on your path to learning how to design single-page web applications using AngularJS. While the code examples in books can sometimes become outdated, books are still valuable because they go over and explain the major concepts (directives, services, factories, unit testing, etc.) that you need when developing an AngularJS web app.

The guides on the AngularJS website are good starting points but I find that a book can go into much more detail and provide more examples that fully explore each area of the AngularJS framework. Physical books also serve as a nice break from the screen and when written well, they let you mentally figure out what the code examples will do.

“[Mastering Web Application Development with AngularJS] definitely helps a beginner and serves as a handy reference for the experienced developer. Despite having done some work on AngularJS after reading a book and online courses, this book still provided me with so much information […] that I feel I should have picked up this material first.”

— Arun Mahendrakar, 5-star review of Mastering Web Application Development with AngularJS, amazon.com

AngularJS Books

Pro AngularJS

Pro AngularJS - Apress book cover
Pro AngularJS – Apress

This book was recently published and has up-to-date code examples. It’s a heavy book and covers everything: directives, services, controllers. It has a nice dedicated section for defining AngularJS services and providers. It’s fantastic.

Here’s an excerpt from Chapter 9 – The Anatomy of an AngularJS App describing dependency injection:

“The place to start is to understand the problem DI sets out to solve. Some of the components in an AngularJS application will depend on others. In Listing 9-4, my controller needs to use the $scope component, which allows it to pass data to the view. This is an example of a dependency — my controller depends on the $scope component to perform its work.

Dependency injection simplifies the process of dealing with dependencies — known as resolving a dependency — between components. Without DI, I would have to locate $scope myself somehow, probably using global variables. It would work, but it wouldn’t be as simple as the AngularJS technique.

A component in an AngularJS application declares its dependencies by defining arguments on its factory function whose names match the components it depends on.”

As you can see, the explanation is quite clear, perfect for anyone new to AngularJS.

Buy Pro AngularJS now

Mastering Web Application Development with AngularJS

Mastering Web Application Development with AngularJS - Packt Publishing book cover
Mastering Web Application Development with AngularJS

This book gives a great overview and walkthrough of major concepts. One thing that’s impressive is that the book has unit tests for every example. Write out the code, write the unit test and run it and you can see exactly what’s going to happen.

You can click here to see an excerpt of Chapter 5 – Creating Advanced Forms.

What I really like about this book, aside from the extensive unit tests/examples, are the easy to understand explanations of core AngularJS concepts. For example, the $digest cycle and when you need to use the $apply method on scopes. If you understand them, you can improve the performance of your web app and you can avoid common mistakes.

Here’s an excerpt from Chapter 11 – Writing Robust AngularJS Web Applications, page 294:

“The idea behind AngularJS model-changes tracking mechanism is based on the observation that at the end of the day, there is a finte (and rather small) number of situations where models can change. Those include:

  • DOM events (user changing value of an input field, clicking on a button to invoke a JavaScript function and so on)
  • XHR responses firing callbacks
  • Browser’s location changes
  • Timers (setTimeout, setInterval) firing the callbacks

Indeed if none of the earlier events take place (user is not interacting with a page, no XHR calls have finished, no timers firing) there is no point in monitoring the model for changes. There is simply nothing going on for a given page, the model isn’t changing, so there is no reason to re-render the DOM.

AngularJS starts its model-observing machinery if and only if it is explicitly told to do so. To bring this sophisticated mechanism to life, we need to execute the $apply method on a scope object.”

As you can see, the explanation is clear and the book is full of gems like this.
Buy Mastering Web Application Development with AngularJS now

AngularJS (O’Reilly)

AngularJS - O'Reilly book cover
AngularJS – O’Reilly

Here’s an example of a good book that has outdated code examples. I would recommend getting this as a reference. This book is a solid reference that explains the major concepts so that you can apply them on your own.

You can click here to download a free sampler of O’Reilly AngularJS – Chapter 1.

I hope that they release a 2nd edition of the book with updated examples because O’Reilly books are usually pretty good.

Buy it now

Other AngularJS Books…

ng-modules

  • ux-datagrid: a highly performant list and data grid, designed for mobile devices.
  • restangular: service that makes creating proper REST APIs easy.
  • angular-translate: add multiple languages and translation to your app.
  • angularfire: use this library to interact with your Firebase backend database.

Find more modules on ngmodules.org

News

  • AngularJS support in PhpStorm: autocomplete, custom directives, refactoring, routing and URL template support are now in JetBrains’ wonderful IDE, PhpStorm.
  • AngularJS 2.0: implementation of the next major version is beginning, mobile-first and using ES6 (ECMAScript 6). More modularity is planned and a less complex dependency injection system is being designed.

AngularJS Meetups

Categories: AngularJS, Software Development

Top 3 Influential AngularJS Bloggers

Today we’re looking at the top three AngularJS bloggers. They’ve been writing a lot of tutorials, how-tos and all sorts of guides to make it easier for the rest of us to solve our problems with AngularJS. What I appreciate about these AngularJS bloggers is that they are not afraid to do a deep-dive and explain the inner workings of Angular to increase performance and to increase our understanding of the framework.

UPDATE: I forgot someone!

Ben Nadel

Ben Nadel has been writing AngularJS articles for…since forever (2012) it looks like and in great depth too. He wrote a good article covering performance of $scope.evalAsync and even wrote his own replacement for $resource/ngResource called httpi.

AngularJS Bloggers

1. Todd Motto

A developer at Google working with AngularJS every day it seems, Todd Motto is writing quite a bit on Angular and JavaScript in general. His opinionated AngularJS style guide for teams was popular on reddit and hacker news and has inspired AngularJS devs to think about writing their own style guides based off of his style guide.

He also has a nice article on creating an AngularJS directive from one of your existing plugins/scripts.

2. Year of Moo

They don’t post articles about AngularJS often but when they do, they’re full-on guides that cover a lot and contain many useful ideas.

One of their most popular articles is about unit testing, end2end testing and midway/integration testing with AngularJS. This article is the standard reference that is linked to everywhere whenever unit testing in AngularJS is discussed.

3. Misko Hevery

The father of AngularJS posts non-stop on Twitter about Angular and how it works with Dart, Google’s JavaScript-based language. He re-tweets many great articles that can help you when developing AngularJS apps, and he has over 10,000 followers.

More Places To Get Your AngularJS Fix!

Overall it’s hard to find out who’s the most influential, there are more and more people checking out AngularJS every day and it’s a decentralized community, you can find great information in all sorts of places.

If you’re learning AngularJS or becoming a master, check out the Learning AngularJS newsletter.

If you want to keep up with AngularJS bloggers and the latest news in the AngularJS community, check out ng-newsletter.

Categories: Linux, Software Development

PHPUnit Essentials Book Review

PHPUnit Essentials would have come in handy while on a recent contracting gig and on all the other PHP projects I’ve worked on. The book is published by Packt Publishing, the last book I bought from them was on AngularJS and it was a great guide whereas as the O’Reilly book on AngularJS was outdated.

Overall the book was a good read and it’s worth getting as both a guide and a reference.
Continue reading “PHPUnit Essentials Book Review”