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"







Comments

Post a Comment

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

game portal: http://overthewire.org/wargames/natas/ PASSWORDS for each level are stored in /etc/natas_webpass/natasX I made this walkthrough for people like me, i needed some help, but didnt want the spoiler, so here i will give you all the information needed to pass each level, yet not the solution. For levels needed custom web request i made a different post for powershell and javascript  with how-to's, since is a piece of learning for itself, and also for those of us that play at work and have only powershell at their hands. Although its not a complete spoiler there, its quite most of the solution so try yourself 1st. Natas The Natas game is from basic to advances web hacking. Every few levels is about whole new exploitation (with some harder ones doing comeback later), so a lot of learning. If you're new, you're the reason i am writing so much even for the 1st level, just please google EVERY topic you see, since in the following levels i assume you know the ...
Read more

Asp.Net Ending Response options, Response.End() vs CompleteRequest()

this blog is for any1 who get the ThreadAbortException when caling Response.End(), and then tried the other options such as HttpContext.Current.ApplicationInstance.CompleteRequest() and found out that there was no replacement. i'll start with the bottom line: if you want to stop right now your response and send it as is you dont have any other option other than Response.End(), period and it's the right thing to throw that EX in that case. the answer is its because there is the "HTTP pipeline" and the "Asp.Net pipeline", and CompleteRequest() cuts the HTTP pipeline but not the Asp.Net one so everything that is from handlers forwars (including all page events) continues but your part, the asp one, stays in your hands so that no information will be lost, so ur suppose to manage your code currectly, since information lost is really a bad thing, although in most cases we use Response.End() we know what we are losing and we want it. see this short article ab...
Read more

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem

if you got an error like this The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Failed to recover content group; Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 04081656-B51B-4DCD-96D4-6DB2D2CEEEE7 ) as well as these: The item could not be indexed successfully because the item failed in the indexing subsystem. ( The item could not be indexed successfully because the item failed in the indexing subsystem.; Caught exception when preparing generation GID[7]: (Previous generation (last=GID[6], curr=GID[7]) is still active. Cannot open GID[7]); Aborting insert of item in Link Database because it was not inserted to the Search Index.; ; SearchID = 92EB0180-C086-4853-BED8-F4878D9748AD ) the solution for me was to clear configuration cache (PS)  and then restart SP Search Services. THX ...
Read more