Progressive Web Apps with Angular

Learn how Angular.js works with Progressive Web Apps out of the box
Sergey Siminskiy's picture
Sergey Siminskiy
09 August

Hype.Codes continues to introduce the PWA to our readers.

Progressive Web Apps (PWA) was announced by Google in 2015. This format of creating mobile websites attracted attention due to the relative ease of development and almost instantaneous interaction with the user. As early as May 2016, at the Google I / O Developer Conference, The Washington Post demonstrated its mobile hybrid site-application.

What is PWA? You can perceive this as a site built using web technologies, but which interacts with the user as an application. The advances in the development of browsers, cache and Push-interfaces allowed installing the application on the home screen directly from the browser, receiving pop-up notifications and even working offline.

In this video, you will learn about the PWA features of Angular.

AngularJS is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications.

Angular is a platform for building apps with the web, and supports Progressive Web Apps out of the box. Learn how Angular's tools enable you to increase engagement with faster loads, offline access, and push notifications through progressive enhancement of your mobile web apps.

How to set "check" to a checkbox in jQuery?

Small jQuery tutorial on common issue with code examples
Sergey Siminskiy's picture
Sergey Siminskiy
21 August

Let's consider three options for different versions of jQuery.

jQuery 1.6+

Use the new .prop() method:

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x and below

The .prop() method is not available, so you need to use .attr().

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

Note that this is the approach used by jQuery's unit tests prior to version 1.6 and is preferable to using

$('.myCheckbox').removeAttr('checked');

since the latter will, if the box was initially checked, change the behaviour of a call to .reset() on any form that contains it - a subtle but probably unwelcome behaviour change.

Any version of jQuery

If you're working with just one element, you can always just modify the HTMLInputElement's .checked property:

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

The benefit to using the .prop() and .attr() methods instead of this is that they will operate on all matched elements.