Monday, September 18, 2017

Angular 4 Material - beginner tutorial / starter notes

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 { NgModule } from '@angular/core';

import {
//long long list
MdAutocompleteModule,
MdButtonModule,
//goes on and on
} from '@angular/material';

@NgModule({
imports: [
//same long long list
],
exports: [
//same long long list
],
})
export class MaterialArmadaModule { }

and then in your app.module.ts, and i'll aslo state here the LOCALE_ID that you should always use to solve all the locale stuff

import {MaterialArmadaModule} from './Modules/material.module';
import { LOCALE_ID } from '@angular/core';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
BrowserAnimationsModule,
//MUST after browser and animation modules
MaterialArmadaModule
],
providers: [
{ provide: LOCALE_ID, useValue: 'he-IL' }//your locale
],

ENJOY!

Sunday, September 17, 2017

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

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.

public class Product {
  public int Id { get; set; }
  public string Name { get; set; }
  public string Category { get; set; }
  public decimal Price { get; set; }
  public static Product[] products = new Product[] {   
    new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 },
    new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M },
    new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M }
  };
}

and the handler looks like this

public void ProcessRequest(HttpContext context) {
  System.Web.Script.Serialization.JavaScriptSerializer JsonSerializer =
    new System.Web.Script.Serialization.JavaScriptSerializer();

  context.Response.ContentType = "application/json";

  string a = context.Request["a"];

  switch (a) {
    case "GetAllProducts":
      context.Response.Write(JsonSerializer.Serialize(Product.products));
      break;
    case "FindProductById":
      string strId = context.Request["id"];
      int id = int.Parse(strId);
      context.Response.Write(JsonSerializer.Serialize(
      Product.products.FirstOrDefault((p) => p.Id == id)));
      break;
    default:
      break;
  }
}


and in our ng service, ProductRestApiService, I just changed these 3 lines

private url = '/ProductsHandler.ashx?a='; 
this.http.get(this.url + "GetAllProducts")
this.http.get(this.url + "FindProductById&id=" + id)


each in its respective place

I then ng build the project, copied the dist folder to a folder in the project I called ng4 and the only thing I needed to change in the Index.html was the <script src references and add /ng4/ before each, and the results where perfect.

inside aspx page


moving <app-root></app-root> and the <script> tags to the .aspx page, inside the form tag with the server attribute, tried to postback when I clicked search. so I changed find() in FindProductByIdComponent to return false. everything works great.

ok, so now lets build 2 different components in order to use then in say 2 part of the same page or 2 different pages.

of course we could just make 2 Angular 4 projects and have 10 js files, but we don't want that.

well, lets start by stating that if you try to use any component outside <app-root></app-root> you get an error.

inside an Asp.Net website


so I am now throwing ideas....

1st is to just create a long list of our components in 1 project and decide who to call as an attribute on <app-root></app-root> like <app-root component="clock"></app-root>

 then inside app.component.ts import and use ElementRef like this

