Your Choice JavaScript News

Angular News Tuesday, January 16

Angular News TLDR / Table of Contents

Score: 304000
URL: https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1
Tweeted At: Mon Jan 15 14:58:00 +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 socket.io @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: 65000
URL: https://medium.zenika.com/testing-an-angularjs-app-with-jest-3029a613251?gi=23a57af3d472
Tweeted At: Mon Jan 15 14:02:02 +0000 2018
Publish Date: 2016-10-21T15:16:26.410000+00:00
Author: Matthieu Lux (@Swiip)

  • Here’s an extract of the Karma config.Trying JestIn this context, I read about jsdom and thought that it could be huge to remove the real browser part since pure JavaScript implementations differences are not an every day problem anymore.
  • For a reason or another, I was quite sure I would have to refactor, even for a simple thing, every single test.In reality, I only had to point my source folder and write a tiny script which imported my tests common lib and my tests were passing.The biggest part of…
  • For the execution of all tests once without coverage, Karma takes 47s in total.
  • Jest works very differently, it only runs the modified test and takes approximatively 1s to detect the change and another one to execute it.A final but important point is that with the stack Karma / Webpack / Babel we have never figured out a good solution to have a robust…
  • Jest is far more straightforward, The error reports are just perfect with only references to our Babel source code et good line numbers.ConclusionJest popularity is shamefully restricted to the React world and really deserves to cross that frontier since it’s a very good agnostic solution for frontend testing.I didn’t find…

Tags: Jest, Karma, jest init script, Jest mocking, Jest front page

Score: 40000
URL: https://www.codementor.io/alexanderposhtaruk/rx-js-replywhen-use-case-in-iframe-d-angular-spa-f7lgpieur
Tweeted At: Tue Jan 16 09:49:32 +0000 2018
Publish Date:
Author: Alexander Poshtaruk

  • In the simplest case, the HTTP request function without any logic will look like this: – – But this is not what we want, so let the party begin – – As you may know to handle errors in Observable streams, we can use catch operator.
  • In two words — it will trigger on error in Observable sequence.
  • Each time retry-Observable gets that value — source observable sequence will be repeated.
  • In case startRefreshTokensProces or methods (see next) will take some time or don’t return values, we should emit error to subscribers.
  • To start retry logic, we emit value with our Subject instance we returned from RetryWhen callback: – – So it is done now.

Tags: method returns Observable, source Observable repeating, source observable sequence, Token refresh procedure, retry logic

Score: 24600
URL: https://github.com/mgechev/ngrev
Tweeted At: Sun Jan 14 10:20:03 +0000 2018
Publish Date:
Author: mgechev

  • Graphical tool for reverse engineering of Angular projects.
  • It allows you to navigate in the structure of your application and observe the relationship between the different modules, providers, and directives.
  • The tool performs static code analysis which means that you don’t have to run your application in order to use it.
  • Your application needs to be compatible with the Angular’s AoT compiler (i.e. you should be able to compile it with ).

Tags: separate dir Dec, compile-time errors Dec, static code analysis, screenshot Dec, semicolon Dec

Score: 19000
URL: https://toddmotto.com/angular-ngif-else-then
Tweeted At: Mon Jan 15 22:55:09 +0000 2018
Publish Date:
Author: Back To

  • Once evaluated, Angular will simply add or remove your DOM nodes, mount or remount your components, from the DOM – as the expression changes (if it ever does, that’s up to you).
  • The basic syntax of the directive is simple and effective, all we need to do is prefix the directive name with an asterisk ( ) and add it anywhere inside our .
  • There are four main ways we can use , so let’s start by exploring the most basic use case: – – We can also use JavaScript-like expressions to achieve a final truthy/falsy value to supply to – as well as composing through multiple variables through various operators: – – Just…
  • In AngularJS we’d have to negate the expression to evaluate to an “else”, and templates became a little messy at times.
  • When it’s needed (for example the “else” expression kicks into play), Angular will grab the contents of the tag, and replace the contents with it.

