Your Choice JavaScript News

Angular News Wednesday, January 17

Angular News TLDR / Table of Contents

Score: 1235000
Tweeted At: Tue Jan 16 16:56:12 +0000 2018
Publish Date: 2018-01-09T14:32:12.993000+00:00
Author: Luis Aviles

  • 😄Initializing server applicationCreate a package.json file and then install the following dependencies:npm install –save express @types/express @types/socket.ioWe’ll need to install some devDependencies to allow integrate gulp and typescript so that we can define build tasks easily with these tools later:npm install –save-dev typescript gulp gulp-typescriptTypeScript Compiler ConfigurationCreate a tsconfig.json…
  • let’s see further details into our server/src directory:server/|- src/ |- model/ |- message.model.ts |- user.model.ts |- index.ts |- server.ts|- package.json|- tsconfig.json|- gulpfile.jsChat Server ImplementationThe main files in server directory are index.ts and chat-server.
  • The first one allows us to create and export our ChatServer app, while the last one contains express and socket.IO configurations:Server ClassesThe previous code will give a result of the following classes and relationships:Build and Run the ServerIn order to have JavaScript files needed by the V8 engine of Node.js, we…
  • js command to have the server running.Client CodeLet’s generate our client directory using the latest Angular CLI version:ng new typescript-chat-client –routing –prefix tcc –skip-installThen install your dependencies running npm install(I prefer to use Yarn for this step):cd typescript-chat-clientyarn installAdding Angular MaterialFind and follow the latest guide to install Angular Material inside…
  • This time inside chat directory:ng generate service chat/shared/services/socket –module chatng generate class chat/shared/model/userng generate class be ending with a structure similar to:client/|- src/ |- app/ |- chat/ |- shared/ |- model/ |- user.ts |- message.ts |- services/ |- socket.service.ts |- shared/ |-app.module.tsObservables and Web SocketsSince our Angular app comes with RxJS,…

Tags: client app, latest Angular features, Real Time Apps, simple chat application, Angular CLI version

Score: 170000
Tweeted At: Wed Jan 17 04:42:30 +0000 2018
Publish Date:

  • As stated in the official blog, the three major improvements include – – – We’ve added fullTemplateTypeCheck as an angularCompilerOption that uses TypeScript to validate binding expressions in your templates.
  • We recommend you enable this flag, as it will become the default in a future major release.Angular now supports TypeScript 2.4, 2.5 and 2.6.
  • Check out some of the new features in TypeScript 2.6 – – Previously, nested routes would only inherit parameters and data from parent routes if the parent route did not have a component set.
  • Now paramsInheritanceStrategy can be set to always, meaning child routes will have access to all ancestor parameters and data.”
  • You can go through the Angular Changelog on GitHub for the complete list of changes, improvements, and bugfixes.

Tags: Team Angular, Improved type checking, Angular Changelog, future major release, TypeScript

Score: 34400
Tweeted At: Tue Jan 16 21:17:03 +0000 2018
Publish Date:

  • Here are the sales of our ebook Become a Ninja with Angular.
  • Interested in the sales of our other books?
  • Here they are: – – Interested in the sales of our other books?
  • Here they are: – – Back to Become a Ninja with Angular book page.

Tags: sales, Angular, Ninja, ebook, Interested

Score: 27500
Tweeted At: Wed Jan 17 00:50:07 +0000 2018
Publish Date: 2017-08-31T08:10:45.012000+00:00
Author: Ahsan Ayaz

  • In modern browsers, we’ll leverage the amazing APIs we’ll talk about later, but in older browsers, our app should still work perfectly fine, without the amazing modern stuff of course.Let’s get started.I already have a simple web application which searches books using the Google Books API.
  • From your project root, execute the following command which installs the required plugins via npm/yarn in our project:npm install –save @angular/service-worker @angular/platform-server ng-pwa-tools…or…yarn add @angular/service-worker @angular/platform-server ng-pwa-tools –saveNow we’ll enable service workers inside our application.
  • We could create a service worker manifest for this purpose but since we already have installed some amazing tools, we’re going to create this manifest automatically by letting the tool know about our application’s routing.We’re going to add the command below in our to do –module src/app/app.
  • This hash informs the service worker when the files have been updated by us and the service worker now needs to re-cache the newer files.Now, go to localhost:8080 and open chrome inspector, go to Application tab and you should see our service worker up and running:Since our service worker is…
  • Also, try the offline mode to be further amazed 😉 All the previous visits should be cached.We have improved our app, so let’s see if the performance seems different in Lighthouse.Performance gain after implementing service workerFirst page view time has decreased but is still 11.3sAs you can see, we have made some…

Tags: service worker, basic service worker, service worker registration, service worker saving, network tab

Score: 14700
Tweeted At: Tue Jan 16 18:40:09 +0000 2018
Publish Date:
Author: mgechev

  • Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
  • Already on GitHub?
  • Sign in to your account

Tags: i18n element, Google Chrome, latest Safari, CSS parser, GitHub

Score: 2350
Tweeted At: Wed Jan 17 05:51:35 +0000 2018
Publish Date:
Author: Back To

  • Let me illustrate a common scenario inside a container/stateful component, where we’d typically use the async pipe to auto-subscribe and pass just raw data down: – – This approach has a few flaws, the first and most obvious is being potentially exposed to multiple, unwanted, subscriptions (previously mentioned up top)…
  • Let’s assume we’re using something like NGRX Store to make delivering state easier (which also mitigates things like multiple subscription issues that call upon new data requests).
  • This also gives us additional flexibility when displaying load state specific data to a user (loading/loaded): – – My personal choice when adopting this syntax would be to use parentheses to express intent, visually it makes it far easier for me to see what’s going on without actually having to…
  • Ideally, data returned from either a selector or server response would be passed down as a whole – I find the syntax more reliable and extensible when passing props down to child components.
  • But ideally, async stuff should happen in container components, and presentational components should be simply given the data – to render.

Tags: async pipe, common async issues, Observable streams/async stuff, purely cold Observables, async operations

Score: 1500
Tweeted At: Wed Jan 17 11:59:46 +0000 2018
Publish Date:

  • A session on future of component-based development for modern Web UIs The debate on which framework between Angular and React is better is a never-ending hot topic of discussion for most web enthusiasts.
  • We at Globant have extensive experience in building modern web UI applications using both these frameworks.
  • Come and join us for a captivating session where we share our experiences and delve into the factors that help decide which framework should be used to develop highly scalable & performant web UIs.
  • A Tech Master at Globant with about 13 years of experience developing and architecting enterprise grade solutions using a wide spectrum of technologies on both the user interface as well as server side of application development.
  • Parijat has over a decade of experience building interactive web applications using a plethora of UI technologies.

Tags: modern Web UIs, performant web UIs, never-ending hot topic, modern web UI, enterprise grade solutions

Score: 120
Tweeted At: Wed Jan 17 05:28:10 +0000 2018
Publish Date:
Author: Gregory Vangilbergen

    Tags: Gregory Vangilbergen, sketch art, World Builder, pet project, web technology

    Score: 29
    Tweeted At: Tue Jan 16 12:47:05 +0000 2018
    Publish Date: 2017-06-10T12:52:32+00:00

      Tags: image source, node.js, node.js application, node.js application development, web applications

      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.