Posts

Showing posts from September, 2017

TypeScript Arrow Functions Names Issue (Angular 4)

Image
Currently using TypeScript 2.3.3 with Angular 4.2.4.

I've created a service, doing a simple promise, then (success, failure), into another then / catch in the calling function.

and i was surprised to learn that TypeScript, (unlike ES6 definition), still doesn't name arrow functions. That simply means that whenever you create a function like this

"(args or not) => { //code }"

you can't ever give it a name, and it will always stay as an anonymous function, mainly meaning that in an error when you would like to see the call stack you'll get


and this is a wrong practice, you should ALWAYS name your functions just for that purpose.

the issues can be seen in StackOverflow and GitHub Typescript issue #6433

solution would be to actually use the function keyword everywhere.

in a class these 2 gets into the prototype and do not appear in the call stack at all:

Get(url) { console.error('Get'); }; Get(url) : void { console.error('Get'); };
these 2 declar…

Visual Studio Team Services (VSTS)

Image
I've started touring what the VSTS has to offer, and the truth is that they offer a great TFS, and that's it, for the free account. also it builds your solutions, so eventually you know that the thing will work at any other machine and its great, really.

For any hosting you need to acquire an Azure account, and while you can get one for 1 month free trial, there are plenty of Really Free .NET hosting services out there, my favorite is AppHarbor, where you can use a github repo, or if you want free and private there is BitBucket.

But with MS, like MS, things just can't go smooth.

I created a simple Web Api project (without MVC), just TesterController as is OOTB, and commit.

just like with the API Controllers, you create one and forget to add "Controller", you just can't understand why things not working, and nothing tells you to add that words, or auto-add it, same here that the API needs 5 Nuget Packages, but it references the LM folder instead of the solutio…

Angular 4 Material - beginner tutorial / starter notes

Image
i have just tried the Angular 4 Material, following their get started guide and just tried the DatePicker.

but things didn't go as well as expected, until i jumped to the plnk to see the example.

if you'll notice the main.ts it has a long long list of imports


i just tried to add all this long list to my app, and it finally worked.

technically if you'll import just the MdDatepickerModule as stated in the docs something will happen, even the <md-form-field> didn't worked. but eventually you want it initially to look just like in the docs.


so my 1st advice - import all the modules. when you get to the point where you want to change or use specific things, start cutting the modules.


2nd advice is to make a separate module with all the material modules. but how to do it right?
well, 1st don't put the new file in the app/src folder or you will get this error.

2nd, you just copy that long long list, and paste it 3 times, your file should look like this:

import { NgMo…

Taking Angular 4 as Stand Alone with Asp.Net Web Forms or MVC

Image
once you do in the CLI ng build you will have a new folder named dist containing the rendered solution, in our case our nice Products App.

I created a new ng project named MSProductsAppAspNet in order to put it inside an Asp.Net project.

IISHander (ashx)
so to make things easy, i started with a handler to do the same thing we did with the web api, merging the Products[] array init lines as a static var inside Product class.

publicclassProduct {
  publicint Id { get; set; }
  publicstring Name { get; set; }
  publicstring Category { get; set; }
  publicdecimal Price { get; set; }
  publicstaticProduct[] products = newProduct[] {
new

Working with Angular 4 and .Net the right way - WebApi

Image
As already stated, Angular is Framework for Singe Page Applications. so its NOT for Websites that wants a good enhancement for their pages. but.... we love Angular so we do want to learn how to do that, but lets start at the beginings

1st lets just create a simple SPA app with WebApi(v2), and see how the thing works.

as stated, this tutorial is not to learn how to code, so i'm using the Basic MSDocs example for webApi as is, just copy paste and make sure its working, and DO try to understand. in the end its just a RestfulAPI.

*MAKE SURE you allow CORS for the webApi since we're doing all this at localhost, so add to the web.config (msdn)



so we now have these 2 rest urls (you might have a different localhost port like localhost:493820
http://localhost:57267/api/products
http://localhost:57267/api/products/1 => [id]

great, now we will create an SPA app with 2 tabs, 1 for all and 1 for search.

if you never coded in Angular 4, see this coursetro nice tutorial

start by creating a …

Angular 4 - Understanding Angular 4 Basics and Files

Image
so lets start fast by learning to create an Angular 4 project, from the eyes of a .Net developer.

1st pre-requisite is Node JS, download from here.

Windows CLI
press Windows+R, it will open the "RUN" command line and write "cmd" and press Enter.
the windows CLI, "Command Line Interface" will open.

go to a folder where you want to put all the project's file, for example for me under documents, the commands will be: [note that pressing "tab" will give best result like "cd d" will complete to "cd documents"] "cd documents" - the CLI starts at your user folder, so this it to go into a child folder "md "Angular 4"" - you can make folders via CLI "cd "Angular 4"" -  go into that folder
Angular CLI
so now you will download and create an entire angular 4 project, with Node, and build it and test it in your browser, what used to be VS -> new project -> web X -> F5.
all thi…

Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content

After quite some time, the time for me to start playing with Angular4 has come, and as a .NET developer, used to integrate AngularJS (angular1) with my WebForms / MVC / SharePoint solutions, suddenly there is a CLI, new unknown files, and questions jumps:

- Where is the AngularJS file?
- Where is MY code?
- How do i integrate Angular4 with my .Net solution, MVC or WebForm?
- Why do i need all this CLI and NodeJS?

well, i would like to answer all of that, after answering that to my self, and share that with you.

so i'll just build some posts

1. Angular 4 - History, Why(s), Angular 4 Basic Design.
2. Angular 4 - Understanding Angular 4 Basics and Files.
3. Working with Angular 4 and .Net the right way - WebApi
4. Taking Angular 4 as Stand Alone with Asp.Net Web Forms and MCV


Hope you Enjoy!

Angular 4 - History, Why(s), Angular 4 Basic Design

Brief History

Stone Age
once upon a time a nice company developed a browser named NetScape. all you youngsters that doesn't know what that is, go read that Wiki. anyway they changed the web by inventing JavaScript.

with time all new browsers adopted the new scripting language and each implemented it a bit different. you needed to be a real expert to do something better than an alert() or confirm(). the best you had was simple forms. i think we can date this up to the early 90's.

jQuery Age
then came some standards about JavaScript and CSS, and Java and Microsoft and more developed Web Platforms, which could do cool things in the server, but the client side was the land of jQuery.

jQuery was (and still is) an outstanding project for Cross Browser Development upon the Client Side, making is simple to do the same thing with all browsers, including DOM manipulations, Creation, CSS, and even Animations. being a web dev meant being a jQuery man and the term Plugin was actually jQuery…

Setting up (Kali) Linux on Windows 10 Pro Hyper-v

well, since that forces me to travel along blogs and stuff... lets write everything down. this can be basically the same for any Debian, and i guess even Ubuntu.

if i'll write a detailed post it will take forever for something that someone that creates a VM should know, so lets write what is needed.

1. Enabling Hyper-V
from MS DOCS about enabling hyper-v open Windows Powershell with "Run as Administrator" and copy paste this command 
Enable-WindowsOptionalFeature -Online -FeatureName:Microsoft-Hyper-V -All
2. Internet
you have 2 ways to go. External, or Internal/Private.

External means you create a virtual switch that just connects to your computer's internet and is open to the world. don't forget to get an Anti Virus.

Internal/Private means a virtual switch that is not connected to your computer's internet. if you do anything in prod or company or secure, choose this, and go to your default Ethernet connection and share (Properties -> Sharing) it with t…