- 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
