AngularJS Tutorial #2 Installation and Set Up Getting Started with AngularJS [w/ subs]



00:00:00 – the first after learning any new
00:00:02 – technology is the classic hello world
00:00:04 – example in this lecture will get
00:00:06 – singular and all of the dependencies
00:00:08 – assault and simply print something out
00:00:10 – to the screen
00:00:11 – [Music]
00:00:13 – ok so before we get going on our
00:00:17 – application we're going to need to
00:00:19 – install a few things we're first going
00:00:21 – to need a text editor and then we'll
00:00:22 – also need a local web server so that we
00:00:25 – can serve the application as if it were
00:00:27 – out on the internet somewhere we're
00:00:29 – going to need the angularjs framework
00:00:31 – and then next we will need bootstrap
00:00:34 – which you might be familiar with we're
00:00:36 – going to use bootstrap for styling the
00:00:38 – application and we're finally going to
00:00:40 – need a package called you I bootstrap
00:00:43 – and you can kind of think of you I
00:00:45 – bootstrap as the regular bootstrap
00:00:47 – framework but customized for angularjs
00:00:49 – so like we said we're going to need a
00:00:53 – text editor for our work on this
00:00:55 – application and if you don't already
00:00:57 – have one I highly recommend sublime text
00:00:59 – it's a great text editor with a lot of
00:01:02 – versatility you can get it over here at
00:01:03 – sublime text calm and you just have to
00:01:06 – go to the download link to get it for
00:01:08 – whichever operating system you're on
00:01:10 – we also said they were going to need a
00:01:13 – web server and i'm on a mac so amusing
00:01:16 – map which is Mac Apache my sequel and
00:01:19 – PHP and to download it simply go to the
00:01:22 – download link and follow the
00:01:24 – instructions if you're on Windows a good
00:01:26 – solution is wamp which is windows Apache
00:01:30 – my sequel and PHP and if you are on
00:01:33 – either or linux another good option is
00:01:36 – amp or xampp as some people call it
00:01:38 – again just follow the download link and
00:01:41 – follow the instructions in the wizard
00:01:42 – we're not actually going to be really
00:01:44 – using the my sequel or PHP portions of
00:01:48 – these web servers but the web servers
00:01:50 – themselves will let us serve the files
00:01:53 – for application as if they were out on
00:01:55 – the internet somewhere now when it comes
00:01:58 – to actually getting the code for the
00:01:59 – frameworks that will be using there are
00:02:01 – a couple different options but we're
00:02:03 – going to keep it really simple and use
00:02:04 – the content delivery networks for each
00:02:07 – of these frameworks
00:02:08 – so here we are at the angularjs dot-org
00:02:11 – homepage and what we can do to get the
00:02:13 – CDN link is if we go to the download
00:02:16 – button we see it listed here under CDM
00:02:19 – there are many different ways that we
00:02:21 – could actually pull in the code for
00:02:22 – angularjs we can download the files
00:02:25 – directly either minified or uncompressed
00:02:27 – we could use a content delivery network
00:02:31 – like we said or we could use a package
00:02:33 – manager like power or npm but again
00:02:36 – keeping things really simple
00:02:37 – we're just going to reference this CD
00:02:39 – and link for our project so we'll grab
00:02:42 – that in a second but let's take a look
00:02:43 – at bootstrap next we can get the
00:02:46 – bootstrap medium length right here on
00:02:49 – the bootstrap homepage and for you I
00:02:52 – bootstraps which again is the bootstrap
00:02:55 – framework but customized for angularjs
00:02:57 – there's actually a CDN linker rate on
00:03:00 – their website but we can actually get it
00:03:02 – if we go to see dnj s.com and cdnas com
00:03:07 – is sort of a repository for different
00:03:09 – CDN links and if we search UI bootstrap
00:03:12 – we see the first here is angular UI
00:03:16 – bootstrap and that's exactly what we
00:03:18 – need
00:03:19 – so here it lists there's four different
00:03:21 – links we can get the minified or
00:03:24 – unmodified versions of both the main job
00:03:27 – profiles and also a set of templates
00:03:30 – that will need for you I bootstrap and
00:03:32 – we will probably just grab the minified
00:03:34 – versions of these ok so that's all of
00:03:37 – the CD and links that will need for our
00:03:39 – project will bring them in in just a
00:03:41 – second but first you need to set up our
00:03:43 – project folder structure and if we go
00:03:46 – over here to the Finder window that is
00:03:48 – if you're on Mac will go to applications
00:03:51 – and down to the map directory again
00:03:54 – assuming that you are using men and men
00:03:57 – serves all of its files from the htdocs
00:04:00 – directory so we'll need to create a new
00:04:02 – folder and if you're anything like me
00:04:04 – there's no space left to right click to
00:04:06 – create a new folder but we can do shift
00:04:08 – command n and that gives us a new one
00:04:10 – will call this ng cribs and then we'll
00:04:16 – just want to drag it and drop it into
00:04:18 – sublime text
00:04:19 – we'll need to file to get going with the
00:04:22 – first being an index dot HTML file and
00:04:26 – this is going to be the HTML entry point
00:04:29 – for the application so let's say that as
00:04:31 – index dot HTML and then we're also going
00:04:34 – to want a JavaScript file called apt rjs
00:04:38 – and a pas will be the JavaScript entry
00:04:42 – point for the application
00:04:43 – alright so the first thing we want to do
00:04:45 – is get some HTML structure here i'm just
00:04:48 – going to paste in some boilerplate HTML
00:04:50 – that we've all seen before
00:04:52 – let's give it a title of ng Crips and
00:04:55 – the next thing we want to do is get the
00:04:57 – CDN length put in here to reference all
00:04:59 – of the scripts and CSS that will need so
00:05:02 – back over here in chrome the first thing
00:05:04 – is that i'll grab is angularjs so again
00:05:07 – at this download button will just copy
00:05:10 – all of this paste it down here below the
00:05:15 – body and I guess I'll need a script tag
00:05:18 – for that so we can create one script and
00:05:21 – we can do source equal to the script
00:05:26 – next one we will get is the bootstrap
00:05:30 – references so let's copy this link for
00:05:33 – the CSS and we'll paste it just below
00:05:37 – title and then we won't really need the
00:05:41 – JavaScript from the regular bootstrap
00:05:43 – framework for this we'll leave that for
00:05:45 – now and then we'll go over here to our
00:05:48 – CD and jas listing for you I bootstrap
00:05:51 – and let's grab the UI bootstrap minified
00:05:54 – version and we'll paste that in again I
00:06:00 – need my script tags
00:06:04 – we'll also get the templates the
00:06:10 – minified version as well
00:06:16 – alright so those are the scripts that we
00:06:20 – will need and let's just do a little
00:06:22 – welcome message here to make sure where
00:06:23 – goods and why don't we try this out in
00:06:29 – the browser so we come over here to
00:06:31 – google chrome and we open up a new
00:06:34 – window
00:06:35 – let's go to localhost / ng cribs and
00:06:41 – depending on how you have your map set
00:06:43 – up this might require you to put in a
00:06:46 – colon and then maybe a port like 80 80
00:06:48 – and in my case I think its port 80 that
00:06:52 – defaults to all right so there we have
00:06:55 – our message hello Angie cribs let's make
00:06:57 – sure that we've got all of the cold
00:07:00 – coming in properly so if we go over here
00:07:02 – we see that we've got our bootstraps
00:07:04 – tiles coming in and then angular come in
00:07:07 – as well and let's say about you I boots
00:07:10 – job that's goods and we're good with the
00:07:13 – templates as well it's all of the
00:07:16 – JavaScript and CSS that we made
00:07:18 – reference to is coming in just fine but
00:07:19 – now we need to actually bootstrap our
00:07:22 – application and so what does that mean
00:07:24 – exactly
00:07:25 – bootstrapping is just sort of the way
00:07:27 – that the application gets itself going
00:07:29 – that's kinda how we can think of it for
00:07:31 – now and the way that we do that is we
00:07:33 – have to provide the angular object with
00:07:36 – a module name and in our case we're
00:07:39 – going to want to call this ng cribs and
00:07:41 – so this is the way that we register a
00:07:43 – module and the second argument is going
00:07:45 – to be an array of any dependencies any
00:07:48 – other modules that we want to make
00:07:50 – reference to and pull into the
00:07:51 – application so in our case we've got you
00:07:54 – I bootstrap as a third-party dependency
00:07:56 – and so will want to say you I bootstrap
00:07:59 – is are injected module that we want to
00:08:03 – make reference to their and so again
00:08:05 – module here is going to register a new
00:08:08 – module in our case called ng cribs and
00:08:11 – it's going to make a reference to
00:08:13 – another third-party dependency that will
00:08:15 – want
00:08:16 – pull into the application so if we save
00:08:19 – that and come over here to our index dot
00:08:21 – HTML we have to make a reference of
00:08:23 – course to our after AF script so let's
00:08:25 – put a new script tag will say the source
00:08:29 – is equal to app and not jas that's the
00:08:34 – way that we actually make use of the
00:08:35 – module now that we've registered it is
00:08:38 – we have to put it on one of our HTML
00:08:40 – elements somewhere within the page and
00:08:42 – the most common one to use is the body
00:08:45 – tag so here we're going to say ng-app is
00:08:49 – equal to ng cribs and what this does now
00:08:53 – is anything within the body tag is going
00:08:56 – to be made available to the application
00:08:58 – if we had say give within the body tag
00:09:01 – here and we did the same thing we did
00:09:03 – ng-app equals Angie cribs in this case
00:09:08 – anything within here in the div tags
00:09:10 – will be available to the application but
00:09:12 – anything outside of it would not be if
00:09:14 – we took this ode but that's not what we
00:09:17 – want we want to have everything inside
00:09:20 – the body tag be made available to the
00:09:22 – application so that we can have the
00:09:23 – whole page be part of the app so let's
00:09:26 – save that and let's go back over to the
00:09:28 – browser just to make sure that nothing
00:09:30 – broken us if we refresh we are still
00:09:33 – getting our message and once again let's
00:09:35 – check the source we make sure that we've
00:09:37 – got our application module coming in we
00:09:39 – do and that is about it for now in the
00:09:42 – next lecture we're going to see how we
00:09:44 – can start making use of some of angular
00:09:46 – features
00:09:48 – [Music]


Video Url:
http://youtu.be/zR8xATm9I-A

(Visited 6 times, 6 visits today)

Comments

comments