Angular Jobs

Today in Top Angular News – Tuesday, January 1

Today in Top Angular News – Tuesday, January 1

Today’s topics include autotweet, AngularJS, 100DaysOfCode, javascript, and nodejs. Special thanks to contributors The serverless webpack authors, 10209371553759316, Kevin Kreuzer, @NetanelBasal, Netanel Basal, 10204777036004266, Alexander Kallaway, hasdid, @kniklas, Kai Niklas, @joshblf, Josh Hicks, @Mybridge, Mybridge, @shriyanshgautam005, Shriyansh Gautam, Ben Nadel, Gary F, Get Into My Comments, You — Get Out Of My Dreams, @charleeli, Charlee Li, @inbalsinai, Inbal Sinai, @alex.okrushko, Alex Okrushko, and CODEmagazine.

Creating a File Upload Component in Angular (Including Backend)

First, we will create a simple express server with just one route to accept file uploads. Afterward, we will create an angular application from scratch and build a beautiful file-upload component using the angular material ui-component-library. We are going to use the

Create a new application by opening a command prompt at the desired location and type:

Because we will need some complex ui-elements such as modal-windows, I decided to use the

To install this library, use this command:

To make the css of this module available in our app, we need to import it into our app's global style.css file:

Also, we are using a flexbox-design for this. To make flexbox a little bit easier to use with angular there is a library called the library like this:

To make our desired file-upload component as re-usable as possible, I decided to bundle it into a separate feature module. So let's create this DialogComponent:

The first thing we need to do is to add a file input element to our component. Continue reading

Debug Angular apps in production without revealing source maps

Debug Angular apps in production without revealing source maps
Alternate approaches to handle source maps

When our app gets deployed to production we often encounter different code than what we edited during development. source maps — a short introduction 💁🏻
At its core, a source map is a JSON file that contains all the necessary information to map the transpiled code back to the original sources. The source map JSON contains the following fields:
version: indicates the source map spec version
file: the name of the transpiled file this source map belongs to
sourceRoot: basePath — sources are located relative from here
sources: the path to the original source files (for example TypeScript files)
names: method or variable names found in the code
mappings: this is where the whole magic happens. X-SourceMap: pathToSourceMapThe second possibility enables you to toggle source maps on the server side without touching your minified JavaScript files. Adding source maps to an Angular production build
The angular.json file contains an architect property that allows us to specify if we want to use source maps for our production build. Continue reading

Angular Top 50: What you should have read in 2018

  • It was a very exciting year to be an angular developer.
  • But not only the guys from the angular team were busy.
  • So you don’t miss the great reads those guys created for us.
  • They are all a great contribution to the angular community.

The community did a great job writing amazing and informative content, as well. Continue reading

This New Year Resolution will change your life: Learn to Code with #100DaysOfCode

Another great rule to adopt is: 
Encourage at least 2 other people in the challenge (“hundreders”) by commenting on or liking their work and updates on Twitter. If you are not new to coding, you can use the challenge to:
Learn a new framework
Learn a new programming language
Get a lot of practice in a specific area or problem type you decide on
Contribute to Open Source
Get better at refactoring code

Remember that the #100DaysOfCode challenge is designed to be taken multiple times. I often see people restarting the challenge because they’ve missed a day, or people who say they can’t do the challenge because they don’t have a whole hour to spare every day, and so on. However if, when you start the #100DaysOfCode challenge, you were to change that one belief — just decide that from now on, you are a technical person, a hacker, a computer genius in the making. If you are interested in learning to code, habit formation, self-improvement (and a bit of nerdy sci-fi and space stuff), sign up for my newsletter:💌 💌 …subscription form is below the projects 🙂
If you have questions, concerns or you are afraid the ‘coding is not for you’, DM me on Twitter and I will do my best to help! Continue reading

Preview Kinvey Studio

  • Kinvey Studio is an early access program.

We’re developing a new tool called Kinvey Studio that really speeds up creating web, mobile and chat applications with model driven development, application templates, and other high productivity features. That means you can build anything you like with Kinvey Studio, not just template-based apps. Kinvey Studio keeps developers focused on building the innovative parts of their app, skipping boilerplate and ceremonial code. With Kinvey Studio, you always get perfectly formatted source code you can use with your own source control and processes. Continue reading

CI/CD with Angular 6 & Firebase & GitLab – Hacker Noon

Create GitLab Repository
Create Angular 6 demo application
Configuration Angular 6 for CI/CD (Build, Test, Deploy)
Create Firebase project
Configure CI/CD in GitLab