import { Component, ElementRef } from '@angular/core';
----
export class AppComponent {
  component;
 
constructor(elementRef:ElementRef) {
    this.component = elementRef.nativeElement.getAttribute('component');
  }


and in the app.component.html just put all of the components with
*ngIf="component == 'Clock'"

and it will work as long as each <app-root component="clock"></app-root> call with a different component is in a different page, since angular is just looking for its 1st root element.

but if you want several components in the same page... well thats another post to come
but you can start looking at some resources
https://blog.sstorie.com/bootstrapping-multiple-angular-2-applications-on-the-same-page/
https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/

MVC


MVC is either working with a Hander, or ApiController, or even standard Controllers, or just throwing your data on the page and launching angular to take it as is, anyway nothing we haven't learned.


for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"



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

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 new app, like we learned here. or if you got it from angular cli home site.
i'll call mine MSProductApp. so CLI command is
ng new MSProductApp

now i'll open it with Visual Studio Code [open folder], just since it has more colors differences for JS, for .Net apps i use VS 2017.

i'll start by adding 2 components and 1 service
ng generate component AllProducts
ng generate component FindProductById
ng generate service ProductsRestApi

my results

notice that the generator changed upper-cases to dash-lower-case. this is because in HTML elements may be lower-case only, so these are fixed automatically made in Angular, and i did it on purpose for you to learn. also notice the selectors:


anyway, lets start by making a semi-tabs functionality, and this is for tut-purpose only, you should use thing like Angular Material tabs components or something for real apps.

*NOTICE, i am using picture since i DONT teach to code here, use and read the tutorials i mention, but if you're in it already, here is a .git in the end with all my code.
Bresleveloper's Angular4WebApiTutorial git

so coding the app-root and the styles.css with simple *ngIf to set tabs, sry for being so robust, i just want to get to the point quick


for just understanding how to code services see the services chapter is coursetro, and i definitely recommend codecraft.tv to understand angular 4 http, what i did, promise is the next one, and of course angular docs.

p.s., the right way is with types and modules ect. but i just want to quickly get to the point.

the right way in angular when using a service to load static data is to let the service load everything and let the component just use the data strait from the service, so planning the AllProducts component to just use our service will look like that (html, css, ts [type script, instead of js]), the files here are
all-products.component.html
all-products.component.css
all-products.component.ts


*Notice the double dot "'../product..." for our service, as it is 1 directory up, unlike with the app.module.ts which has only 1 since its in the same directory.
now, in order for the app to know our service we must import it in our app.module.ts



so now for the hard part, configuring a service to consume REST.

why do i call it the hard part? since it takes a few steps just to get the Http provider running.
1st is to import HttpModule AND Http, Respone... in app.module.ts file, and aslo add the HttpModule  in the NgModule imports section


then you again need to import Http and friends in your component .ts plus rxjs for using promises


anyway, this is the result, a simple call the our rest as the service starts working,


and if you build all this with me, you should see


now to our search page, find-product-by-id.component.[html, css, ts], just don't forget to import the service


and the function in the service


and the result


there you go!
we've created an Angular 4 SPA that consumes a simple .Net WebApi.

again the git Bresleveloper's Angular4WebApiTutorial git

next we'll see how to take this app out into a simple .Net WebForms project or MVC.
 Taking Angular 4 as Stand Alone with Asp.Net Web Forms and MCV

for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"


Friday, September 15, 2017

Angular 4 - Understanding Angular 4 Basics and Files

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 this you can see in the Angular CLI site, or the Angular site Docs

i also recommend this nice tutorial from courstro

P.S. - some of these commands can take several minutes.

"node -v" -  just make sure you have node installed
"npm install -g @angular/cli" - will install angular in your computer
"ng new my-dream-app" -  will create a folder "my-dream-app" with a project with angular 4, node, testing, build tools, git, rendering, everything you need.
"cd my-dream-app" -  go into that folder
"ng serve" -  will create a node socket to test your ng code, just browse to "http://localhost:4200"
in the cmd press twice with time between Ctrl+c to stop the service.
"ng build" -  build the code to few final HTML and JS files


Quick Overview of the results


this tutorial is not to teach you how to code, but how to work with Angular 4 and understand whats going on, as most people can code but not know whats what.

in the "my-dream-app" folder most of the filed are configuration file, for TypeScript, for building the app, for testing (protactor and jasmine) and node.

the folders:
".git" - hidden folder, preparing your repo, you can eventually deploy all for free to github and angular git pages, learn how to in this coursetro
"dist" - final HTML and JS files
"git" - e2e - testing stuff
"node_modules" - instead of IIS Express that acts as a server for your site, now node does it.
"src" - the files YOU write.

i want to focus src and dist, as the rest are just there to give you a nice eco-system to build and deploy and fast dev as explained in the prev post.

1st there are all the files under "src", most are just TypeScript configs, and there are the simple "Index.html" and "Styles.css", which are the basics and starting points for every web project. "Styles.css" is empty, and "Index.html" has just "<app-root></app-root>" tag for the root Directive / Component. <-- this is just a teaser, go learn the differences.

"environment" for differences for prod and dev builds.
"assets" as is, images and stuff, you might need to remind git to add them ("git add src/assets").

"app" for YOUR CODE. you will do commands like "ng generate component my-dream-component" to create new components or services and it will put all the new files here.

"dist" will appear after a build there will be the final HTML and JS files.

lets check them out.
"index.html" - same but with JS sources of the followings

JS's each with his map file

"inline.bundle.js" - has the This is a webpack loader

"main.bundle.js" - has YOUR CODE in it, WebPacked

"polyfills.bundle.js" - let me quote whats inside "This file includes polyfills needed by Angular and is loaded before the app"

"styles.bundle.js" - has the content of the .css files. NOT the X.component.css, those go to main.bundle.js

"bundle.bundle.js" - this replaces the "angular.js" file

all those files are the sums of many other files, the bundling thing you can get form this image from coryrylan blog, it takes all the dependencies and build them to 1 big file, that is called bundle and is done with webpack



in the next post we will make a most basic component and see how to use it with .Net, starting with WebApi. Working with Angular 4 and .Net the right way - WebApi

for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"







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 plugin.

there were some other growing Frameworks like KnockoutJS and BackBoneJS, you can see most of them in this awesome TODO's Tutorial with EACH framework called TodoMVC, and they sometime remove old or non-popular ones.

Angular JS Age


then, a bit before 2010, browsers became strong and more elegant, complex, heavy-duty stuff could be done so people moved from Plugins to Frameworks. Framework MEANS you do EVERYTHING in and by and with the framework, according to its way. and that's very important note.

so many frameworks came, and the real war in the beginning was Angular.js and Ember.js. then came React.js. but why? (read some in sitepoint for example)

well, just like you want to move from Assembly to C to C++ to C#/Java, its kinda the same. people, adopted by Corps, wanted more power in the JS field, so the creating great things, each with a bit different philosophy, some wants to help you push in some components with more power, like React, and some want to take over with a lot of steroids, like Angular.

so Angular survived all the way, made some changes, and got the idea of its real power - take over the entire Client / SPA dev eco-system its own way, and make it the best.

its important to understand that, since many people complain about the Learning Curve, and how hard it is to make simple things with Angular, and the are right, if you want simple help with your website you should use jQuery. for a complex component, but still just 1 or few but inside your website, use React. for a complex SPA like GMAIL or heavy TDD use Angular.

i must mention TypeScript here, and the link is to the Docs intro, that changed everything too by making JS as an OOP language, or at least more Typed, as many, many of the followings is based on that.

Age of JavaScript 6, HTML 5, CSS 3, and Components.


so with all that going on, and everybody struggling with the same burdens with every front, web or SPA, the W3C, which is in charge on how our web is built like the API's the browsers should offer, decided to change everything.

HTML 5 now gives you elements you used to need plugin and flash.
CSS 3 now offers Animations and Responsive tools.
JavaScript, ECMAScript 6, now offers most of what you used to need jQuery for.

and some new concepts are around now, born by Angular JS and its friends long time wars like

WebPack - you have 20 little JS files for 20 components each with html and css? lets make it all 1 thing.

Shadow DOM - take a piece of HTML, CSS and JS and hide it in a little box that is a new HTML Element, like input type "range".

Web Components - just like in server side programming you have a DLL for each thing, or a library or user control or whatever, in the web when a certain part must do its own job independently its technically called a component, doesn't matter if its on the whole page or a little clock.

with all that, a web dev can now do everything he used to do with jQuery or basic angular or react with pure JS, CSS, and HTML. so no more need for those. so whats now?

New Age, with NodeJS and CLI, Cloud and git


so now with no more solutions that were made to solve problems, like jQuery and AngularJS, and even React, each "item" moved on to better implementing each its own philosophy, with the help of NodeJS.

NodeJS is another thing that changed the web. not because its a server platform built on JavaScript, but because its light enough to be used as a help tool, not noticed by the main framework. thus when developing with Angular 4 and others you have a dev enviorment based on Node.

also, Windows adopted the CLI, meaning you can do many things new with the Command Line Interface, your CMD, that thing that looks like DOS. so for example, creating a new project in VS, of template MVC5 just write "create mvc5", and boom, no more screen with some choices ect., and adding a folder with all that 3rd party nuget - again, just "npm bla bla". Linux people are happy, but its still hard to install anything on linux, but for devs, that makes a lot of possibilities, like creating and entire angular4 project with all needed in 1 line, or adding a component or anything in 1 line, what used to take a lot of coding.

Could made a lot of space for us to deploy our things, via git, so that's another thing, you can now easily put your code in the cloud, build it and run it, .Net or JS.

so what do they what and how they do it?

jQuery still wants to offer you even more simple life.
TypeScript want to change JavaScript again, and they are doing it well and being adopted.
React wants to help you do components more easily.
Angular want to be you Steroids Framework.

so for just some quirks go pure JS CSS.
for extras and plugins jQuery.
for anything that is NOT big SPA, or if you don't need or want a Framework limitation, use React.
if you're going SPA, big thing-big framework, or really Complex, here comes Angular 4

Angular 4


i must admit i didn't use Angular 2, yet used Angular JS from 1.0.8. i got the point where it wants to be the overseer and i liked the way it did it. 2 was an experiment with the new ongoing stuff so i just waited for 4.

so since angular wants to rule them all, they went this way. so no more a simple JS file with the framework, but you create a big projects that allows you to manage everything and then "compile" it to (5) js file(s).

also project is based on Node so when you save immediately you see all changed in the browser.

CLI for not being depended on an IDE, commands to create items, build them, test, deploy ect.

WebPack so you can still write a lot of small components, directives, css files, ect. ect. and it will render evreything into 5 files, 1 for the framework dependency, and 1 for your code. the others in the next post.

and the made it all prepared for git deployment :)

