Your Choice JavaScript News

Angular News Monday, December 18

Angular News TLDR / Table of Contents

  • Creating PWA with Angular 5. Part 2: Progressifying the application
    • This is the continuation of my previous article, where we’ve created our first Angular 5 application. And I hope everybody has a successfully hosted project on github-pages. But if you’re just…
    • app, Service Worker, app shell, Web App Manifest, app browser tab
  • Understanding Dynamic Scoping and TemplateRef · Minko Gechev’s blog
    • Articles about computer science, Angular, JavaScript, and compilers.
    • block lexical scope, template directives, custom template directives, different template, template variables
  • Identity Server: Upgrade Client to Angular 5 – Eric L. Anderson
    • I have been working a lot on my basics sample project to explore some new client-side frameworks (React and Vue if you are interested). Since I have been away from the Identity Server sample for a while I thought it would be good to see what updates the project might need. It…
    • following version, Angular CLI, new client-side frameworks, Identity Server sample, basics sample project
  • How I stopped loving Angular – codeburst
    • I have worked with AngularJS for many years now and still use it in production today. Even though you can’t call it ideal, given its historically-formed architecture, nobody would argue that it…
    • Angular, new HtmlTagDefinition, new Angular, Angular team, Angular Material
  • Comparison with Other Frameworks — Vue.js
    • Vue.js – The Progressive JavaScript Framework
    • Vue, Vue developers, valid Vue template, Vue component syntax, Vue share
  • The Official Microsoft ASP.NET Site
    • Home of the Microsoft ASP.NET development community. Download Visual Studio, post to the forums, read ASP.NET blogs and learn about ASP.NET.
    • ASP.NET Core, core web, Start learning ASP.NET, ASP.NET Core application, ASP.NET team
  • How to Really Screw Up an Angular Project
    • We all know about best practices.  But what does it take to really mess up a project?  Well, for starters, you do EVERYTHING wrong.  You don’t just ignore one or two best practices, you ignore them all.  By evaluating the… #angularjs
    • Angular Project, Stacktrender,
  • 14 Free Angular JS Books
    • 14 free Angular JS books. Download (.pdf) and read online.
    • angular js books, free angular js, plow, Free Frontend, Search PLOW

Score: 21500
Tweeted At: Mon Dec 18 03:54:43 +0000 2017
Publish Date: 2017-12-12T15:16:30.498000+00:00
Author: Nastya Smirnova

  • Ready, steady, run the audit!My results are not so impressive for now:It seems that everything is ok with my accessibility and I follow the best practices, but my as a PWA my application s**ks.Fortunately, I can see what’s wrong:Also it takes too much time for my users to see at…
  • The app shell should load really fast to catch user’s eyes and make him wait for the whole content.2.1 LoaderThe most common example of app shell is loader (or spinner), that is visible for users until app and data is ready.As an example resource, you can go to the…
  • From MDN docs:The web app manifest provides information about an application (such as name, author, icon, and description) in a JSON text file.
  • The purpose of the manifest is to install web applications to the homescreen of a device, providing users with quicker access and a richer experience.There are a lot of examples of how manifest should look like, but the core info should include app name, short description, urls to icons for…
  • The last 3 fails we have are related to absense of something called Service Worker.Google’s definition:A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.MDN’s definition:Service workers essentially…

Tags: app, Service Worker, app shell, Web App Manifest, app browser tab

Score: 21000
Tweeted At: Mon Dec 18 08:04:47 +0000 2017
Publish Date:
Author: Minko Gechev

  • Now our application looks like this: – – Lets take a step back and look at the template again: – – It’s important to notice that this template is equivalent to: – – The only difference from the previous example is that instead of placing the directive on the component,…
  • Now, instead of placing the directive directly on top of the component, lets use an element and inject the template that will use from the outside: – – The only difference from the last snippet is that we explicitly pass the template that Angular will use to render the individual…
  • As you may already know, the directive provides a few more properties such as: – – If we want to get the value of any of these properties all we need to do is declare a variable in our template: – – With we set the value of the variable…
  • Although property named exists in the current lexical scope of the template, it’s value will be ignored and since has dynamic scope and will be bound to the value of where we use it, i.e. the component with selector .
  • Unlike the lexical scoping which is used in most programming languages we’re familiar with, Angular uses dynamic scoping for its template references since we’re interested in the context where given is used, rather than declared.