GitLab and Firebase account
Git and Node.js 10. # puppeteer = = = function (config) {
customLaunchers: {
ChromeHeadlessNoSandbox: {
base: 'ChromeHeadless',
flags: ['–no-sandbox']
};Protractor Configuration
For e2e tests we add the following configuration file, to be able to call chrome in headless mode with the option–no-sandbox. # config = puppeteer = = {
browserName: 'chrome',
chromeOptions: {
args: ['–headless', '–no-sandbox'],
binary: puppeteer.executablePath()
};exports.config = config;Add Node Scripts for CI/CD
To build, test and deploy properly on CI, we add the following scripts into our package.json configuration file. "scripts": {
"build-prod": "ng build –prod",
"test-ci": "ng test –no-watch –no-progress "e2e-ci": "ng e2e "deploy": "firebase deploy –token $FIREBASE_TOKEN –non-interactive"
}Commit to GitLab
Now we can share our local code with the remote repository in GitLab. FIREBASE_TOKEN, which is used to auth GitLab against Firebase and
FIREBASE_URL, which is the URL of our project and only used as a meta information for our environment configuration in GitLab. Continue reading

Testing Angular Directives
Using HTMLElement
The Goal
In this example I wanted to show you how you can e down into the DOM to find elements in your Angular templates. Then lastly, we’re importing some basic Angular building classes that will help us create our test component. Creating the test component
Sometimes we want to test a directive but we don’t need to test it on a real component. In order to do that we need to do the following:
1: Get the host element
2: Get the child element with the directive attribute
3: Trigger a click event
4: Make sure the properties on that element have changed
We can get the host element, also called the debugElement, by digging into the fixture. Then last but not least, we check the style on our paragraph element to make sure the text inside it is you’re not familiar with the HTMLElement, each element has a set of properties that you can get/set. Continue reading

Angular Top 10 Articles for the Past Month (v.Dec 2018)

  • [500 recommends, 4.5/5 stars]br /br /How to optimize Angular applications.

Angular Top 10 Articles for the Past Month (v.Dec 2018)
For the past month, we ranked nearly 800 Angular articles to pick the Top 10 stories that can help advance your career (1.25% chance). Tweet of the month“Watch” Angular Monthly Top 10 on Github and get email once a month. Course of the month:
A) Beginners: Angular (Full App) with Angular Material, Angularfire NgRx. [2,381 recommends, 4.7/5 stars]
B) Angular Core Deep Dive (with FREE E-Book). Continue reading

Angular Material App with Docker swarm and Jenkins CI/CD Deployment: Part 1

Creating the required files
Here we set up the Jenkins in a docker container on the host giving it access to the docker app instance so that it can create other containers itself when running the CI/CD pipeline. Installing BlueOcean
Blue Ocean is Jenkins new user-friendly brand new UI that makes it easier to handle pipelines. Integrating VCS with Jenkins
You can integrate your VCS (Github, Bitbucket etc.) repositories with Jenkins to build and deploy your projects to your host through CI/CD pipeline. You can also configure Jenkins to check regularly a particular branch of your repository and run the pipeline if some new commit is made onto that branch (We will elaborate on this in the next section). On Blue Ocean’s dashboard, go to Pipelines Tab and click Create Pipeline
Jenkins Blue Ocean Create PipelineSelect the VCS of your repository (Login required for the first time), team/user and select the repository that you want to create the pipeline for and then hit the Create Pipeline button. Continue reading

Vue.js Up And Running By Callum Macrae

While this was my first real exposure to Vue.js, many of the concepts discussed in the book are built on top of concepts that should be familiar to Angular developers. And, in order to test a few Vue.js features, I encapsulated two parts of the user interface inside nested components:

These two components are so-called "presentation components" that operate solely on inputs and outputs. It renders the root component into the document Body; and, it defines the name-based dependencies for subsequent dependency-injection:

While Vue.js provides dependency-injection, Vue.js doesn't appear to manage the instantiation of injectables. Now, one of the very React-like features of Vue.js is the fact that each Component renders its own host element. And, if we run this code in the browser, add a few friends and delete a few friends, we get the following output:

The total page-weight of this bundled and minified Vue.js application comes in at about 180Kb. Continue reading

5 Tips to improve User Experience of your Angular app with NgRx

So that brings us to the pattern where three Actions are required for any API call:
Action to trigger the Effect
Action to wrap the successful result (typically suffixed with Success)
Action to reflex the error response (typically suffixed with Error)

This pattern will also become handy in some of the further improvements that I describe in this article ⬇️. Below are the two side-by-side animations of that last step showing different implementations: the one on the right uses NgRx store as a cache, displaying the previous list of products while we are waiting for the new fetch API call to complete, at the same time indicating with the indeterminate progress bar that the data might still change. Here is how it looks:
no cache (left) vs cache (right) when navigating to the “product details” pageOn the left side, we are waiting for the GetProduct(id) to return the info, while on the right side we already show the partial info that we have in the Store about this product from the FetchProducts call, and once the GetProduct(id) returns us new data (including “product description”) we merge it. Here is the basic and naive implementation of how to persist the products state from/into localStore:
In the productSync meta-reducer we check for two special Actions that NgRx dispatches itself:
INIT — dispatched when Store is initialized (including any forFeature pieces that are not when feature reducers are added/removed. When the user clicks to add the product to the cart, we assume that it will be successful at the backend and we push this product to the Store’s cart items list immediately. Continue reading

Did we miss something? Do you have feedback on how we can improve? Contact us.