Your Choice JavaScript News

Angular News Wednesday, January 10

Angular News TLDR / Table of Contents

  • 12 Things to Help Large Organizations Do Angular Right
    • Victor Savkin is a co-founder of, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection…
    • source code, Angular CLI, Angular source code, developers, large organizations
  • Real Time Apps with TypeScript: Integrating Web Sockets, Node & Angular
    • Some time ago I implemented a simple chat application using TypeScript language only. The main goal was to write a demo to explain how you can use this programming language on the client side and on…
    • client app, latest Angular features, Real Time Apps, simple chat application, Angular CLI version
  • Basics Of Angular And Its Versions – Part One
    • Angular is the next version of Google’s highly popular MV* framework for building complex web applications.
    • Angular, Angular code, entire Angular code, Angular Data-Binding feature, Angular framework
  • Angular or React – For Decision Makers
    • This article talks about pros and cons of Angular 2 and React that may help your decision making when building your next Web application.
    • React, Angular, React Native, Angular search, React support native
  • ng-India, India Angular Conference, Gurgaon 2018
    • ng-India is India’s premier Angular event, being hosted by Geek97. Event will feature advanced Angular topics delivered by experts from premium technology companies like Apple, BookMyShow, Infragistics and others. The event will bring together 200+ attendees and 10 prominent industry experts
    • Angular, Angular Test Bed, Angular Universal, angular CLI, Angular Materials
  • 5 Angular Directives You Can Use in Your Project – DZone Web Dev
    • A web developer provides a tutorial on how you can better use the Angular framework and its built-in directives to manipulate the DOM and create web apps.
    • Angular directives, built-in Angular directives, special disabled directive, building Angular components, following directive
  • Blog – 6 Reasons to learn AngularJS
    • Need to learn AngularJS? Find out the 6 reasons why one should know AngularJS in depth . And find the advantages and benefits of learning AngularJS.
    • Angular, key Angular constructs, coding pattern Angular, Angular component, Angular module
  • Why we moved from Angular 2 to Vue.js (and why we didn’t choose React)
    • At Rever ( we just released a new version of our web client using Vue.js. 641 commits and 16 weeks of intense development after with two resources, here we are, very proud of a…
    • Angular, Vue.js, React, Angular team, decision

Score: 265500
Tweeted At: Tue Jan 09 18:16:14 +0000 2018
Publish Date: 2018-01-09T18:11:08.649000+00:00
Author: Victor Savkin

  • These are your components, services, utilities used in many different apps.Third-party libs and tools.To be effective, developers should be able to:Create app-specific libsExtract reusable libsVerify that a code change to a reusable lib does not break any apps and libs that depend on itRefactor multiple apps and libs togetherDetermine who…
  • When it is easy to scaffold and configure a reusable library within minutes (instead of days)… only then will developers invest in building and maintaining reusable libraries.If many applications have dependencies on many libraries, regression testing can become very difficult when a library changes.
  • If it is impossible to automatically verify that a change to a reusable library does not break any apps depending on it, developers will be afraid to make changes and will write defensive, brittle code.If developers cannot refactor across different apps and libs, they won’t evolve the APIs.When developers cannot…
  • It uses the monorepo approach, where many applications and libraries are stored in the same source code repository (read more about it here)With Nrwl/Nx developers can:Create app-specific libs in minutesExtract reusable libs in minutesVerify that a code change to a reusable lib does not break any apps and libs depending…
  • Even by extracting only 30 lines of code into a reusable library, you can make your teams much more productive and save many weeks of work.For instance, every single application the team at Nrwl looks at has a lot of race conditions.

Tags: source code, Angular CLI, Angular source code, developers, large organizations

Score: 220000
Tweeted At: Tue Jan 09 14:36:56 +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: 125000
Tweeted At: Wed Jan 10 06:45:00 +0000 2018
Publish Date:
Author: Santosh Kumar

  • Angular is the next version of Google’s highly popular MV* framework for building complex web applications.
  • Angular is used along with TypeScript by default, which provides support for ECMAScript 5, ECMAScript 6, ECMAScript 7 and above.
  • We can write the entire Angular code using simple JavaScript code as well but honestly, I would say there are a few serious issues with it.
  • Angular is completely rewritten which introduces a modular component-based approach with TypeScript (which compiles to JavaScript).
  • Popular code editors which support Angular where we can write, compile and run the Angular code, – – Angular supports many testing frameworks to test the Angular code as listed below in the screenshot.

Tags: Angular, Angular code, entire Angular code, Angular Data-Binding feature, Angular framework

Score: 67500
Tweeted At: Mon Jan 08 18:00:01 +0000 2018
Publish Date:
Author: Mahesh Chand

  • Angular and React are two new web technologies that are on the rise now.
  • Use Angular, TypeScript, or modern JavaScript to get truly native UI and performance while sharing skills and code with the web.
  • With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app”.
  • If you’re a Microsoft or Google shop and have a good background in object-oriented and other programming languages, and you’re familiar with MVC, you should go with Angular 2.
  • If you’re building a large scalable web application and looking beyond a few years, Angular 2 is a better choice with the obvious reason of Google and Microsoft being behind this product.

Tags: React, Angular, React Native, Angular search, React support native

Score: 34500
Tweeted At: Mon Jan 08 22:23:21 +0000 2018
Publish Date:
Author: geek97

  • Mobile web or mobile app?
  • The debate has raged for years.
  • Now, there’s an emerging solution that takes advantage of the strengths of both to create a better experience: Progressive Web Apps (PWA).
  • In this talk, you learn about: best practices for PWAs that you should be taking advantage of, the tools that exist to assist developers coming from a wide variety of backgrounds, the philosophies, and visions behind these tools, and practical tips for getting started.
  • Two years ago, developers needed to do most of the plumbing themselves to take advantage of the new APIs available in the browser, but today we have powerful and robust tools that can help developers of any background to quickly ship more engaging applications.

Tags: Angular, Angular Test Bed, Angular Universal, angular CLI, Angular Materials

Score: 25000
Tweeted At: Wed Jan 10 08:00:43 +0000 2018
Publish Date: 2018-01-04T18:01:43+00:00
Author: {{Node.Authors[0].Realname }}

  • Angular directives allow you to attach behavior to elements in the DOM and reuse it across your project.
  • Here is a minimal example of a callout directive that dynamically creates a callout component with specified text when you hover over an element: – – The CalloutComponent used in this demo is created on the fly using and destroyed when the mouse leaves the element.
  • Now, during the change detection cycle, we will check not only the boolean value of the current directive but the parent too: – – After implementing the directive, we update the code of our components like form fields and buttons to be aware of it (again using the dependency injection…
  • The directive simply toggles the and classes on the container element and assumes that the animation is done via CSS which provides great flexibility—you don’t have to touch the directive code to change the animation.
  • Many third-party libraries contain a debounce function, but we included our implementation in the demo: – – There is a native autofocus attribute in HTML5 spec for automatically focusing form fields upon page load.

Tags: Angular directives, built-in Angular directives, special disabled directive, building Angular components, following directive

Score: 20000
Tweeted At: Wed Jan 10 00:16:07 +0000 2018
Publish Date:

  • When building client-side applications there are often three pieces to the puzzle: the user interface, the code that supports and controls that user interface and the model containing the data for that interface.
  • This is the code that calls services to retrieve data, reacts to user interactions on the view such as hiding or showing elements and calls services to save user entries.
  • Simply bind HTML elements in the template to the model properties in the class and the data will automatically appear in the view.
  • And if the user can change the values, Angular 2 supports two-way data binding.
  • So any change the user makes to the data in the view automatically updates the model properties in the class.

Tags: Angular, key Angular constructs, coding pattern Angular, Angular component, Angular module

Score: 17000
Tweeted At: Wed Jan 10 07:44:20 +0000 2018
Publish Date: 2017-08-31T14:16:02.358000+00:00
Author: Rever Score

  • My conclusion about Angular 2 was simple, the only thing Angular 1 and 2 share in common is the name, they are completely different frameworks.So consider that we had 17 versions to upgrade on a non-tested system, a lot of pressure from the business to write new features, lots of…
  • I got a good understanding of the basic concepts of Vue.js, defined a good and extendable architecture but most importantly I really enjoyed the experience of writing code with it and I felt I was doing it faster than with React.React was a lot harder than I thought, choosing between…
  • React took the most mentions and Angular 2 came in a distant second place.I started to look for local talent with Vue.js experience and I did find some who were really good so I started to think that I was not alone, my social techy circle was probably too small…
  • Twitter is another good example, they released Bootstrap under the very permissive MIT License and no one is talking about License problems with Bootstrap.Final wordsOut of the many web pages I researched before making a decision, one graph caught my attention, the developer satisfaction on The state of Javascript survey…
  • You can read The State of Javascript on the following link.Overall, Vue.js was the the winner in our evaluation, it had many questions answered on Stack Overflow, the clearest official documentation of the three options, the smallest code base, integrates well with Bootstrap and learning that it was backed by…

Tags: Angular, Vue.js, React, Angular team, decision

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.