Your Choice JavaScript News

Angular News Tuesday, November 28

Angular News Preview / TLDR

  • Angular 5 App With ASP.NET Core 2.0 Web API
    • Today, we will see one of the simplest ways to create an Angular 5 app & how to integrate it with ASP.NET Core 2.0 Web API. So, let’s start by having a look at what are the steps involved in creating such an application and we will go through each…
    • Web API, new Web API, Angular app, ASP.NET Core, command
  • Custom Overlays with Angular’s CDK – Part 2 by thoughtram
    • In this follow-up post we demonstrate how to use Angular’s CDK to build a custom overlay that looks and feels much like the Google Drive file preview overlay. We’ll pick up from where we left off and implement keyboard support, image preloading and add animations in order to make our…
    • overlay, overlay component, custom overlay, Drive-like custom overlay, overlay component class
  • Angular: Tips. The importance of Pipes – codeburst
    • What we all like in Angular primarily is that it all mostly about templates. Templates are smart, dynamic, they use change detection to update themselves on a moment’s notice when a model is updated…
    • change detection, Angular change detection, change detection mechanism, angular markup syntax, on-the fly data
  • Learning Vue for Ionic/Angular Developers – Part 3
    • In this tutorial, we are going to look at how to create “services” or “providers” in Vue that pull in some data via an HTTP request.
    • Vue, Vue Syntax vs, http requests, Ionic/Angular Developers, Vue framework concerns
  • This friday I’ll be speaking about #Angular at #DevFestMLG! Get your ticket now!
    • Welcome to the first edition of DevFest in Málaga: a yearly developers event in the warm Costa del Sol! December 1st, 2017
    • Oleh Zasadnyy, Project Zeppelin, GDG Lviv,
  • Today, we will see one of the simplest ways to create an Angular 5 app & how to integrate it with ASP.NET Core 2.0 Web API.
  • Firstly, create an Angular app by executing this command – – – All the Angular file will be added to our project.
  • Now, change the HTML file app.component.html to display the list of items which we plan to fetch from ASP.NET Core Web API.
  • NET Web API project within the same folder – – So, by executing the below command, we can create a new Web API by using .
  • Now, we need to integrate the Web API with the app by updating angular-cli.

Tags: Web API, new Web API, Angular app, ASP.NET Core, command

  • More specifically, we’ll implement keyboard support, image preloading and add animations in order to make our overlay more engaging and provide better feedback.
  • Let’s start off by importing the into our application’s like this: – – With this in place, we can go ahead and define our animations with Angular’s Animation DSL and add it to the component via the metadata property in the decorator: – – As you can see we created…
  • Here’s a live demo with all the code above: – – Animations guide our users and the overlay smoothly animates in.
  • Let’s start with the animation callbacks and hook them in the template of our : – – The animation callbacks alone are not very useful, at least not for animating the overlay out.
  • To finish this up we will create a toolbar component, add animations and also make use of the events streams exposed by the remote control to animate the toolbar out before the overlay is closed.

Tags: overlay, overlay component, custom overlay, Drive-like custom overlay, overlay component class

  • Templates are smart, dynamic, they use change detection to update themselves on a moment’s notice when a model is updated, the can manage HTML elements and nested components, enrich the markup with directives and make on-the fly data transformations, and the template syntax is amazing.
  • Pipes in Angular are not literally the same, but the essence lying beneath is similar: a pipe takes some data as in input, performs some operation on it (presumably transforming it to something else; for example, the built-in date pipe in Angular takes a Date object/ISO string and formats it…
  • Any time you move a mouse, press a key or make an HTTP call, the change detection will run, and invoke your method, and if you put some complex logic inside that method, it may affect your app’s performance poorly.Thus, pipes.So, we should use pipes whenever we want to perform…
  • And this is way more beautiful and reusable, than performing logic inside our component (filtering users anytime they change inside a component and reassigning them, so that the template is updated; we can then even set the change detection strategy to OnPush to increase the performance, but this is an…
  • The proposed solution was to make XHR calls for images, setting the headers manually, and this is what I eventually did, but rather than writing some complex login in a component or service, I created a Pipe.

Tags: change detection, Angular change detection, change detection mechanism, angular markup syntax, on-the fly data

  • In this tutorial, we are going to look at how to create “services” or “providers” in Vue that pull in some data via an HTTP request.
  • Coming from an Angular background we might want to create a “provider” in Vue, and then use whatever Vue’s version of “Http” is to fetch the data.
  • But there is no concept of a “provider” or “service” or “injectable” in Vue, and there is no default library for HTTP requests.
  • Once again, Vue is not concerned with the ins and outs of your application, and it does not provide a “Vue way” to make an HTTP request.
  • If you were to take a look at this in your browser now, you should see something like this: – – An important thing to keep in mind when learning Vue, especially coming from an Angular background, is to remember that although there are many similarities, they are different frameworks…

Tags: Vue, Vue Syntax vs, http requests, Ionic/Angular Developers, Vue framework concerns

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.