set up dev environment and hello world – angular 2 [w/ subs]



00:00:00 – hello there in this tutorial I will show
00:00:05 – step-by-step how to set up the dev
00:00:09 – environment for angular 2 using
00:00:13 – typescript and this is a clean Windows
00:00:20 – 10 installation so let's start let's
00:00:26 – start first step install visual studio
00:00:29 – code and you can go to this address to
00:00:35 – get Visual Studio code let's go here and
00:00:43 – click on download in my case is Windows
00:00:47 – I click on it and it will start yes
00:00:56 – save for five minutes
00:01:21 – so the download is completed I go here
00:01:29 – to downloads folder and double click to
00:01:34 – install yes smooth here next I accept
00:01:48 – the agreement next can be yes
00:01:54 – in my case next next install
00:02:08 – you
00:02:12 – now
00:02:14 – to the visual studio installation has
00:02:18 – finished you can run it and
00:02:32 – turn
00:02:36 – so the next step next step is installing
00:02:43 – no GES package manager
00:02:48 – NPM you can go to this address HTTP
00:02:55 – slash slash node G as dot org we go here
00:03:04 – to the browser
00:03:05 – and here click on see these downloads
00:03:18 – windows in my case save and nine percent
00:03:30 – ten thirty sixty percent ninety percent
00:03:38 – and then close please go here and note
00:03:47 – yes double click so the Installer will
00:03:53 – open
00:04:11 – well
00:04:18 – setup is here
00:04:33 – so next I accept next can be here next
00:04:42 – and install yes
00:04:52 – you
00:04:59 – you
00:05:05 – it's completed you can press finish and
00:05:12 – okay next step installing angular CLI so
00:05:23 – we open a command prompt like this one
00:05:38 – default properties font so as okay
00:05:57 – and
00:06:03 – so we type that now still sorry NPM
00:06:22 – install cheap at angular clients sorry
00:06:34 – latest
00:06:42 – this step will take some time so
00:07:00 – you
00:07:09 – so um this is angular CLI is installed
00:07:21 – this is a very important tool and I
00:07:26 – forget to say before this digital helps
00:07:33 – as creating projects of angular 2 and
00:07:38 – also we can run it in a server so let's
00:07:49 – go to the next step create a project so
00:07:56 – I will create a new folder here in the
00:08:00 – desktop called my project open it it's
00:08:12 – empty of course and create our project
00:08:23 – first we navigate to the desktop my
00:08:30 – project folder and now we can type
00:08:35 – energy new hello angular 2 this will be
00:08:44 – the project name this step will take
00:08:48 – some time it creates these files inside
00:08:53 – the folder this
00:09:00 – create a folder called hello angular2
00:09:05 – and inside it we have these files but
00:09:12 – it's still installing packages so let's
00:09:24 – let's see let's wait
00:09:36 – you
00:09:40 – our project is successfully created next
00:09:46 – step as I showed before you have this
00:09:54 – folder with these files also we can see
00:09:59 – it in Visual Studio codes if we go here
00:10:04 – to the Explorer open folder and select
00:10:10 – the project folder hello angular to
00:10:16 – select and just a second
00:10:24 – yes we see here the destructor the
00:10:36 – structure of the project in the source
00:10:42 – we have the app folder and at that
00:10:49 – component dot HTML where is our HTML and
00:10:57 – the controller app that component dot
00:11:01 – the s where we have the code of our
00:11:09 – components of the controller of it so
00:11:19 – next step to run the application
00:11:24 – navigate to the project dear so in the
00:11:29 – command line we type CD
00:11:37 – hello anchor2 and launch into the
00:11:46 – application
00:11:47 – look sorry we type ng serve
00:12:00 – and the application will launch if
00:12:08 – everything is okay let's take a second
00:12:18 – so it's building modules also we have a
00:12:25 – message saying that lift server is
00:12:29 – listening on localhost four to zero zero
00:12:43 – twenty-one thirty percent from building
00:12:49 – that's great
00:13:11 – webpack compiled it successfully so if
00:13:16 – we go here to the browser and type
00:13:20 – localhost two points four two four two
00:13:28 – zero zero and go to these address we
00:13:34 – will see our application yes this was
00:13:48 – plus cache if we go here and change the
00:13:54 – title my title message in the app dot
00:14:02 – component RTS and save the browser will
00:14:07 – reload automatically and we will see
00:14:14 – this message my type title message and
00:14:21 – another thing to say is how to stop stop
00:14:27 – the application in the command line we
00:14:33 – type ctrl + C it will ask if we want to
00:14:39 – stop the kiss job and we type it keep
00:14:45 – the tips on yes and the application
00:14:49 – stops if we go to the browser and reload
00:14:56 – can't reach this page okay so this is it
00:15:05 – thanks for watching


Video Url:
http://youtu.be/Y9gKAVHR3e4

Comments

comments