AngularJS Tutorial #1 Introduction to AngularJS [w/ subs]



00:00:00 – you don't have any guys welcome filled
00:00:01 – very first time village as to total wine
00:00:07 – gang so we just want to welcome you to
00:00:09 – your very first stepping stone and
00:00:11 – becoming an absolute door you in angular
00:00:13 – gasps and in this video I'm just going
00:00:15 – to talk a little bit about what angular
00:00:17 – guess actually is and why we use here
00:00:20 – and the kind of things that you're going
00:00:22 – to need to know beforehand and also what
00:00:24 – we're going to be learning in this
00:00:25 – playlist so I mean I guess is an MVC
00:00:28 – style JavaScript framework to create a
00:00:31 – single page data driven applications the
00:00:34 – NBC just done two model-view-controller
00:00:36 – and that's the design department
00:00:38 – separates our datalogic from our output
00:00:41 – HTML just makes things easier as we
00:00:43 – update our application code later on
00:00:46 – don't worry what we don't know what it
00:00:47 – is a minute i am going to do a tutorial
00:00:49 – on what NBC is and how we can use in
00:00:52 – angularjs so because I'm your guest is a
00:00:56 – framework that means that we have to
00:00:58 – write a code in a way angularjs wants us
00:01:00 – to not just any old way so that in
00:01:03 – return we can receive all the super
00:01:04 – ninja powers that we can inject into our
00:01:07 – projects so some of these powers are
00:01:09 – features are generated by the in which
00:01:12 – is like magic when you first hear i'm
00:01:13 – going to show you how to put the
00:01:14 – tutorials time really good templating
00:01:17 – system some document object model
00:01:19 – interaction filters which allows us to
00:01:21 – change how data is output so we use a
00:01:23 – very easily and directives which led to
00:01:26 – extend the functionality of xml also add
00:01:28 – a new behavior to it plus some other
00:01:31 – things as well i'm going to show you and
00:01:33 – again don't worry too much if we don't
00:01:34 – know what the h*** top of H*** right now
00:01:35 – I'm going to go through each of these in
00:01:37 – detail as we go along
00:01:39 – so as I said angularjs is primarily used
00:01:42 – to make single-page data driven
00:01:44 – applications and essentially this just
00:01:46 – means that we bring in additional
00:01:48 – content into the web page without ever
00:01:51 – having to refresh the page or actually
00:01:53 – load a new page and the way we do this
00:01:56 – by using views and routing and be used
00:01:59 – if the be in MVC ok so here's a really
00:02:03 – quick simple example i just got a hate
00:02:06 – email outlining right here then in the
00:02:07 – body tag got this main tank with an NG
00:02:10 – view directive don't worry about the
00:02:12 – minute this is just telling angularjs
00:02:14 – this is going to be where the views are
00:02:16 – loaded in so the way this works is if a
00:02:20 – user times /a contact that would set up
00:02:23 – our routes in angularjs to dynamically
00:02:25 – inject the contact don't hate the smell
00:02:28 – of you in it to this time okay or if we
00:02:31 – type forward slash about then
00:02:33 – angularjs would go out and grab the
00:02:36 – amount of you right there
00:02:38 – inject that into the main view so we're
00:02:40 – not actually physically loading a new
00:02:42 – page angularjs is just reaching out
00:02:45 – grabbing the content or views that we
00:02:47 – need bring in the back and putting them
00:02:49 – right into this view area right here
00:02:52 – ok so it's really flexible and there is
00:02:55 – also really quick so i'm going to talk
00:02:57 – about all that later on i just wanted to
00:02:59 – show you an example of how this works
00:03:02 – alright so here's a glance of what we're
00:03:04 – going to be learning through this
00:03:05 – playlist
00:03:06 – first of all I sent her to go through
00:03:07 – what NBC is or mvw in the case of
00:03:11 – angularjs which stands for that model
00:03:12 – view of whatever you want and then we're
00:03:15 – going to take a look at two-way data
00:03:16 – binding which like say is really magic
00:03:18 – when you first year so we'll go through
00:03:19 – that there will dive into filters
00:03:22 – directives and expressions don't take a
00:03:25 – look at what controls out how we can use
00:03:26 – them to control our data that will look
00:03:29 – at setting up some routes and using our
00:03:32 – application then we'll take a look at
00:03:34 – animations now angularjs is really cool
00:03:36 – because animation that has a whole
00:03:38 – separate library dedicated to it and it
00:03:40 – makes our website look really slick so
00:03:43 – we'll go into that then we'll have a
00:03:45 – look at for validation and how we can
00:03:46 – use angular to help us with that really
00:03:49 – cool one of my favorite parts of
00:03:50 – angularjs in fact and then finally we're
00:03:52 – going to create an up from scratch which
00:03:54 – is going to be a to do list so here's
00:03:57 – what you need to know beforehand
00:03:59 – first of all JavaScript that is
00:04:00 – absolutely essential because angularjs a
00:04:02 – javascript library we are to the right a
00:04:04 – fair amount of it during this playlist
00:04:06 – we don't know any of that after tutorial
00:04:08 – series called JavaScript for beginners
00:04:10 – i'll leave the link down below in the
00:04:11 – description
00:04:12 – secondly hate smell absolutely essential
00:04:14 – we're going to be creating hate mail
00:04:15 – views in our application so again if you
00:04:17 – don't know that check out my hate email
00:04:19 – course i'll leave the link down below
00:04:20 – well don't like CSS now that's optional
00:04:23 – we don't need to know CSS i'm going to
00:04:26 – include the style sheet for its download
00:04:28 – in this playlist so you don't need to
00:04:29 – know it but it would be beneficial you
00:04:31 – know to start thinking of yourself
00:04:31 – because angularjs as classes improve
00:04:34 – that we can hook into and style out self
00:04:36 – so optional but advised and then finally
00:04:39 – Jason which again is optional but
00:04:41 – invited this is just a way that will
00:04:43 – represent data which is easy to work
00:04:45 – with in JavaScript dead easy to learn
00:04:48 – and recover a little bit in this
00:04:50 – playlist so we don't know that don't
00:04:51 – worry too much about it but a quick
00:04:53 – google search rejection and how to use
00:04:55 – it will probably result in you master
00:04:57 – and get in less than an hour so i just
00:05:00 – want to show you a couple more things
00:05:01 – before we get started and the first one
00:05:03 – is just txt enter this is the 1i used if
00:05:06 – the quick real example before it's
00:05:08 – called acid and you can find it at
00:05:10 – Aqueduct I oh I'll leave a link down
00:05:12 – below to that but it is pretty simple to
00:05:14 – remember and it defines itself as a
00:05:17 – horrible text editor for the 21st
00:05:19 – century which basically just means we
00:05:20 – could have to help it create additional
00:05:22 – functionality or just loaded packages
00:05:25 – that other people have made to extend
00:05:26 – its functionality also it is really cool
00:05:28 – i've been using this now for the last
00:05:30 – couple of weeks find it really nice to
00:05:32 – work with and it looks pretty awesome as
00:05:34 – well
00:05:34 – ok so you can go ahead and download up a
00:05:36 – different platforms and what it does you
00:05:38 – just to test the platform right here and
00:05:39 – you can go ahead and click the button to
00:05:41 – download it so go ahead and do that and
00:05:43 – the next thing i want to show you is
00:05:45 – this repository of created on gethub
00:05:47 – called and your GS playlist and what it
00:05:50 – basically just create a simple index
00:05:53 – template file for us to work from like a
00:05:55 – baseline final and also some CSS in a
00:05:58 – file called style.css so that the
00:06:01 – applications and tutorials that we make
00:06:04 – don't look as crap in a browser and over
00:06:07 – and with people browser starts right so
00:06:09 – is there for you if you want you to have
00:06:11 – to download these I just not make it
00:06:12 – optional so you can go ahead and
00:06:14 – download it here by clicking this if you
00:06:16 – want it so if you download it at him and
00:06:19 – you've also downloaded those files from
00:06:22 – my github repository go ahead to file
00:06:24 – then as project folder where you want to
00:06:28 – do is navigate to where you downloaded
00:06:30 – that folder from get home and just
00:06:33 – click into that slight folder open all
00:06:35 – communities of the Atlantic and
00:06:37 – index.html file which is just a
00:06:39 – dead-simple patient file which we can
00:06:42 – work well and it's hooked opportune this
00:06:44 – content /s styles.css which is in here
00:06:49 – and this is just going to make the the
00:06:52 – tutorials look a little bit better in a
00:06:54 – browser as we go on
00:06:56 – alright so they go guys that your
00:06:58 – expression introduction to angularjs
00:06:59 – nice tutorial we're going to go ahead
00:07:01 – and talk about NBC and so don't forget
00:07:04 – to subscribe share like and i'll see you
00:07:06 – in a very door
00:07:10 – [Music]


Video Url:
http://youtu.be/O-gkdLU9nZw

(Visited 8 times, 8 visits today)

Comments

comments