Coding

Angular 2 Tutorial (2016) – Setting up the Development Environment

1 year ago
  • 00:00:01 the first thing so that we are actually
  • 00:00:03 able to write some code is to set up our
  • 00:00:07 local development environment now in
  • 00:00:10 this course I'll use typescript to write
  • 00:00:14 angular 2 now before you're running away
  • 00:00:17 scared what typescript is just once you
  • 00:00:20 explain to you typescript is additional
  • 00:00:23 layer to JavaScript which compact
  • 00:00:25 compiles down to plain old JavaScript in
  • 00:00:29 the end which was chosen by the angular
  • 00:00:32 2 team as they are chord language to
  • 00:00:35 build angular 2 on as it offers some
  • 00:00:40 features plain JavaScript doesn't offer
  • 00:00:43 as of now that includes classes which
  • 00:00:46 kind of were added but it also includes
  • 00:00:49 a modular approach decorators some very
  • 00:00:53 nice things which really help us in
  • 00:00:56 developing angular 2 apps and which were
  • 00:00:58 the reasons reasons why the angular 2
  • 00:01:02 team picked typescript and which is the
  • 00:01:05 reason why we will follow their path and
  • 00:01:08 also use typescript now setting it up is
  • 00:01:10 real easy the first thing we need to
  • 00:01:13 install typescript and what we will need
  • 00:01:15 throughout this course is NPM node
  • 00:01:17 package manager so let's get this fire
  • 00:01:20 up on you tab on your browser and just
  • 00:01:22 enter NPM and the very first result is
  • 00:01:27 the one you're looking for then you want
  • 00:01:30 to scroll down to installing NPM and
  • 00:01:34 then just pick whatever operating system
  • 00:01:36 you're on and so on
  • 00:01:38 just pick or write installer now once
  • 00:01:43 NPM is installed just enter typescript
  • 00:01:46 into your browser get to the very first
  • 00:01:50 result click on get typescript now and
  • 00:01:53 just follow this instruction here and
  • 00:01:57 enter MPM install means g typescript
  • 00:02:01 which will install it globally on your
  • 00:02:03 computer which is perfectly fine because
  • 00:02:05 we will need it for all our angular
  • 00:02:07 applications so once you've done this
  • 00:02:13 you're almost ready to go
  • 00:02:15 of an additional thing is head over to
  • 00:02:17 github to download an angular 2
  • 00:02:21 boilerplate which I set up which will
  • 00:02:23 include everything you need to get
  • 00:02:26 started in a second
  • 00:02:27 no more configuration needed just clone
  • 00:02:30 a specific github repository and
  • 00:02:33 specifically I want you to head over to
  • 00:02:36 get up calm mschwartz Mullah which is my
  • 00:02:39 name and then slash angular QB the
  • 00:02:42 boilerplate this is the boilerplate you
  • 00:02:48 will need and then you can either
  • 00:02:50 download it as a sip or easier just copy
  • 00:02:54 this link here fire up a new terminal
  • 00:03:00 window and now let's create our project
  • 00:03:03 folder and there just right type git
  • 00:03:07 clone and the link you paste copied here
  • 00:03:14 now if you don't have get install or
  • 00:03:17 something like this is perfectly fine
  • 00:03:19 just to download that zip file unzip it
  • 00:03:21 and you're already ready to go to now
  • 00:03:28 once this cloning is done CD entered a
  • 00:03:32 newly direct create a directory here and
  • 00:03:35 then we need to execute a command MP
  • 00:03:40 install which will now install all the
  • 00:03:44 packages and dependencies required by
  • 00:03:47 angular 2 and this installation process
  • 00:03:50 will take some time I'll be back once
  • 00:03:52 it's finished on my computer ok
  • 00:03:54 my installation just finished and now
  • 00:03:57 what we're going to do is start gulp
  • 00:04:00 which will take care about the
  • 00:04:03 transpiling of typescript to normal
  • 00:04:05 JavaScript by just entering gulp here
  • 00:04:13 and then we will need a new terminal
  • 00:04:16 window in the same directory and inside
  • 00:04:19 this directory we need to enter M p.m.
  • 00:04:22 start which will run a live server you
  • 00:04:27 can see here and as you can see when it
  • 00:04:31 writes hello world on your screen in the
  • 00:04:33 browser here everything is working fine
  • 00:04:36 and your angular 2 app is working now in
  • 00:04:39 the next video we will change what we
  • 00:04:42 see here and write our very first own
  • 00:04:45 component

You may also like