Categories: AngularJS

Angular 7 is out (and what you missed in Angular 6)

Angular 7 has been out since October but some of us haven’t upgraded quite yet from Angular 6 (which brought a lot of nice things of its own, covered further down).

Let’s see what Angular 7 has in store for us!

Angular 7 Updates

reflect-metadata Automatically Removed for Production Builds

Angular 7 will automatically remove the polyfill reflect-metadata when compiling an Angular web app for production. It is apparently only needed for development/JIT mode.

The Angular team is saving us a bit of work by having the compilation step take care of this.

Budget Your JavaScript Compiled Bundle File

What’s cooler is that Angular 7 can display a warning when the JavaScript compiled bundle goes above a certain megabyte limit. It can display an error as well at a higher megabyte limit.

New projects will have a warning limit set to 2MB and an error limit set at 5MB.

Now you can watch the weight of your JavaScript bundles and ensure they are within limits. Users will appreciate the small and fast bundle download. Faster downloads means users can get to using your app sooner.

Virtual Scrolling

One thing that excited me about the swimlane/ngx-datatable library was that it included virtual scrolling. It enables scrolling of a list without creating every single element in the DOM. Only the elements that are visible to the user are displayed.

React and React Native also have virtual scrolling built-in. It’s great to see Angular 7 including this by default.

Angular 6 Updates

And if you missed it, Angular 6 added a few new things too.

Upgrade Packages with ng update

You can now use the ng update package command in the Angular CLI to upgrade Angular modules properly. By properly I mean that it will upgrade things like RxJS and TypeScript and other Angular framework dependencies to the latest versions based on the version of Angular that you are running. Makes it a bit easier to manage dependencies, and 3rd-party libraries and modules can hook into this too using something called schematics.

Add New Packages with ng add

Even cooler for me is that Angular is being proactive not only about updates to packages, but about adding them. When you install a package using ng add, an installation script can be executed! That means, for example, when you ng add @angular/pwa the Angular CLI will also create an app manifest file and a service worker file so that your PWA (Progressive Web App) is ready to go.

Angular Material Updates

Angular 6 had a lot of updates for the Material design package. They added “starter” components like the side navigation and dashboard. The side navigation contains a toolbar component and a list of menu items. The dashboard component displays a grid of card components for displaying various stats, as you are likely to do on an admin dashboard. Funny enough, since I mentioned swimlane/ngx-datatable, Angular 6 actually includes a data table component as part of the update to Material. It can show a table of data pulled in from a data source and comes with sorting and pagination.

Click here to read more about Angular 6 updates.

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

Protractor and Dropdowns: validation

Found a good article on how to test AngularJS with Protractor and dropdown menus: https://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

The issue with testing dropdowns in protractor is that you are relying on certain web browser behavior to work. In the article, there is code for how to test dropdowns properly.

Here is a snippet of the code distilled to its essence, the selection of the option elements using Protractor’s locators, clicking an option value and then validating a particular option has been chosen.

let dropdown = element(by.id('my-select-dropdown-element'));


// Clicking on the first option of the dropdown
let index = 0;
dropdown.all(by.tagName('option')).then(function(optionElements) {
  optionElements[index].click();
});

// Validating that the option has been selected
let expectedOption = 'first_option';
let checkedOptions = element(by.id('my-select-dropdown-element'))
  .all(by.tagName('option'))
  .filter(function(optionElement) {
    // Filter for checked items and that the exact option value was selected
    return optionElement.getAttribute('checked') == true
      && optionElement.getAttribute('value') == expectedOption;
  });
// Expect that the first option was selected
expect(checkedOptions.count()).toBe(1);






If you’re interested in Protractor for testing, you may also be interested in using Protractor to take screenshots of what you’re testing with Selenium.

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.