so how do you use and tame it? lets find out in our next post "Angular 4 - Understanding Angular 4 Basics and Files".

for the entire serie
"Angular 4 with .NET (webForms/MVC) Tutorial - Table Of Content"

Tuesday, September 5, 2017

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 the Internal, or private for nothing.

for home use, just do an external. and if it doesn't work, it means you just chose the wrong network.

you can check this from Control Panel -> Network and Sharing Center -> Change Adapter Settings, there you should see your vSwitch, and it should not have a red "X" on it. if it does, change the "Connection type" on the switch manager until one works.

3. creating Virtual Machine


go to MS DOCS about creating a new VM for a simpe tutorial, while for Kali Linux, you'll have to choose an .iso yourself, so just download from the Kali Site. use the latest 64bit.

when you will try to run the machine, IF you choose Generation 2, you'll get an error. fix it by Disabling the Secure Boot from the VM security settings, as explained here.

4. Kali settings


you might not have a repository at all, meaning that all you "apt" commands just wont work.

in the Kali web you have the right repository, and your easiest way to open the right file is in the terminal write

   leafpad /etc/apt/sources.list


5. RDP


so following kali forum on how to install xrdp, i'll take the minimum steps needed.

we start by updates and upgrades

   sudo apt-get update -y && apt-get upgrade  -y
   sudo apt-get dist-upgrade -y

