AngularJS tutorial What is AngularJS [w/ subs]



00:00:00 – this is part 1 of angularjs tutoria in
00:00:03 – this video we'll discuss what is
00:00:05 – actually cares benefits of handle it is
00:00:07 – and a simple angle example so what is
00:00:10 – angularjs abilities is a JavaScript
00:00:13 – framework that helps build web
00:00:16 – applications who developed and villages
00:00:18 – google is the company that developed
00:00:21 – Angela cheers and ideas is an open
00:00:23 – source project which means it can be
00:00:26 – reused changed and shared by anyone
00:00:29 – angle ideas is an excellent framework
00:00:31 – for building both single page
00:00:34 – applications and line-of-business
00:00:35 – applications many companies are using
00:00:38 – angular today and there are many
00:00:41 – public-facing web sites that are those
00:00:43 – that angular there's a website called
00:00:45 – that made with angular com that has the
00:00:48 – list of some of the websites that are
00:00:51 – built using angular tears so here's that
00:00:53 – website made with angular dot-com and
00:00:56 – here you can find some of the popular
00:00:58 – websites that have does with angular now
00:01:02 – the obvious question that comes to mind
00:01:04 – is within the market we already have
00:01:06 – several other JavaScript frameworks that
00:01:09 – helps build applications so what is the
00:01:12 – benefit of using angularjs over those
00:01:15 – javascript frameworks that we already
00:01:17 – have dependency injection dependency
00:01:21 – injection is something angle ideas does
00:01:23 – quite well if you're new to the concept
00:01:26 – of dependency injection
00:01:27 – don't worry we'll discuss that in detail
00:01:29 – with examples in a later video two-way
00:01:33 – data-binding one of the most useful
00:01:35 – feature an angularjs is the two-way
00:01:37 – data-binding the two-way data-binding
00:01:40 – keeps the model and the view and think
00:01:43 – at all times so that means it changed to
00:01:46 – the model updates the view automatically
00:01:49 – and similarly it changed to the view
00:01:51 – updates the model testing testing is an
00:01:56 – area where and it really shines
00:01:58 – angela is designed with testing in mind
00:02:01 – right from the start and it makes it
00:02:03 – very easy to test any of its competence
00:02:06 – to both the unit testing
00:02:08 – and end-to-end testing so there's really
00:02:10 – no excuse for not testing any of your
00:02:13 – angular application code
00:02:15 – model-view-controller with angular it is
00:02:19 – very easy to develop applications in a
00:02:22 – clean NBC way all you have to do is
00:02:25 – split your application called in to mbc
00:02:27 – confidence that is the
00:02:28 – model-view-controller the rest that is
00:02:32 – managing those MBT competence and
00:02:34 – connecting them together is done by
00:02:37 – angular automatically and there are many
00:02:39 – more benefits as well like controlling
00:02:42 – the behavior of dom elements using
00:02:44 – directive and the flexibility that
00:02:47 – angular filters provide we will discuss
00:02:50 – directors filters modules routes etc
00:02:53 – with examples in our upcoming videos in
00:02:57 – this series to build angular
00:02:59 – applications we need only one clip files
00:03:02 – and that is angular dot genius to get
00:03:06 – this could fine with it
00:03:07 – angularjs start hard so here is that
00:03:10 – website on this page you can find the
00:03:12 – download button so when we click this
00:03:14 – download button and now we can download
00:03:17 – the angular JS clip file and here on the
00:03:19 – stage notice we also have a CD in length
00:03:22 – there are several benefits of using CDN
00:03:24 – and you can find those benefits by
00:03:27 – clicking on this ? late here so what are
00:03:30 – the benefits of using a CD and we get
00:03:31 – better caching decrease the latency and
00:03:34 – increase to turn ilysm resistance these
00:03:37 – benefits in ddr in part 3 of jQuery
00:03:40 – tutorial so i've already downloaded the
00:03:44 – angularjs could find and on this website
00:03:46 – account to find several resources to
00:03:49 – learn angular so under this learn tab
00:03:52 – you can find videos three courses
00:03:54 – tutorial frequently asked questions etc
00:03:56 – and under this develop tab you can find
00:03:59 – API essence this is extremely useful
00:04:01 – when building angular applications so
00:04:06 – i've already downloaded the angular JS
00:04:09 – could find its present within the
00:04:11 – scripts folder and
00:04:12 – I have this HTML page 1 dot HTML page
00:04:16 – now to get started with angular there
00:04:18 – are two simple steps the first step is
00:04:21 – to add a reference to the angular script
00:04:23 – so I'm going to drag and drop this on my
00:04:25 – page within the head section so we have
00:04:27 – a reference to the analyst clip that's
00:04:30 – the first step and the second step is to
00:04:32 – include ng dash app attribute somewhere
00:04:36 – within the HTML so I'm going to include
00:04:38 – that within the body element so Angie
00:04:42 – dash app so the obvious next question
00:04:47 – that comes to mind is what is this
00:04:49 – ng dash attribute in the angular and
00:04:52 – dash app is called a directive there are
00:04:55 – many such directors in angular you can
00:04:58 – find a complete list of directors on
00:05:00 – angularjs start so the moment and now we
00:05:05 – are on the api reference page and within
00:05:08 – this api reference page notice we have
00:05:11 – directive heading here and that we have
00:05:14 – several directors and within the list we
00:05:17 – should find ng-app as well so you know
00:05:21 – what is this
00:05:23 – ND prefix within the director named it
00:05:25 – stands for angular the ND dash app
00:05:28 – directive is a starting point of
00:05:31 – angularjs application and the freiburg
00:05:34 – will first check for this and you dash
00:05:37 – app directive somewhere in the HTML page
00:05:40 – if any dash a protective is found then
00:05:44 – and love bootstraps itself and starts to
00:05:47 – manage the section of the page that has
00:05:49 – the ng dash app director at the moment
00:05:52 – we have included the ng dash abductor
00:05:55 – within the body section so everything
00:05:59 – that within that body section will be
00:06:01 – managed by angular and what we want to
00:06:04 – do is we want to compute the sum of ten
00:06:07 – plus 20 so then plus 20 equals and we
00:06:14 – want to display the sum of ten and
00:06:15 – twenty so I'm including this double
00:06:18 – curly braces here so whatever this in
00:06:20 – angular terms we call them binding
00:06:22 – expression so within the double curly
00:06:25 – cases we can specify any angular
00:06:27 – expression so I am specifying 10 plus 20
00:06:31 – so what is angular going to do is going
00:06:33 – to treat that as an expression and add
00:06:35 – those numbers together so let's save
00:06:38 – these changes and let's reload this HTML
00:06:42 – page 1 dot HTML
00:06:43 – look at that 10 plus 20 equals 30 we get
00:06:47 – the result of the angular expression
00:06:49 – that we have within the curly braces so
00:06:52 – this double curly braces are called
00:06:54 – binding expression and angular now at
00:06:58 – the moment if you look at this andy dash
00:07:00 – attribute this present at the body tag
00:07:03 – level and what I'm going to do is
00:07:05 – actually move that to the development
00:07:09 – and i'm going to include another
00:07:13 – development here and let's say within
00:07:15 – this development we want to compute the
00:07:17 – sum of forty plus 50 so 40 plus 50
00:07:22 – equals again i'm including the binding
00:07:24 – expression and we want to compute the
00:07:26 – sum of forty fifty i look at this
00:07:29 – the ng dish a cute is present only on
00:07:32 – this development that means angular is
00:07:35 – going to manage only that section of the
00:07:38 – page so that development and any
00:07:41 – children that development has got for
00:07:43 – the rest of the page angular is not
00:07:46 – responsible
00:07:47 – that means this data binding expression
00:07:49 – will not be evaluated that's what we get
00:07:51 – so I'm going to save the changes and
00:07:53 – let's go ahead and reload this page look
00:07:57 – at that the binding expression that we
00:07:59 – have within the other development that
00:08:01 – doesn't have the energy dash attribute
00:08:03 – you know that's not evaluated now let's
00:08:06 – see what's going to happen if I move
00:08:08 – this to the HTML tag level so now angle
00:08:18 – is going to be responsible for all the
00:08:20 – child elements within that HTML tags
00:08:22 – that means no board is binding
00:08:24 – expression should be evaluated now let's
00:08:27 – see what changes reload the state and
00:08:29 – look at that because 90s expected
00:08:31 – let's look at a few examples of valid
00:08:34 – expressions and angular at the moment
00:08:35 – using dentist 24 plus 50 we can use
00:08:39 – something like this as well
00:08:41 – one double equal to is 1 equal to note
00:08:46 – that evaluates the boolean false let's
00:08:48 – actually get it also 10 plus 20 from
00:08:51 – there so when we load this it should say
00:08:54 – falls on the other hand one double
00:08:57 – equals 1 yes 1 is equal to one so in
00:09:00 – this case it should evaluate to true
00:09:03 – now we can also use a plain old
00:09:05 – JavaScript object within the expression
00:09:07 – so let's include know an object that has
00:09:10 – got name property and let's say the name
00:09:13 – is David and let's see also have aged
00:09:18 – property and ages let's say 30 and from
00:09:22 – this plain old JavaScript object i want
00:09:24 – to receive the name property value i can
00:09:27 – simply do dot name from that javascript
00:09:31 – object so let's see the changes and when
00:09:33 – we reload this it should receive the
00:09:35 – name property value which is David we
00:09:39 – can also use a day so let's say we have
00:09:43 – an idea here and within the idea we have
00:09:45 – let's say a list of names like David and
00:09:50 – we have Pam and let's include another
00:09:54 – name Sarah so we have three names within
00:09:56 – the RA and I want the last element so
00:09:59 – I'm can specify why the index position
00:10:01 – of the last element which is two so in
00:10:03 – this case this should return setup from
00:10:06 – the a day so let's see what changes we
00:10:08 – love the speed and notice we get seller
00:10:10 – so two requirements to get started with
00:10:14 – angular added reference to the script
00:10:16 – five and include and you dash app
00:10:19 – attitude within the HTML
00:10:24 – thank you for listening and have a great
00:10:26 – day


Video Url:
http://youtu.be/DPgb0Cal-eo

Comments

comments