Tags: block lexical scope, template directives, custom template directives, different template, template variables

Score: 20500
Tweeted At: Sun Dec 17 21:00:25 +0000 2017
Publish Date: 2017-12-17T21:00:07+00:00
Author: Author Eric

  • In the Client App project open the  package.json file and update the version of the  @angular packages to at least the following version, and of course feel free to pin the exact version.
  • Instead of just blindly going package by package and seeing which versions were required I installed the Angular CLI and created a new Angular 5 application and used it as an example of what version I needed.
  • This package deals with ahead-of-time compiling which my sample application uses, but the application I generated using the Angular CLI doesn’t.
  • There was a much new version of the Open ID Connect Client that the Angular application is using so I upgrade it as well to the following version.
  • Now that the package versions are sorted run the following commands from a command prompt to make sure that all the new version are installed and in the proper places.

Tags: following version, Angular CLI, new client-side frameworks, Identity Server sample, basics sample project

Score: 18000
Tweeted At: Sat Dec 16 20:41:23 +0000 2017
Publish Date: 2017-09-20T18:39:45.990000+00:00
Author: Igor Minin

  • Another point, which I don’t agree on, is TypeScript — it’s really an amazing language/tool, but that’s below.Post above is highly recommended to check, especially if you already use Angular or just planning toNevertheless, I’ll write some of my own thoughts on it, not pointed out in that post.TypeScript in AngularThe most painful…
  • It’s basically a string name for the route, to be later easily used without bothering with the url.In our AngularJS app, this was essential for a few reasons:easy to use for programmatic redirection in controllersable to use enum for routes, to search and refactor the whole application easily (Alt+F7 instead…
  • Therefore, in the case above instead of global search for ‘some’ string you can just press Shift + F6.Again, Angular doesn’t use this great TypeScript advantage.Lazy LoadThis section can be another post, but I would like to point out that any TypeScript features are ignored of module name is specified…
  • secretLairs: this.fb.array([])});Not even mentioning stuff about combining both form types — you can’t just use attribute binding like [disabled] for reactive forms…These are just some of the examples of poor API design, there are much more, but I think it’s ok for this section__metadataSadly, TypeScript usage in Angular is heavily based on…
  • Think of reflection in Java-like languages.Without metadata, you can still use decorators — at compile time, but there’s not much profit in this case.Nevertheless, in our AngularJS app we’ve used this decorators, like @Component:export const Component = (options: ng.IComponentOptions = {}) = controller = angular.extend(options, {controller});It just wraps our TypeScript classes in…

Tags: Angular, new HtmlTagDefinition, new Angular, Angular team, Angular Material

Score: 1550
Tweeted At: Mon Dec 18 07:05:13 +0000 2017
Publish Date:

  • In Vue, a component’s dependencies are automatically tracked during its render, so the system knows precisely which components actually need to re-render when state changes.
  • In React, all components express their UI within render functions using JSX, a declarative XML-like syntax that works within JavaScript.
  • The main difference between React and Vue here is that the default method of styling in Vue is through more familiar tags in single-file components.
  • This means with Weex, you can use the same Vue component syntax to author components that can not only be rendered in the browser, but also natively on iOS and Android!
  • At this moment, Weex is still in active development and is not as mature and battle-tested as React Native, but its development is driven by the production needs of the largest e-commerce business in the world, and the Vue team will also actively collaborate with the

Tags: Vue, Vue developers, valid Vue template, Vue component syntax, Vue share

Score: 1200
Tweeted At: Mon Dec 18 01:27:08 +0000 2017
Publish Date:

  • The product(s) you are about to install leverage the Web Platform Installer (WebPI) for installation.
  • By downloading and using the Web Platform Installer (WebPI), you agree to the license terms and privacy statement for WebPI.
  • This installer will contact Microsoft over the Internet to retrieve product information.
  • WebPI uses the Microsoft Customer Experience Improvement Program (CEIP), which is turned on by default, see privacy statement for more information.
  • To view which software uses CEIP, see here.

