Your Choice JavaScript News

Angular News Friday, December 1

Angular News TLDR / Table of Contents

  • Building SPA with Angular 4 and Redux
    • Building SPA with Angular 4 and Redux; Author: Pankaj Kumar Choudhary; Updated: 28 Nov 2017; Section: Client side scripting; Chapter: Web Development; Updated: 28 Nov 2017
    • application, d-flex justify-content-between align-items-center, state, bug, class
  • Angular CLI 1.5.5 and 1.6.0-rc.1 out now
    • angular-cli – CLI tool for Angular
    • commits, release, Nov, Ahsan Ayaz, security vulnerability
  • Angular: Unit Testing Jasmine, Karma (step by step)
    • Working with unit testing on any project that at least tries to be serious is a must, doesn’t matter if you choose to use a TDD (test driven development) approach or not you are going to have a lot…
    • unit testing, angular unit testing, component, angular test bed, regular angular form
  • Passing Data Between Components – Day Two
    • We have seen that we can pass the data between the components using the @Input and @Output directives and using event emitters. Let’s see the other two methods – @View child and the services which can be used to pass the data between components.
    • child component, components, data, code, data service
  • Code and deploy Angular to the Cloud
    • Getting started with Angular is now easier than ever … said no one ever. Yet with the right tool-set we too can create magic. When I code with Angular I ca…
    • upload original content, YouTube, videos, music, friends
  • If each component contains it’s own state then it becomes very difficult to take a screenshot of the state of the whole application because we divided the state at the component level.
  • If we have multiple components and each component contains its own copy of data (state) then there is a huge chance that some duplicate (same data) data is present in multiple components, so this redundant data is not good as a point of view of the modern application.
  • Redux works on the centralized data mechanism that means instead of storing the state at component level we store the state in a centralized location and all the components can access this store.
  • After installing the Redux package now we can create building block like Store, Action and Reducer for our application.
  • The first parameter contains the previous state of the application and second parameter contains the action type and new data payload for the state change.

Tags: application, d-flex justify-content-between align-items-center, state, bug, class

  • This release contains a single fix to a security vulnerability that was reported for Handlebars.
  • Handlebars was not used during the build process and did not affect any of our users, but the vulnerability was still reported by Github who only check version numbers.
  • Since the faulty version of Handlebars might still be part of your (or ) files, you might need to update those files before the alert disappears.
  • The package that the CLI depended on ( ) has since removed their usage of Handlebars entirely.

Tags: commits, release, Nov, Ahsan Ayaz, security vulnerability

  • Angular: Unit Testing Jasmine, Karma (step by step)Working with unit testing on any project that at least tries to be serious is a must, doesn’t matter if you choose to use a TDD (test driven development) approach or not you are going to have a lot of benefits by using it.In…
  • It uses a configuration file in order to set the startup file, the reporters, the testing framework, the browser among other things.The rest of the dependencies are mainly reporters for our tests, tools to use karma and jasmine and browser launchers.To run the test you only need to run the…
  • You are probably never going to need to change this file but let’s go and discuss some of the things happening;An environment to run angular tests is being created using all the imports at the begging of the file.TestBed is a powerful unit testing tool provided by angular, and it…
  • Let’s create a test file to check that the component actually has that property and that is actually rendered in the HTML.Let’s go through everything that’s going on here;We import all the angular testing tools that we are going to use.We import all the dependencies that this component has.We use…
  • Let’s go through the first one;In the first test, we are checking that the component actually contains the expected text in the “title” property.First we need to have an instance of the app.component, for that we use the create component function of angular test bed, as a result, we get…

Tags: unit testing, angular unit testing, component, angular test bed, regular angular form

  • Let’s see the other two methods – @View child and the services which can be used to pass the data between components.
  • When we see the code snippet, we can see that the class has a normal counter property and a method named IncreaseNumber() which increases the counter by one every time this function is called.
  • These lines of the code are used to query the child component and inject the same property inside the local object of the child component which is created in the second line.
  • It also has two functions IncreaseNumber() and Dicrease(), in which Increase () calls the Function which is present in the child component and Dicrease () reduces the counter property of the child component by 1.
  • Let’s see the Data.service.ts – – Above is the code for the DataService class but before going into the details of this class, let us try to understand some snippet available In the code, – – It also gives us the observables from the subject using the Method as observable()…

Tags: child component, components, data, code, data service

Tags: upload original content, YouTube, videos, music, friends

    Comments are closed, but trackbacks and pingbacks are open.