Coding

SETUP & CLI – Angular 2.0 Final – Getting Started

  • 00:00:00 hi welcome to this video it's so great
  • 00:00:03 to have you on board you're probably
  • 00:00:04 watching this because you want to learn
  • 00:00:06 and not you or at least learn what's new
  • 00:00:09 web the viola version of English you and
  • 00:00:11 this and the next videos in this series
  • 00:00:13 we're going to build this application
  • 00:00:14 here a really simple application which
  • 00:00:18 yet uses a lot of features of English
  • 00:00:20 you like components modules routing and
  • 00:00:23 much more in this application we get a
  • 00:00:25 collection and a market and on the
  • 00:00:27 market well we can add certain things to
  • 00:00:30 our collection like let's say a box with
  • 00:00:33 also students awesome and then of course
  • 00:00:36 we see them in a collection where we can
  • 00:00:38 remove them so what this might look
  • 00:00:40 simple we're covering a lot of key
  • 00:00:42 concepts of English you in this
  • 00:00:44 application and I'm happy to have you on
  • 00:00:46 board throughout this series
  • 00:00:48 let's directly jump in with setting up
  • 00:00:51 our development environment now I'm
  • 00:00:53 going to use the angular CLI the
  • 00:00:56 command-line interface as it makes
  • 00:00:58 setting up a go to project and managing
  • 00:01:00 it really easy as you might be aware
  • 00:01:02 setting up a go to project can be a bit
  • 00:01:05 more complicated since we use typescript
  • 00:01:07 and we need a compiler for that and if
  • 00:01:10 all of that is brand new to you I
  • 00:01:11 recommend checking out one of my basic
  • 00:01:13 videos here on the channel where I
  • 00:01:15 explain why we use typescript and so on
  • 00:01:18 but basically we do use it so we're not
  • 00:01:20 writing JavaScript code directly instead
  • 00:01:22 we use typescript which is compiled to
  • 00:01:24 JavaScript and therefore we need a more
  • 00:01:26 complex project set up this Eli max
  • 00:01:29 setting up such a project very easy but
  • 00:01:31 to use this Eli we need note J s now
  • 00:01:34 we're not going to write any node.js
  • 00:01:35 code we're not writing server-side code
  • 00:01:38 here we only need it for a a development
  • 00:01:42 server which is automatically run by the
  • 00:01:44 CLI just so that we can test and see our
  • 00:01:46 code and be because of npm it's package
  • 00:01:49 manager which allows us to install these
  • 00:01:52 CLI as well as all our dependencies we
  • 00:01:54 may need in our project so make sure to
  • 00:01:57 download the latest version here on
  • 00:01:59 node.js org 6.6 at the point of time
  • 00:02:02 where I record this video and once you
  • 00:02:05 download it and install it head over to
  • 00:02:07 the command line on Windows or terminal
  • 00:02:09 here on Mac and then install the angular
  • 00:02:12 CLI
  • 00:02:14 you do this by simply running sudo on
  • 00:02:17 Windows you won't need sudo and then npm
  • 00:02:20 install – g2 install it globally angular
  • 00:02:24 CLI at latest which will pull down the
  • 00:02:27 latest version now once you hit enter
  • 00:02:30 this will download the CLI and install
  • 00:02:33 it well at least offer you enter your
  • 00:02:36 password and then you're ready to use it
  • 00:02:38 now I'll skip the step since it takes a
  • 00:02:40 couple of seconds and I'll be back once
  • 00:02:42 it has finished if you encountered any
  • 00:02:45 issues during you CLI installation as
  • 00:02:47 done business might sound I strongly
  • 00:02:49 recommend googling them to seal I still
  • 00:02:51 in beta at the point of time where I
  • 00:02:53 record this video and a lot of the error
  • 00:02:56 messages you're getting are also there
  • 00:02:59 for other people so googling them will
  • 00:03:02 probably find your solution really quick
  • 00:03:04 now if this finished all successfully
  • 00:03:07 you should navigate to a path where you
  • 00:03:09 want to create your new project and then
  • 00:03:12 you can quickly create it by running ng
  • 00:03:14 which uses the CLI we just installed new
  • 00:03:17 and the name of your project now I'm
  • 00:03:20 going to name my collection app but of
  • 00:03:22 course choose whatever name you want and
  • 00:03:24 what this will do is use the CLI to
  • 00:03:27 scaffold out a finish pre-configure
  • 00:03:30 project which we're going to use now if
  • 00:03:32 you don't like the CLI of course you're
  • 00:03:34 free to use any other seed project or
  • 00:03:36 your custom workflow you want all the
  • 00:03:39 rest of this course or of this video
  • 00:03:41 series will barely use TC ly I really
  • 00:03:45 only use it to set up this project and
  • 00:03:47 have a development server as well as a
  • 00:03:49 workflow to compile everything and
  • 00:03:51 manage my files but if you prefer a
  • 00:03:53 different approach do it like this all
  • 00:03:56 the back once this is finished i hope
  • 00:03:59 that this newly created project in
  • 00:04:01 webstorm which is the editor or the ide
  • 00:04:04 i use but of course you may use any
  • 00:04:06 other Eddy IDE like Visual Studio code
  • 00:04:08 or an editor like sublime or Adam now in
  • 00:04:12 this editor on the left you see the
  • 00:04:14 folder structure and the files to see
  • 00:04:16 like created for us
  • 00:04:17 well the été folder here is important
  • 00:04:20 for running end-to-end tests something I
  • 00:04:22 won't cover in this videos here so we
  • 00:04:24 can ignore it the source for
  • 00:04:27 here holds all our source code and now
  • 00:04:30 this looks like a lot especially since
  • 00:04:32 we haven't written a single line of code
  • 00:04:34 yet but that's basically just default
  • 00:04:37 setup which we will use and in most of
  • 00:04:39 these files we won't work for example
  • 00:04:42 here in the top level while these Styles
  • 00:04:44 the CSS file would allow us to create
  • 00:04:46 our own global Styles which should be
  • 00:04:48 added application white so this will
  • 00:04:51 just be added to our index.html and this
  • 00:04:54 index.html actually is the first very
  • 00:04:56 important file here let's have a look at
  • 00:04:59 it it's a default html5 skeleton here
  • 00:05:03 and let's ignore this a bruit thing for
  • 00:05:06 now this will be the only page which our
  • 00:05:09 server DC lie ships with will ever serve
  • 00:05:13 and the same is true if you were to
  • 00:05:14 deploy this application on a real server
  • 00:05:16 you only deploy or you only ship or
  • 00:05:20 serve one page this index.html now
  • 00:05:24 what's the sense behind that the idea
  • 00:05:26 behind this is that angular 2 allows you
  • 00:05:28 to create single page application which
  • 00:05:31 means you only have one page and
  • 00:05:33 thereafter angular 2 will re render the
  • 00:05:36 Dom add new HTML elements remove
  • 00:05:39 existing ones change some text and so on
  • 00:05:42 QED give the user the illusion of new
  • 00:05:47 pages being loaded but actually it's one
  • 00:05:50 of the same page which constantly gets
  • 00:05:52 changed and this is not angler to
  • 00:05:54 specific there are other frameworks for
  • 00:05:57 creating single page applications as
  • 00:05:59 well you could also create a single page
  • 00:06:01 application with react.js for example so
  • 00:06:05 does the single page we're loading and
  • 00:06:06 you won't find any script imports in
  • 00:06:10 here because web pack which is used by
  • 00:06:13 the CLI in the background to manage our
  • 00:06:15 project will inject these script tags
  • 00:06:18 automatically so when we actually serve
  • 00:06:21 this application we will see some well
  • 00:06:25 something happened because actually
  • 00:06:27 scripts will be added and we need these
  • 00:06:29 scripts to run our english' code which
  • 00:06:31 you write because in the end that's just
  • 00:06:33 JavaScript code getting executed in the
  • 00:06:36 browser
  • 00:06:36 well let's simply have a look at this in
  • 00:06:39 terminal
  • 00:06:40 and it's just a normal terminal
  • 00:06:42 integrated in my IDE you can run ng surf
  • 00:06:45 inside of this project folder that's
  • 00:06:48 important to serve this project with key
  • 00:06:50 angular CLI as I mentioned before DC Lai
  • 00:06:53 ships with its own server so let's wait
  • 00:06:57 a couple of seconds until this is all
  • 00:06:59 built and thereafter you may head over
  • 00:07:01 to a browser and open localhost 4200
  • 00:07:05 which should give you app works which
  • 00:07:07 means everything is working behind the
  • 00:07:10 scenes this index.html file was loaded
  • 00:07:12 as I just said some scripts were
  • 00:07:15 inserted automatically by web pack and
  • 00:07:17 these scripts happen to hold our
  • 00:07:19 application even though we haven't
  • 00:07:21 written anything yet but as you can see
  • 00:07:23 a default basic application was created
  • 00:07:26 for us here now if you want to dive
  • 00:07:29 really deep into the CLI project
  • 00:07:31 structure here I recommend checking out
  • 00:07:33 the official github page of the CLI to
  • 00:07:35 which you'll find a link in the video
  • 00:07:37 description I'm going to focus on our
  • 00:07:40 app which we can find in the app folder
  • 00:07:42 now here is where we will write our
  • 00:07:44 angular 2 related typescript code and
  • 00:07:48 GCL I happens to create as a very simple
  • 00:07:51 app which holds a app component which is
  • 00:07:54 kind of the root component of our
  • 00:07:56 application I'll come back to the idea
  • 00:07:58 behind components in the next video
  • 00:08:00 which will show us this app works
  • 00:08:03 content here we can see this if we open
  • 00:08:05 it here we see that even if you don't
  • 00:08:08 understand the rest but we have a class
  • 00:08:10 which has this title property which says
  • 00:08:13 app words and it seems like we somehow
  • 00:08:17 reference a template here with template
  • 00:08:20 URL and this template here points to the
  • 00:08:24 app component HTML file which kind of
  • 00:08:27 seems to output this title property
  • 00:08:29 again I'll come back to this or what
  • 00:08:31 happens in detail in the next video so
  • 00:08:35 overall this is what we're seeing where
  • 00:08:38 somehow rendering this app component
  • 00:08:40 HTML file template we're displaying the
  • 00:08:43 content of this title property and all
  • 00:08:46 of that gets inserted in the index.html
  • 00:08:47 file this is our first application and
  • 00:08:51 how we set it up with the CLI in the
  • 00:08:53 next video in a serious
  • 00:08:54 I'm going to explain what actually
  • 00:08:56 happens when we visit this index.html
  • 00:08:59 how our Anglo 2 application gets started
  • 00:09:01 and what makes up ananga 2 application
  • 00:09:04 see you there