Tags: ASP.NET Core, core web, Start learning ASP.NET, ASP.NET Core application, ASP.NET team

Score: 132
Tweeted At: Fri Dec 15 21:35:41 +0000 2017
Publish Date:

    Tags: Angular Project, Stacktrender,

    Score: 100
    Tweeted At: Mon Dec 18 07:30:33 +0000 2017
    Publish Date:

      Tags: angular js books, free angular js, plow, Free Frontend, Search PLOW

      Top Angular Courses

      Angular 5 (formerly Angular 2) - The Complete Guide (139,105 students enrolled)

      By Maximilian Schwarzmüller
      • Develop modern, complex, responsive and scalable web applications with Angular 4
      • Fully understand the architecture behind an Angular 4 application and how to use it
      • Use their gained, deep understanding of the Angular 4 fundamentals to quickly establish themselves as frontend developers
      • Create single-page applications with on of the most modern JavaScript frameworks out there

      Learn more.

      The Complete Angular Course: Beginner to Advanced (40,747 students enrolled)

      By Mosh Hamedani
      • Establish yourself as a skilled professional developer
      • Build real-world Angular applications on your own
      • Troubleshoot common Angular errors
      • Master the best practices
      • Write clean and elegant code like a professional developer

      Learn more.

      Learn and Understand AngularJS (66,998 students enrolled)

      By Anthony Alicea
      • Learn fundamental Javascript concepts that power AngularJS.
      • Write quicker, better AngularJS code by discovering how AngularJS itself is built.
      • Become fluent in AngularJS terminology, such as dependency injection, services, directives, transclusion, and more.
      • Realize the power of dependency injection, and how AngularJS accomplishes it.
      • Design custom directives and save time and energy with easily reusable components.
      • Understand what a Single Page Application (SPA) is, and how they work.
      • Build a Single Page Application (SPA) in AngularJS.
      • Be the coder that explains AngularJS to everyone else, because you understand it better than anyone else.
      • Get new free lectures during 2015, keep up with the development of AngularJS 2.0, and get a MASSIVE discount on a future AngularJS 2.0 course in 2016!

      Learn more.

      Angular 5 NgRx Store Masterclass & FREE E-Book (3,038 students enrolled)

      By Angular University
      • Build a Chat Application From top to bottom!
      • Understand the Flux Architecture, its benefits, strong points and most beneficial use cases
      • Understand Single Store Architecture solutions like Redux or Ngrx Store
      • Know all the usual notions of Store solutions, like Actions and Reducers
      • Know how to model the application state of a single store architecture, leveraging Typescript custom types to do so
      • Know the difference between a model and a view model and what to put inside the store
      • know how to derive a view model from a model and how to do that
      • understand the notion of selector in the context of store solutions
      • know the difference between smart components and presentation components
      • know how to build smart components using the Ngrx Store library
      • know how to use the Ngrx Effects library
      • know not only the Ngrx libraries but know also how they all fit together and what are the benefits of a store solution
      • know how to setup the Ngrx store developers tools
      • know how to debug RxJs applications in general

      Learn more.

      Angular Front To Back (6,984 students enrolled)

      By Brad Traversy
      • Build amazing single page applications using Angular 5+
      • Master Angular concepts
      • Understand the file and folder structure of an Angular application
      • Build a client management application with authentication and Firebase's Firestore
      • Integrate Bootstrap 4 into Angular projects

      Learn more.

      Angular Crash Course for Busy Developers (44,316 students enrolled)

      By Mosh Hamedani
      • Master the essential Angular concepts
      • Troubleshoot common runtime errors
      • Write cleaner, more maintainable code

      Learn more.

      Angular (Angular 2+) & NodeJS - The MEAN Stack Guide (26,806 students enrolled)

      By Maximilian Schwarzmüller
      • Build real Angular + NodeJS applications
      • Understand how Angular works and how it interacts with Backends
      • Connect any Angular Frontend with a NodeJS Backend
      • Use MongoDB with Mongoose to interact with Data on the Backend
      • Use ExpressJS as a NodeJS Framework
      • Provide a great user experience by using Optimistic Updating on the Frontend
      • Improve any Angular (+ NodeJS) application by adding Error Handling

      Learn more.