Angular 2 Fundamentals 9 [w/ subs]



00:00:01 – okay to get us started we've created the
00:00:04 – small getting started project on github
00:00:05 – this project will keep up to date as we
00:00:08 – make updates to the course and the
00:00:10 – readme will tell you the current state
00:00:12 – of the course currently as I'm recording
00:00:14 – this it's still a work in progress when
00:00:16 – we publish the course we'll update this
00:00:18 – to show the current status so let's go
00:00:21 – ahead and clone this repo so I'm going
00:00:23 – to go over to my git bash console and
00:00:25 – change directory to where I want to put
00:00:28 – this repo and then I will just use git
00:00:32 – to clone it okay now let's go take a
00:00:36 – look at what we just downloaded you can
00:00:38 – use whatever editor you'd like for this
00:00:40 – course we're going to be using vs code
00:00:42 – but there's nothing special about vs
00:00:44 – code so just use whatever you'd like to
00:00:46 – use okay let's go ahead and open the
00:00:49 – folder we just cloned from git okay
00:00:55 – there aren't too many files here just a
00:00:58 – few things to get us up and going
00:00:59 – quickly so let's take a look at each of
00:01:01 – them first there's these four files the
00:01:04 – git ignore file is just for working with
00:01:06 – git and it isn't related to angular at
00:01:08 – all then we just have this Save icon
00:01:10 – here so that our browser doesn't
00:01:12 – complain when we browse the app this
00:01:14 – readme file is the readme for our repo
00:01:17 – this is the readme file that will keep
00:01:19 – up-to-date to show the status of this
00:01:21 – course and then we just have this
00:01:23 – style.css this is just some very basic
00:01:25 – styles for our demo application and then
00:01:28 – we also have this app folder and right
00:01:31 – now it's pretty much empty except for a
00:01:32 – few images that we'll use in the course
00:01:34 – okay that leaves us with these files Joe
00:01:38 – and I got these from the angular
00:01:40 – QuickStart repo the angular QuickStart
00:01:42 – repo is a repo that you can use to get
00:01:44 – started quickly with a new angular app
00:01:46 – and it includes these files that we've
00:01:49 – included in our app and they're great
00:01:51 – for getting started on any of your
00:01:53 – angular projects we've made a few small
00:01:55 – changes so let's take a look at each of
00:01:57 – them first let's look at the TS config
00:01:59 – JSON file this is configuration for the
00:02:02 – typescript compiler and we've left this
00:02:05 – as is from the getting started repo
00:02:06 – except that we've set no implicit any
00:02:09 – defaults this will just give us a little
00:02:11 – more flexibility to use as much or as
00:02:14 – little types Cree
00:02:15 – as we'd like next is the package.json
00:02:18 – file and we've made a few changes here
00:02:21 – too we're using our own server so these
00:02:24 – lines have changed slightly and then
00:02:26 – we've also added these two dependencies
00:02:29 – these are NPM modules that we've written
00:02:31 – for this course has nothing to do with
00:02:33 – angular so don't worry about them too
00:02:35 – much but ng to eff bootstrap is a node
00:02:38 – package that is basically a wrapper
00:02:41 – around Twitter bootstrap with a few
00:02:43 – modifications to fit our needs for the
00:02:45 – demo app bootstrap is a CSS library that
00:02:48 – gives us a bunch of free styling we just
00:02:51 – abstracted this into an NPM module to
00:02:53 – make it simple so that it didn't detract
00:02:55 – much from the course and then this ng to
00:02:58 – eff server import is the web server that
00:03:01 – we'll be using to run our app this is an
00:03:03 – express server and we'll take a closer
00:03:05 – look at some parts of that later in the
00:03:07 – course but just be aware that this
00:03:09 – server is what will serve our index.html
00:03:12 – on all of our JavaScript and HTML files
00:03:14 – you can see up here in our npm scripts
00:03:17 – that when we call start it will run our
00:03:19 – server which is our custom web server we
00:03:22 – wanted to be able to focus on angular in
00:03:24 – this course so we've kind of abstracted
00:03:26 – the server away next is the system JS
00:03:29 – config file this obviously is the
00:03:32 – configuration for system jf and we
00:03:35 – haven't changed it from the angular
00:03:36 – getting started project except that down
00:03:39 – here we've just removed a piece of code
00:03:41 – for an in-memory web api that we're not
00:03:43 – using in this course and then the last
00:03:45 – file that we're using from the getting
00:03:47 – started project is this index.html this
00:03:50 – is a pretty basic HTML file and
00:03:52 – identical to the index.html file in the
00:03:55 – getting started repo except that we've
00:03:57 – added these three references here that
00:03:59 – are all for bootstrap styling you notice
00:04:02 – that we're importing jQuery here but
00:04:04 – that doesn't have anything to do with
00:04:05 – angular angular doesn't have a
00:04:07 – dependency on jQuery we're only adding
00:04:10 – that because some of our menus in our
00:04:12 – app are styled with bootstrap and that
00:04:14 – needs jQuery so other than these
00:04:16 – references all we've changed in this
00:04:18 – file is that we've removed a few things
00:04:20 – that we'll add as we go through the
00:04:22 – course that you get a better idea what
00:04:23 – they're used for okay so let's go run
00:04:26 – our server and take a look at what we've
00:04:27 – got here
00:04:28 – so let's change directory into the
00:04:31 – directory where we cloned our repo and
00:04:33 – then there's a bunch of NPM packages in
00:04:36 – our package JSON that need to be
00:04:39 – installed so we need to do an NPM
00:04:42 – install ok now that's installed we can
00:04:46 – go ahead and run our server I'm just
00:04:48 – going to do an NPM start if you remember
00:04:50 – in our package JSON the start script
00:04:52 – just runs our custom Express web server
00:04:55 – ok you can see that's listening now on
00:04:58 – port 80 808 so let's go take a look at
00:05:01 – that ok so you can see we just get this
00:05:05 – basic empty web page you may be
00:05:07 – wondering why the page has this dark
00:05:09 – blue background instead of the default
00:05:10 – white background that's simply because
00:05:12 – of the stylings that we're getting from
00:05:14 – our Twitter bootstrap theme let's just
00:05:16 – go over to our index.html and add some
00:05:19 – hello world text so that we can see that
00:05:21 – this page is being used okay let's go
00:05:26 – look at that and refresh all right
00:05:28 – there's our hello world text so you can
00:05:30 – see that our HTML page is being rendered
00:05:32 – here now let's go add some angular


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

Comments

comments