i got a window asking to enable a feature that is a security risk, mainly since you run things as root. since its a home machine, i don't mind. for a server of prod machine, you should create a user, and generally never use root.   P.S. all that might take some time

and then the xrdp 

   sudo apt-get install xrdp lxde-core lxde tigervnc-standalone-server -y

now some config editing, start with the xrdp.ini


   sudo leafpad /etc/xrdp/xrdp.ini


and find autorun= and change int to autorun=Xvnc.

now another file

   sudo leafpad /etc/X11/Xwrapper.config

changing the allowed_users=console to allowed_users=anybody (enabling root privileges with the rdp). more info in systutorials.

starting the services to test the connection

   sudo service xrdp start
   sudo service xrdp-sesman start

try to connect, choosing Xnvc. write ifconfig in the terminal to get your machine's IP.

if you make it, then make them to start on startup

   sudo update-rc.d xrdp enable
   sudo systemctl enable xrdp-sesman.service


NOTICE that when you close and open your RDP you will NOT return to you session
couldn't find a solution yet, as all the port games didn't succeed. also it doesnt work if you have the Hyper-V session open.

6. RDP Advanced


rdp shortcut - create a new text file and change it to <whatever>.rpd and right click and "Edit" and set your details, i.e. your machine's IP.

i dont want to choose Xvnc eveytime again.
so in the xrdp.ini just move the [Xvnc]to the top. restart and try.

skipping the username and password : in the [Xvnc] part change the username and password values from ask to root and your password. restart and try. just need to press OK. NEVER UNLESS IN YOUR COMPUTER. i couldn't find a way to remove the log screen, i guess you need a linux client.

NOTICE that from RDP you cant get to "service" in the terminal unless you use sudo.

and make it a bit faster.



7. Google Chrome

ha, everything in linux is hard...

follow this link to install chrome, remember to SAVE the file, and from that directory right click to open terminal before the install command.