Angular2 best link for learners

Angualr2/4 examples :

http://voidcanvas.com/ng2-templates-tutorial-example/

http://voidcanvas.com/15-best-essential-vs-code-extensions-for-javascript-development/

Design Patterns in TypeScript:

https://www.youtube.com/watch?v=wAX8VA7FH8M&list=PLzvRQMJ9HDiSk1pnrKewLklYfCdu9Qjhy

Angular 2 Production Build – Minify an Angular App

http://devtech.in/2017/02/angular-2-production-build-minify-angular-app/

Dynamic Components creation:
http://blog.rangle.io/dynamically-creating-components-with-angular-2/

Chutzpah Test Adapter for the Test Explorer
https://visualstudiogallery.msdn.microsoft.com/f8741f04-bae4-4900-81c7-7c9bfb9ed1fenofollow

Type Script 10 important points,
http://www.developer.com/lang/top-10-things-to-know-about-typescript.html

https://narayanatechnicalworld.blogspot.in/2016/05/typescript-introduction.html

Best Site for Angular2/4 and TypeScript
https://www.eduonix.com/blog/web-programming-tutorials/12-must-know-angularjs-frameworks-to-develop-your-next-generation-apps/

Angular2 /4 Cheat Sheet 

http://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet

will add some more link in this space...

Thanks,
Bhaskar

“Lighthouse” feature in Chrome Browsers developer toolbar. This is one good way to Unit Test your Static Pages before handing them over for Integration.

Encourage you all to start using “Lighthouse” feature in Chrome Browsers developer toolbar. This is one good way to Unit Test your Static Pages before handing them over for Integration.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication.
It has audits for Performance, Accessibility, Progressive web apps.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

For more details visit : https://developers.google.com/web/tools/lighthouse/

Error handling in angular2/4

Error handling is one of those things no one wants to deal with, well in Angular you can create a global handler and never have to worry again.

Angular defines an ErrorHandler class that will allow us to override it and handle custom logic. Typically, I have my error handlers do things like:

• Show some sort of notification to the user via a dialog or growl-like component (ideally with a emoji)
• Send the error details to the server for logging

Whatever you're doing in this logic, here’s how we go about it…

for more information :
https://medium.com/@amcdnl/global-error-handling-with-angular2-6b992bdfb59c

Happy coding,
Bhaskar

Building Redux in TypeScript with Angular 4 (Angular 2+)

 Building Redux in TypeScript with Angular 4 (Angular 2+)

For many Angular projects we can manage state in a fairly direct way: We tend to grab data from services and render them in components, passing values down the component tree along the way.

Managing our apps in this way works fine for smaller apps, but as our apps grow, having multiple components manage different parts of the state becomes cumbersome. For instance, passing all of our values down our component tree suffers from the following downsides:

Intermediate property passing – In order to get state to any component we have to pass the values down through inputs. This means we have many intermediate components passing state that it isn’t directly using or concerned about

Inflexible refactoring – Because we’re passing inputs down through the component tree, we’re introducing a coupling between parent and child components that often isn’t necessary. This makes it more difficult to put a child component somewhere else in the hierarchy because we have to change all of the new parents to pass the state

State tree and DOM tree don’t match – The “shape” of our state often doesn’t match the “shape” of our view/component hierarchy. By passing all data through the component tree via props we run into difficulties when we need to reference data in a far branch of the tree

State throughout our app – If we manage state via components, it’s difficult to get a snapshot of the total state of our app. This can make it hard to know which component “owns” a particular bit of data, and which components are concerned about changes

Pulling data out of our components and into services helps a lot. At least if services are the “owners” of our data, we have a better idea of where to put things. But this opens a new question: what are the best practices for “service-owned” data? Are there any patterns we can follow? In fact, there are.

In this post, we’re going to discuss a data-architecture pattern called Redux which was designed to help with these issues. We’ll implement our own version of Redux which will store all of our state in a single place. This idea of holding all of our application’s state in one place might sound a little crazy, but the results are surprisingly delightful.

for more information on this please visit this link :http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/#whats-next-1

Happy Coding,

Bhaskar

How to Add a Test Coverage Report to an Angular CLI Project

Angular CLI has test coverage reporting somewhat built in.

First install the dependencies.

1	$ npm install karma karma-jasmine karma-chrome-launcher karma-jasmine-html-reporter karma-coverage-istanbul-reporter

Then run ng test.

1	$ ng test --code-coverage

Then run the server that shows you your report.

1	$ http-server -c-1 -o -p 9875 ./coverage

You should see something like this.

more info please visit : https://www.angularonrails.com/add-test-coverage-report-angular-cli-project/

Happy Coding,

Bhaskar

Build Your First Mobile App With Ionic 2+ & Angular 2+

What is a Hybrid Mobile App?

A hybrid mobile app is built with HTML, CSS and JavaScript and is contained in a native wrapper so that it can be installed on a mobile device.