Tags: property binding syntax, asterisk syntax, Angular apps, helpful syntaxes, sugar syntax

Score: 15000
URL: https://debugmode.net/2018/01/16/how-to-create-custom-validator-for-angular-reactive-forms/
Tweeted At: Tue Jan 16 01:27:01 +0000 2018
Publish Date: 2018-01-16T01:26:54+00:00
Author: Dhananjay Kumar

  • In this blog post, we will learn to create custom validators in Angular Reactive Forms.
  • Using property binding, the formGroup property of the HTML form element is set to loginForm and the formControlName value of these controls are set to the individual FormControl property of FormGroup.
  • This will give you a reactive form in your application: – – Angular provides us many useful validators, including required, minLength, maxLength, and pattern.
  • Angular does not provide us range validation; therefore, we will have to write a custom validator for this.
  • The type of the first parameter is AbstractControl because it is a base class of FormControl, FormArray, and FormGroup, and it allows you to read the value of the control passed to the custom validator function.

Tags: reactive form, custom validator, key value pair, Angular reactive form, Angular Reactive Forms

Score: 2250
URL: https://medium.com/@tarasm/going-to-ng-conf-as-an-ember-js-user-212804ded0
Tweeted At: Sun Jan 14 17:30:29 +0000 2018
Publish Date: 2017-04-26T18:12:43.481000+00:00
Author: Taras Mankovski

  • Angular is a new framework that borrows many of the good ideas that made Angular.js popular and updates the toolset to include features that are standard in modern web applications development today.The distinction between Angular and Angular.js in the previous paragraph is intentional.
  • If a change breaks something unexpected, it will likely first break inside of Google before it’s released to the public.While at the conference, I was hearing the same conversations about Angular that Ember community was having 2 years ago when EmberCLI was being created.
  • The Angular community is just becoming familiar with AoT compilation which is something that Ember users have been taking for granted for a few years.I counted 5 component library vendors at ng-conf, but only a few of them had native Angular components.
  • Most developers at ng-conf that I spoke to never looked at Ember before choosing Angular.It seems that for every new feature that Ember community added to Ember.js, we should have gone out and given a round of talks at non-Ember conferences to raise awareness.I enjoyed my time in Angular community….
  • Angular will make modern web development accessible to enterprise developers who have a high standard for tooling and enable a new generation of creators with the Angular platform.It’s easy to think that “awesome” is wholy owned by your community when you never visit others.

Tags: Angular, Angular team, Angular platform, Angular community, Angular CLI

Score: 1650
URL: https://www.asp.net/
Tweeted At: Mon Jan 15 19:50:28 +0000 2018
Publish Date:
Author:

  • 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, Start learning ASP.NET, ASP.NET Web API, ASP.NET team, ASP.NET MVC

Score: 380
URL: http://www.c-sharpcorner.com/technologies/angularjs
Tweeted At: Mon Jan 15 15:30:02 +0000 2018
Publish Date:
Author: Rohit Singh

    Tags: Angular, angular material, Angular material component, Angular material controls, Angular Material Design

    Score: 270
    URL: http://on.dezeen.com/scmf/OrMCe04Lcp0lODlPfUE71hMM3M4GPT9LEAk5MZpGPikR6j8z-D9E1Rd0vk8GRpPJJfu2r5of5VHHupa_BGwtnXChPWJ2C3Kd/SBJMZ4
    Tweeted At: Sun Jan 14 18:58:54 +0000 2018
    Publish Date:
    Author:

      Tags:

      Score: 130
      URL: https://sweetalert.js.org/
      Tweeted At: Tue Jan 16 11:52:22 +0000 2018
      Publish Date:
      Author:

        Tags: beautiful replacement, Tristan Edwards, good idea, success messages, popup messages

        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.