This allows web developers to build mobile apps without having to learn the native programming languages (e.g., Objective-C, Swift, Java). It also means that you can have one codebase for all the different platforms.

Cordova/PhoneGap

The most popular native wrapper is Cordova (the engine that powers PhoneGap) and has been around since 2009. Cordova is responsible for loading your HTML/CSS/JavaScript in a web view when the mobile app is started.

The other big feature of Cordova are plugins that allow you to communicate with the native features of your mobile device, for instance accessing the Contacts list or Camera, using just JavaScript.

Ionic 2

The Ionic Framework uses Cordova and provides you with a UI framework that mimics the native UI. That means that you don't have to worry about implementing a native-like UI and debugging all the quirks between web view implementations on different platforms.

Ionic 2 is built on top of Angular 2, a very popular framework (made by Google) for developing web applications.

Both frameworks are completely rebuilt from scratch offering better performance and simplified code.

More info on this Tutorial please visit this link : https://gonehybrid.com/build-your-first-mobile-app-with-ionic-2-angular-2/

Thank you Ashteya Biharisingh

Happy Coding 

Bhaskar

Angular2 Charts

Angular2 charts examples :

Installation

1. You can install ng2-charts using npm

   npm install ng2-charts --save
   

2. You need to install and include Chart.js library in application via html or webpack bundler (more options can be found in official chart.js documentation)

   npm install chart.js --save
   

   Important: Embedding Chart.js in application is mandatory!

3. More info in this link : https://valor-software.com/ng2-charts/#top

some more Chart Examples for Angular2 :

https://www.npmjs.com/package/angular2-chartjs

angular2-highcharts  :https://www.npmjs.com/package/angular2-highcharts

Google Charts : https://github.com/vimalavinisha/angular2-google-chart

Fusion Charts : https://www.fusioncharts.com/angularjs2-charts/

Thanks,

Bhaskar

Angular2 Appinsights using Azure (telemetry)

Azure Application insights with using Angular2 application, Please check below link for more info on this.

https://www.npmjs.com/package/ng2-appinsights

Kendo UI for Angular

Kendo UI for Angular (Telerik) - Exanples : how to use Kendo UI compoenents in Angular2 using TypeScript.

COMPONENTS

• Buttons
  • Overview
  • Button
  • ButtonGroup
  • DropDownButton
  • SplitButton
  • Right-to-Left Support
  • API
  • Changelog
• Charts
• Data Query
• DateInputs
• Dialog
• Drawing
• DropDowns
• Excel Export
• File Saver
• Grid
• Inputs
• Internationalization
• Label
• Layout
• Localization
• PDF Export
• Popup
• Ripple
• ScrollView
• Sortable
• Upload
• Date Math
• Forms
• Accessibility
• Framework & Features
• Build Setup
• Styling & Themes

Bind Select DropDown List in AngularJS 2

please check this example for dropdown cascading,

http://www.talkingdotnet.com/bind-select-dropdown-list-in-angular-js-2/

Thanks,
Bhaskar

10 JavaScript concepts you need to know for interviews

refer this link for below concepts : 

https://www.codementor.io/arnavaggrwl/10-javascript-concepts-you-need-to-know-for-interviews-b6j6kp1y1

1. Value vs. Reference — Understand how objects, arrays, and functions are copied and passed into functions. Know that the reference is what's being copied. Understand that primitives are copied and passed by copying the value.
2. Scope — Understand the difference between global scope, function scope, and block scope. Understand which variables are available where. Know how the JavaScript engine performs variable lookup.
3. Hoisting — Understand that variable and function declarations are hoisted to the top of their available scope. Understand that function expressions are not hoisted.
4. Closures — Know that a function retains access to the scope that it was created in. Know what this lets us do, such as data hiding, memoization, and dynamic function generation.
5. this — Know the rules of this binding. Know how it works, know how to figure out what it will be equal to in a function, and know why it’s useful.
6. new — Know how it relates to object oriented programming. Know what happens to a function called with new. Understand how the object generated by using new inherits from the function’s prototype property.
7. apply, call, bind — Know how each of these functions work. Know how to use them. Know what they do to this.
8. Prototypes & Inheritance — Understand that inheritance in JavaScript works through the [[Prototype]] chain. Understand how to set up inheritance through functions and objects and how new helps us implement it. Know what the __proto__ and prototype properties are and what they do.
9. Asynchronous JS — Understand the event loop. Understand how the browser deals with user input, web requests, and events in general. Know how to recognize and correctly implement asynchronous code. Understand how JavaScript is both asynchronous and single-threaded.
10. Higher Order Functions — Understand that functions are first-class objects in JavaScript and what that means. Know that returning a function from another function is perfectly legal. Understand the techniques that closures and higher order functions allow us to use.

angular2 guide info

https://tutorialzine.com/2016/09/30-learning-resources-for-mastering-angular-2


more on angular2 guide.