Learn AngularJS 2 – Video Tutorial For Beginners 2016

Transcript.

0:00
before we get started let’s take a look at what angularjs to is check out some
0:04
of the changes and find out how it compares to the original version of the
0:09
framework
0:10
angularjs to is a modern framework for app development it’s essentially a
0:14
structure that helped to create applications faster by providing a
0:19
number of services and objects that makes things easier for app developers
0:23
now this is a dramatic upgrade to the previous version of the framework it’s
0:28
really a rethinking of how applications should be built so if you’re coming from
0:33
anger one this is going to be a dramatic adjustment for you now one of the
0:38
primary reasons for a lot of these changes is performance so angered as two
0:43
ads run three to five times faster than the previous version although some of
0:48
these changes can be a big adjustment there for a good reason so how is
0:52
angular two different than the original version now first in the new version of
0:58
language as everything revolves around something called component components
1:03
are like regular ones custom directives they let you create functionality around
1:08
custom tags so instead of adding an NGO directed to a section of code is simply
1:14
invent your own tags and then program the functionality for these tax yourself
1:19
with a lot like using web components and it’s one of the best new features of the
1:24
framework thankfully components are also much simpler to create than anger ones
1:29
custom directives since most of the work is handled by components there’s really
1:34
no need for controllers in angularjs too and so these are gone and the new
1:40
version now this isn’t really as big a deal as it sounds
1:44
since the component architecture is so well done in angularjs to now one of the
1:49
big adjustments you will have to make is that in angularjs to there is no more
1:54
scope and that’s a pretty big adjustment in Scopus how we handled communication
1:59
between our templates and our controllers in angularjs to the
2:04
templating system is also richer which also means more complex but at the same
2:09
time it’s also more
2:11
powerful so overall this ends up being a big advantage to the new version of the
2:16
framework now you can program angularjs in a variety of different languages
2:22
now this is one of the ways that angularjs tu is significantly different
2:26
since you can choose one of these three languages cs5 dart or type script to
2:32
program your code and yes five is what we called regular JavaScript also known
2:38
as Xmas script five and of course you can use that the program angularjs too
2:43
but it’s really not the best solution you can also use another open source
2:48
language from Google called Dark however the best option is to use a language
2:53
called type script script is a language from Microsoft that is a superset of
2:59
JavaScript that means that you can use any other es sixes features and it also
3:04
adds a few important features of its own
3:07
angularjs to was actually built without script so there is a significant
3:13
advantage to learning how to work with tight script mainly that most of the
3:17
documentation that you’ll find for any word as to will be written in tight
3:21
script as well now because you can use any of ES six as teachers you’ll have
3:27
access to classes now if you’re coming to angularjs to from regular JavaScript
3:32
then you’ll need to get used to working with classes they allow you to create a
3:36
more object oriented approach to JavaScript in tight script classes are
3:41
really well organized and defined feel actually end up liking the way that you
3:45
work with them in angularjs to ESX also has a rich templating system that is
3:51
extensively use a tanker desk too and it makes creating templates a lot easier
3:56
and much more fun than angularjs one type scared also adds two important
4:01
features two angularjs to the first is types which allows you to define the
4:06
types of variable that you’re using this is optional but it’s something that can
4:11
help with debugging so it’s gonna be a good idea
4:15
another awesome feature or steak script is something called annotations
4:18
annotations are a way to add metadata to your code now this is extensively using
4:24
angularjs to help you extend the components and handle a lot of how you
4:29
set them up at this is one of the features of angularjs that are really a
4:34
lot of fun now because take script and yes six are not supported in current
4:39
browsers you’ll need to use something to convert this code to regular JavaScript
4:43
that means that you’ll need to use a belt tool like web pack or God s to
4:48
handle the conversion in this course I’m going to use god yes you can use
4:52
whatever you like now in many code examples that you’ll find on the web for
4:56
angularjs to you’ll notice a lot of other cs6 features said he’d help
5:01
catching up and check up up and running with Xmas scripts 6 with Eva Challa
5:06
right so that’s enough talk because we need to use a build tool to handle how
5:11
angularjs to is process we need to take a look at how to process type script
5:15
into JavaScript we’ll take a look at that in the next video now if you decide
5:22
that you’re going to work with tight script instead of regular JavaScript
5:25
you’re going to need a bill tool to process your files now in discourse I’m
5:29
going to use something called God Jess and you can learn more about that on
5:33
this website and its going to take care of handling are built to set that up I
5:37
created a god Jas file that sets up the configuration for how golf is gonna take
5:42
care of things it’s going to take care of converting our type script into
5:46
JavaScript and it will also be able to handle other processes so whether you
5:51
want to use something like SAS or post CSS or if you want to minify your HTML
5:57
or javascript anything else you can have a setup file that can take care of that
6:01
now before you do that make sure that you’ve gone through the movie on using
6:06
exercises for this course so that you know how to get everything installed
6:10
properly before using our practice environment and everything is already
6:14
taken care of for you and Jess uses a series of plugins that let you access to
6:19
features in your build process in order to get to those feature usually create a
6:24
series of variable which I’m doing here at the top and the features in the
6:29
plugins are imported into those variables now first of all I’m importing
6:33
de gaulle plugin itself as well as a plugin that lets me run
6:38
web server called called web server you can learn more about web server at this
6:43
you are out now this is really important because in order to run properly
6:48
angularjs needs to run from a server in other words you can’t just drag the
6:53
regular HTML files that you create with your editor into your browser now next
6:58
I’m importing a plugin called cult type script in order to convert are tight
7:03
script files into JavaScript you can read more about golf tight script and
7:07
how you set it up at this URL I’m also using another plugin called gulf source
7:13
man whenever you’re using a language like type script that has to be
7:17
converted into something else it’s a good idea to use source maps that when
7:21
you use your browser any errors found will map to the tight script and not the
7:25
JavaScript since you don’t go to any of the JavaScript yourself it would make
7:29
little sense to look at the errors that occurred in JavaScript with source maps
7:34
you’ll be able to see the areas that happened in your type script instead not
7:39
typescript usually handles its own source maps but they don’t work with the
7:43
current version of the Gulf type script plugin so we need the extra plugin but
7:48
you can also use it with other tools likes a Scorpio CSS next we’re loading
7:53
up the tight script configuration from a separate file called es config that
7:58
Jason that file is right here now this sets up the options for our type script
8:04
will be converted into JavaScript now this is a pretty standard set up if you
8:09
want to learn more about the TES config file picture check this website I got
8:15
gas works by setting up a series of tasks like the one you see right here in
8:20
each tag usually has been employed as well as an applet some setting up two
8:24
variables right here to stand in for whether files are input from and where
8:30
they’re going to in our case we’re gonna take the files in the process folder
8:34
that are also in the tighter it for their and moved them into the filter
8:38
folder and the development folder so that would be from this process folder
8:43
in the tight grip folder right now we don’t have any type script files so that
8:47
folder is empty and Western process they’re going to go into this built
8:51
folder and then inside the development for their now all of our files are going
8:57
to go into the Jazz folder but I usually set this variable so that if I
9:01
processing something like that I’ll be able to send different files to
9:05
different sub folders so this destination is a little bit more generic
9:09
so after that we start creating tasks now I’m creating a couple of tasks here
9:16
at that don’t do anything I’m not really doing anything to my html or css but if
9:21
this was a production site this is where I would deal with those processes second
9:26
do things like minimize my html and a process my CSS with something like poor
9:31
CSS now the next task I create it is called copy lives and OJ as requires a
9:38
number of script files in order to work now because of how it and start right
9:43
now those files are living in Arnould modules folder that’s fine for
9:48
development but at this site was to go online they will want to move them
9:52
somewhere else this task move those files from the different no modules for
9:56
theirs into our development folder that way they’ll be in the same place they’ll
10:01
be inside a subfolder in the Jazz for their called led and then in an angular
10:07
folder are indifferent subfolders in modules this is put them on the same
10:13
place now this is really important when you load angularjs just like with
10:18
version 1 you download the entire framework you get just what you need so
10:23
if you weren’t had some other service that you wanted to add one application
10:27
like HTTP or routers we would need to add those files in here as well we have
10:33
to add additional files right after this one so make sure you put a comma right
10:37
here and then add anything else you want from the library then we create the task
10:42
2 processor type script is gonna read our tight script files from the source
10:47
folder and then it will take care of pushing those files through source maps
10:52
as well as processing them through tight script here’s where that tis config
10:57
files and the compiler options get load it then output the source map as well as
11:04
the
11:05
process files into the JavaScript for their then we create a series of watch
11:10
tasks now in our process is launched these tasks will monitor different
11:14
folders and files for changes when a change takes place in one of those
11:19
folders are different tasks will rerun in this case we change our tight script
11:23
files are browser preview will update automatically and any type script
11:28
modifications will be reprocessed now towards the end of our goals tasks we
11:34
set up the web server in that allows us to previous site in real time and allows
11:39
us to handle agents calls locally now finally we run all the tasks we need as
11:45
the default asked if we run this through our terminal then everything will run in
11:50
sequence and that watch task will look for changes continuously now working
11:55
with angularjs who does require you to use the build process when you’re
12:00
working with type script now it’s really important that you understand what the
12:04
tools are doing and how they need to be modified to fit your needs
12:08
fiscal crisis is flexible and will help you tackle not just any regular project
12:13
but can be easily expanded to other needs
12:16
actually want to learn more about golf and death check out my other course web
12:20
project workflows with Jas get and process if I now before we start working
12:26
with angularjs to let’s talk about the rest of our folder structure and install
12:31
our script files into our HTML document now if you haven’t done so already you
12:36
watch the video on using the exercises for this course you should also go ahead
12:40
and start your golf process if you haven’t done so already that should
12:44
happen before you begin each movie in the course if you’re working with our
12:49
practice environment all that is already taken care of for you now we take a look
12:54
at our structure right here you’ll notice that we have a built for their
12:58
and inside that folder we have a development subfolder
13:03
everything inside this folder is way you wouldn’t want your own server if you
13:07
wanted this application to work on the web now has you covered in the previous
13:11
video everything that this application needs in terms of angularjs is inside
13:17
folder and inside the lib folder under a folder called angular 20 we also have an
13:25
images folder with some images that will be using later in this course as well as
13:29
a CSS folder with a single style that CSS file our index HTML has a default
13:37
template for HTML as well as a call for our stylesheet rate here now we’re going
13:43
to need to add all the script tax and those usually go in the head section in
13:48
angularjs document I remember that in the process for the Rays were gonna put
13:55
our tight script files are going to go in this type script folder right now
13:58
that’s empty and whenever we put a file in this fall there you will get
14:03
processed by our goal process and the results of that will be placed in this
14:08
jazz folder now in order to work with angularjs to you gonna need to add a
14:13
number of script calls into your HTML document in which gripped acts you add
14:18
just like with angular one depends on the features that you need for your
14:22
application for this application were building we’re going to need a pretty
14:27
standard set of scripts but I think it’s important to understand what each of the
14:30
scripts are doing the best place to find everything we need to install is in the
14:36
Gulf I’ll digest file so in here remember that we are importing every one
14:41
of these files from our noted modules folder if you’re wondering where those
14:46
files came from their place thereby are original and p.m. installation the node
14:52
package manager the note package manager uses a file called package that Jason
14:57
and in this file we specify the dependencies that our project has shown
15:01
here you can see all the different job filters that we are adding in order to
15:05
process our files but in addition to that we’re loading up a lot of different
15:10
libraries essentially are angularjs library as well as an Xmas script 6
15:17
library and our RJs files and other scripts that we’re going to need to look
15:23
at our golf I’ll I’m gonna copy all this right here and I’m going to bring it
15:28
back into my index HTML file
15:30
just paste those right there and I want to get rid of all these folders because
15:35
after our goal process runs those files are going to be in the Jazz folder under
15:41
lib and angular to solve all these files are already right here waiting for us to
15:46
create script tax for them so I’m gonna get rid of all this and then I’m going
15:55
to create a script that for each one of these in a copy each one of these trips
16:02
into this source location so great here when I need to say this is going to be
16:09
in the JSE’s folder under lab under angular to eat and then use the name of
16:17
our files and copy this prefix for all these and then move each of the Jazz
16:26
files into each one of those script calls the first he found that we’re
16:35
loading up right here are a set of polly fills and ships of those are files that
16:39
are going to allow some of the cutting-edge features that are being
16:42
used by tight script and angular to work with older browsers so some of the
16:47
things like classes and objects are going to need to work in other browsers
16:52
and so we have to use these polyphenols and shims now the next one is a module
16:57
loading library called systems a/s and will be configured and that in a second
17:03
but what it does is handled the loading of modules in your scripts modules our
17:08
way to organize your code into smaller pieces and is heavily used in anger jazz
17:13
to our next is a library to handle reactive programming that adds things
17:19
like observables into angularjs to this is a library that you’ll see commonly in
17:24
most angularjs projects I finally we lowered the actual JavaScript file for
17:30
the generic angularjs framework now if you want to add some additional features
17:35
like routing or DHCP service you would add that as separate script files but
17:42
you need to make sure that
17:43
since we’re moving these from are no modules into this folder that you would
17:48
go into your golf process and add those in here as well we’re not gonna need any
17:54
more than this so all this is so let’s go ahead and set up our system config
18:00
file now this is just a regular JavaScript configuration file so we will
18:05
add a script tag and and here we’re going to use these system object and
18:12
pass it along a configuration object here so system config and this will have
18:20
a JavaScript object and the first thing we need to do here is set up the format
18:24
for our modules now there’s a number of formats that we can choose and you can
18:28
read more about those options from the system J as website so we can set up
18:34
different formats for how we want to import modules are going to use one of
18:38
them called register so will create a packages object here and here we’ll set
18:48
RJs to be ed register format so we’ll see a four-man register and will set the
18:56
default extension to be Jas know that means that whenever we import another
19:05
module we’re not gonna need to add the extension at the end and that’s gonna
19:09
make it a little bit easier to bring in our modules so next we need to do is
19:14
create the file that we actually want to load so unlike angularjs one you don’t
19:20
just add another script tag right here
19:22
allow the system GIS library to load everything you need and so we need to do
19:27
that next we’re gonna say system import and pass it along a file so here we’re
19:35
going to ask for a file called Jas / boot so this is a file that will be in
19:42
charge as folder and it’s not gonna be in lib is gonna sit and this main level
19:47
of Jas and it’s actually going to be called blood RJs but because we’ve said
19:52
this to file extension it means that we can just call it like this
19:56
this and then we’ll set up a promise so that if there are any errors they will
20:01
just go to the console now let me go and save this and we’re going to need to add
20:12
a file but it’s not going to go into staff folder we are going to need to put
20:17
our file right here in the type script folder that is in the process for their
20:23
so right here I’m gonna create a new file our college that yes for tight
20:29
script and right now I’m gonna leave it empty now there’s nothing too exciting
20:33
about this HTML yet but it’s important that we understand why all the pieces
20:38
are there and what each of the pieces does the key thing to remember here is
20:43
that as our applications get more complicated gonna need to add additional
20:48
pieces of the angularjs to library as a script file right here and that the
20:54
peace that we’re loading first this boot file is what we need to send rate here
20:59
so those to set up things are the most critical parts of setting up your
21:04
angularjs to file the next thing to learn is how to create a component and
21:09
we’ll get started with that in the next video jazz to everything revolves around
21:15
the concept of component so in order to get her application to do anything we
21:20
need to set one up now every component has at least three part a decorator
21:24
which has information about the controller a view which is just a
21:28
template that we want to show and then the controller part which is the
21:32
JavaScript that is going to add functionality to the view now it’s a
21:37
really simple way to create applications and wire up our first component now
21:42
before we do that in order to add any functionality with angularjs we need to
21:47
import the library that we want to work with into our application to find a
21:52
complete listing of all the modules and libraries that they belong to
21:57
in the API page now the most common modules are called comment which you see
22:03
right here and there’s another one called core which is a little bit
22:07
further down
22:08
down in order to create our first component we need to import the
22:13
component definition from angular to court can see it right here will also
22:19
need to have a way to start up or initialize the application so will be
22:24
the bootstrap module and that one is further down in angular to platform
22:31
browsers he could see that the bootstrap module is right here it’s really a
22:36
function that starts of the application was gonna do that so in my boot that he
22:42
has filed that is in my process falter in the types grateful they’re going to
22:47
import those two modules first time on imported the component module
22:53
angular to score and then I’ll importing the bootstrap function from angular to
23:03
platform browser so now we’re ready to get going to go ahead and start by
23:09
creating our component Cisco as in something called a decorator so it
23:14
starts with an ad sign and then the word component and they will pass along our
23:19
object with our different decorations now this definition right here is called
23:24
a decorator it let’s all set up a lot of different types of information about our
23:29
components in angularjs to create a component it creates a shadow DOM
23:34
element for the component and then it loads of the template into that DOM
23:38
element this is going to give us the ability to create our own HTML tags and
23:43
then define what that tag is going to do through JavaScript so the first thing we
23:48
need to add to this component is called are selector this will be the name of
23:52
the HTML tags we want to create a will do a selector right here and we’ll call
23:58
this my apt next we can add argue or template now we’ll get into templates a
24:04
bit deeper and a later video but for now we’re just going to add some simple HTML
24:09
to get things going so well do it right here and we’ll just type in some HTML in
24:15
some quotes now this is really important
24:21
very easy to mess up decorators are a tight script edition and in that
24:25
language they are expressions that return a function it’s actually a
24:29
javascript 7 feature and what you have to remember is that you do not put a
24:33
semicolon at the end of this decorator definition if you do this you’ll get an
24:38
error that is extremely difficult to debug you probably feel like putting a
24:43
sonic on right here but just don’t do it so finally we need to create the
24:48
controller for our module now this is going to be a class that’s going to
24:52
define the functionality for our application right now it’s not really
24:57
gonna do anything but we need to create this class so that then we can bootstrap
25:01
the application so we’ll call this class at component and right now it’s not
25:08
really going to do anything so now we have all the elements of the component
25:13
ready we need to initialize or load up the application now this is done through
25:18
a function called bootstrap now we loaded bootstrap from platform browser
25:24
right here so we can just call that function and pass along are a component
25:29
class now bootstrap is going to look for the selector that we defined right here
25:36
in our HTML and then it’s going to bind the information from our model to it
25:42
that means that we need to do one more thing and that’s sad
25:45
the my appt tag into our HTML wherever we want our message to show up right now
25:51
the only thing that will happen is that my Apple be replace by this HTML heading
25:58
lows that each one and I’m gonna save this and then I’ll switch over to index
26:03
HTML and in the Body section I’m just gonna create a new tag gonna be called
26:10
my app lets go ahead and close they’re just like we would a regular HTML tag
26:15
and I’m gonna tape and the words loading dock that right here and then going to
26:21
save this if I take a look in my browser we should see this text right here that
26:28
says welcome to my appt
26:32
angular is in essence this plane them
26:34
message from our component now this is just a bad the simplest type of
26:37
application that you could possibly create but it sets of the foundation of
26:42
how you build anything with angularjs to in the last video we set up our first
26:48
component and bootstrapped our application in a more complex project
26:52
you may want to bootstrap more than one application so they can handle different
26:57
parts of your peach each one of these applications would get their own private
27:02
information so let’s go ahead and split our application into a boot module and a
27:07
nap module was also gonna show you how one module can export and another one
27:12
can import information so I’m gonna create a new file in my type script
27:17
folder and I’m going to call this app . component that yes this component is
27:24
going to generate are a component so I’m going to need that information from
27:28
people that he s file so I’m gonna bring in import angular to core from here as
27:35
well as our component in peace it here and grab all of this and delete that
27:46
from this one so let’s go back into a component and peace of this information
27:54
animal go ahead and save this one will switch to our bootstrap component and we
28:00
haven’t saved this one yet so our appt is still working just fine I hear it we
28:04
went to import the app component from the other file to do that we’ll just
28:09
issue an extra import command and we’ll ask for a component from in this case we
28:17
went to just look for a file and the same folder called app that component
28:22
and that is that we don’t have to specify whether we want to use Dahej ass
28:28
or anything else that is all being handled by our module loader system that
28:33
s because we’ve imported this app component it available in this file for
28:38
the weekend blitz rapid rate here before we save this have to do one more thing
28:43
in my apt component in order for the boot component to get the info
28:48
nation from this app component we need to go ahead and export this class will
28:54
add the export keyboard right here that lets the component know which
29:00
information we want to grab from the app component
29:04
go ahead and save this one and our applications still run fine now if
29:10
you’re coming from angular one you’ll notice that you didn’t end up having to
29:13
add multiple script files into your index HTML document normally we would
29:19
just add a bunch of script files right here what we’ve done is by setting up
29:23
the system configured here we specified that we have a single file OJS booed
29:29
that is going to handle all of our bootstrapping that is this file and from
29:35
this file we can import any number of components that are current needs and
29:40
now we’re only importing one component but if we had multiple tags on this page
29:46
we can add as many components as we need it right here so we’re separating all of
29:51
the bootstrapping into its own module and then sending all the functionality
29:56
for the application to its own separate module as a much better and much more
30:02
organized way to take care of things
30:05
understanding how aguillar template work is the key to building almost any
30:09
application because of some of the new features of tight script and ES six are
30:14
going to be a little different than regular one template so let’s take a
30:18
look at the three types of template that you can use with angularjs to now of
30:22
course we’re already using our template rate here and it’s all embedded into
30:27
this template property in our component decorator so it’s right here in with
30:33
this is saying is look for a selector or a tag called my appt in our HTML and
30:40
right now just replace that with this HTML so if we look at the index HTML
30:45
file will notice that we have this my apt a great here normally it should say
30:51
loading dot dot dot but because we’ve got angular jazz running things it’s
30:56
replacing that with
30:58
this right here so the first way of creating a template is by using this
31:03
template property and just putting all your HTML in this single line now the
31:09
thing is of course complex HTML is gonna end up taking more than one line so yes
31:14
six guess is the ability to create a new kind of modeling templates trained by
31:20
using back takes so if instead of these trick quotes you use the back take
31:25
simple it’s right next to the one on my keyboard you can create templates that
31:31
take more than one line so if we do this then we can create a longer template now
31:41
in addition to being able to generate more complex HTML back takes allow you
31:45
to keep the template and they viewed together so that might be a little bit
31:49
better for debugging purposes as go ahead modify this a bit and we’ll add a
31:54
more complicated piece of HTML rate here so we’re gonna see with a class and I’ve
32:01
got some styles that have already created to make this look a little nicer
32:05
so we’ll do artists search and just type in some other HTML and here so once we
32:15
save this and the application reloads we should have a little bit of a
32:19
better-looking page now the third way to create these templates is by using
32:23
external files so let’s create a partial smolder right here in our development
32:28
folder and inside that folder I can put any html I want to use and in that
32:35
directory I can create a file that’s going to hold our template I’m gonna
32:40
call this app that HDMI out right someone to take my component template
32:46
right here and copy this text out of it and I’m gonna pieced it and the apt HTML
32:53
section right here and I need to now modified this template tag to specify a
33:00
template URL instead of a template and then I need to point to where that
33:06
template is so that’ll be just partials
33:10
for direct created and then at that HTML go ahead and save and actually spelled
33:19
template URL you have to remember that IRL are going to be lower case this is
33:25
something that you have to watch out for only the first letter even though it’s
33:28
Uniform Resource Locator and I do this all the time I forget that these are
33:34
supposed to be Laura cases go and save that and it should look up testifying
33:39
that brings up another point if we do make a mistake like this and save which
33:43
should happen in the application is that we’ll just see this loading dot dot dot
33:49
rate here is going to render is this tag right here that it doesn’t understand so
33:54
doesn’t do anything with that and shows us the text that is inside that tag now
33:59
you can debug this by looking at your inspect tool in the Google Chrome
34:05
browser or any other browser that you have and in here we want to do is go to
34:10
the console and find out if there are any errors and just go to the direct
34:17
consoles so to make this big urge to see things a little better
34:21
console right here it gives you a lot of errors however sometimes it’s nice to
34:27
just sort of refresh the page to make sure you don’t have any all their assets
34:31
go ahead and actually clear this out and then refresh the page and take a look at
34:37
the errors sometimes these are hard to read and wait on you right here is that
34:41
it in a problem with the ad component in its on you must have either template
34:48
template URL or view so there’s actually quite helpful it notes that the UN’s
34:53
capital and the other two letters are not so sometimes it’s useful to just
34:59
take a look at those error messages and then go ahead and fix that will go back
35:05
into the app component make sure we type and Laura keys are in and out and then
35:10
everything should come back the way they used to be one advantage to creating a
35:17
separate template like this is that when you create a template using the back tix
35:23
if I go ahead and do this until I have this right here you’ll notice that my
35:30
editor doesn’t quite understand how to deal with these back takes so none of
35:35
the editors goodness so none of the code completion or syntax highlighting is
35:40
going to work right here that makes creating some of these elements quite
35:45
hard if you’re used to how your editor does things so by switching this over to
35:50
a separate template you can see all the syntax highlighting and if your editor
35:56
has any shortcuts then they’ll work just fine so for the time being until the
36:01
editors understand how to treat these back takes this can be quite helpful you
36:06
can always take this from here go ahead and use another file to create your HTML
36:12
and just copy and paste that back into your template the advantage of having a
36:16
template instead of a template URL is that everything is in a single file so
36:22
when you have to debug something you know that everything is right here in
36:27
this component as opposed to being in different files so the rule of thumb is
36:32
if your application is super simple a regular template string is gonna work
36:36
just fine if it’s a bit more complicated than either use a back take template
36:42
string or use a separate file I personally like to do everything on a
36:47
separate file because I really enjoy all the goodness that the editor allows you
36:53
to do when you’re working with a regular HTML document templates are going to
37:00
become a lot more powerful when they are connected to our components now the
37:04
simplest way to tie a template to a component is through something called
37:08
interpolation use double curly braces to buying a property from your component
37:13
class into your template
37:16
show you how to do that it’s pretty easy all we need to do is create a variable
37:20
rate here so I’m gonna
37:21
name and send it to something like mining here and then going to save this
37:27
that’s going to become a property of this component and I and our template we
37:33
can simply modify this HTML here to show our names so we’ll just put in colon
37:41
here and N double curly braces we will type in our variable name our property
37:48
called needs go ahead say that when you can see that it picks up my name and
37:53
what it’s doing isn’t terrible eating whatever is in here this is an
37:57
expression so this expression get interpolated by going to the component
38:02
and reading the value of a variable or my property now angular is going to
38:08
automatically update these properties if they cheated somehow now this notations
38:12
gonna work fine but you can do it in a more formal way so this is sort of what
38:17
you would do me D in something like JavaScript just sort of create a name
38:21
but a lot of times you’ll see a slightly different notation that is a bit more
38:26
formal especially to yes six and class base architectures so in that case you
38:33
would see something like a variable declaration you would say something like
38:38
name and you would probably include a class and that angular know that this is
38:44
going to be a specific type that this variable is only going to be able to
38:48
contain strengths and then it’s it’s creating a variable we can actually do
38:53
something college instructor so I can structure is sort of like an initializer
38:57
it takes care of setting up the instance of our component so it’s gonna
39:01
initializes value for us some Mexicans director and this is just like a
39:08
function it’s always gonna be executed for you automatically when it is
39:12
completed is initialized and then we can add a property to this constructor for
39:20
this component and then just give it another name file type and Bob to say
39:24
that it’s different and save this we get something else right here
39:29
I like my name better so I’m gonna switch it back to rate and it’s a change
39:34
as soon as the application reload now of course we can have different types of
39:39
data in order to display an array we can use a loop to display the elements of
39:44
the array and our template so go ahead and modify our list right here so I’ll
39:51
just leave the name and add another property so this will be artists and it
39:59
will be an array of strings so that’s how you do that you just create a
40:03
strange and then put the array notation rate here and then we can add and know
40:08
their property here in this diet artists and set that equal to our list of
40:15
artists and let’s create some names here and save this page is not gonna look any
40:29
different
40:30
we need to go into our template and what I’m gonna do is create and unordered
40:37
list here with some list items to create these individual items I’m going to use
40:43
a directive and it’s very similar to the way we used in anger wine it’s going to
40:49
be called in G four and it needs an asterisk right before the name and in
40:55
here I’m going to ask angular to create a temporary variable we do that with a
41:01
hashtag so we’ll say our temporary variable is going to be item and is
41:08
going to look for a property called artists which we’ve already created and
41:14
so this will create a template for the energy for is going to create a
41:19
temporary loop and allows to display any one of our items here so I’ll do it I’ll
41:27
do and h2 and then use my template syntax and now I want to just asked to
41:36
this play each one of these items so I just is the variable that we created
41:41
right here
41:42
spring or the string array and gave it all these names and so in order to enter
41:48
83 each one of those we need to use his energy for directive with the asterisk
41:53
and create a temporary variable in here so as we go through this loop of element
41:58
these items get placed for each one of the values in our RA
42:05
see this type of hashtag use all over the place in angularjs to it also known
42:11
as a local template variable so it’s still bearable that gets created for
42:16
this sequence of events and someone to go ahead and see this right here and you
42:22
should see all these names come up in our template just to make these look a
42:28
little nicer I’ve created some special classes and I’m gonna add those here
42:32
don’t really have anything to do with angularjs they’re just things that I
42:36
styled in my CSS file and now these kinda look like drop down menus of
42:44
course we can also have objects so we can use the same and g4 to iterate
42:50
through a series of objects and to do that let’s go ahead and go back into our
42:54
appt component and we’re just going to modify this data I’m gonna get rid of
42:58
this second right here just to make things a little bit shorter and then
43:03
instead of having an array here we’re gonna have an array of objects in these
43:12
objects are going to have property so the name is going to be that and then
43:16
I’ll put in another uncle school here with a couple of school names of these
43:25
objects are no longer an array of strings so I could do one of two things
43:29
I could define this artist’s have been type any and refresh this and now I need
43:39
to modify my template so that I asked for the item name right here and also
43:47
items school and we’ll just put that in a paragraph right here
43:54
an agency that looks just fine so the other way of handling these is by not
43:58
re-signing the classes and then just coming down like we did before when our
44:05
data structure was a lot simpler now there’s another really useful directive
44:10
called and GTF it allows us to add a little bit of logic to the template so
44:16
you can have something show up only if a variable has a certain value and do that
44:21
we’ll go ahead and move over to our app that HTML file and then in this pant a
44:27
great here will add an NGF directive so that would be again with the start just
44:33
like D&G for and then n GE Capital I lower case if and 48 now we’ll just say
44:41
if the variable name exists and it has a value then display the name right here
44:50
otherwise don’t see this not really gonna do anything because the variable
44:57
name does have a value right now but if we get over here back into the SAP
45:01
component he go ahead and delete my name and save it you’ll see that that
45:07
particular part of the application doesn’t show up and put it back in there
45:12
and if we have something in there then my name will show up so part of learning
45:20
to work with data means understanding how to manage the information that goes
45:24
in our template gets there
45:27
this format is definitely different than angularjs you can see that there are
45:30
different types of elements that we can use we have these and g4 and NGF
45:37
directives which are Micra templates as well as the standard interpolation
45:44
template strange that we can use of these double curly braces and other
45:49
really important thing to learn when developing applications is how to deal
45:53
with event and then to allow you to respond to any sort of user input
45:58
angularjs has a special notation to deal with event so first of all let’s go
46:04
ahead and simplify our data structure
46:06
and our app components so that it doesn’t use this more complicated
46:10
notation I’m gonna delete this right here to lead the constructor and just
46:17
said the name like this and then this other variable called artists and I will
46:25
just make this simple names of artists right here go ahead and add them
46:38
that they had that means that we also need to change our template and save
46:45
this and back in our apt that HTML we need to modify this we’re just gonna
46:51
output name which right now is just the item parameter as we go through the loop
46:59
of artists which is now an array then the items to stand name of each artist
47:04
and save this and you can see the names of here just fine over here so we want
47:11
to do is capture a click event so that whenever we click on one of these
47:15
elements this name will be updated right here in order to capture any event you
47:20
place them in parentheses like this so we can ask angularity go ahead and track
47:26
a click event and we just type in the name of the event and then when that
47:31
event takes place then we can perform an action which is going to be a method of
47:38
our class so we can say whenever you get clicked on your head
47:43
executed a function called on click and if right now we’re not gonna pass
47:48
anything to the function go ahead and save this and go back into a component
47:54
now we need to write that function so that’s going to be on lake and and here
48:01
we can just say this time named equals just type in bob right here so now and
48:08
save this and when we click on any of these elements you’ll see that we get
48:13
the name bob up here obviously that’s not what we want so let’s go back into
48:17
app that HTML and pass something along if we want to we can pass all the event
48:23
information by using a dollar sign and the keyword event and save that things
48:30
will go back into a component and it will pass that into a variable a local
48:36
variable into this on click method and we could do here is not worried about
48:42
the fact that it says Bob for right now we’ll just a put the event to the
48:48
console like this just like we went in javascript
48:51
go ahead comment the South right now and I’m gonna save my soul once it reloads
48:57
then we can click on and these items and if we check the console I’m right click
49:03
and select inspect you can see let’s switch over to the console over here you
49:09
can see that the whole event came in from language assets track in this event
49:15
and we can open this up and access any of these event properties so if we look
49:21
at the target property you’ll notice that there is and property inside that
49:27
called enter text or innerHTML let’s go ahead and type in E
49:34
dot dot in our HTML and save that and I’m going to clear the console and click
49:43
on any one of these elements can see that now we get the name of each person
49:48
when we click on them and if we want to we can use that to said the Needham
49:53
property of this component so should have seen this team equals bob and we
50:00
can just say this name equals and then all this stuff right here and delete
50:07
this console statement and will save it right once and refresh is now when we
50:12
click on Dec can see that the name updates up here
50:17
easier way to do this now remember that using the hashtag in front of an element
50:23
like we’ve done in this template got back here to the template will notice
50:28
that we use this hashtag and created a temporary template variable called item
50:33
and we use that to output the name of each person you can also use that item
50:40
variable and pass it along to Iran click handler we can just say on click and
50:46
just say I don’t rate here and that will become what gets passed into our method
50:52
and saved this and come back into a component and now instead of an event we
51:00
are going to get call this my name
51:03
name and will set the name to that variable name save this and let’s click
51:12
on the agency that it works in exactly the same way now let’s go ahead and add
51:18
an input field to our application someone to go back and here and right up
51:24
here to change this band to a label because it’s really going to be a label
51:31
for our input field and then we’ll type in an input field don’t really need it
51:36
right here in when I want to do is add the ability to create new artists so to
51:45
do that I can create a template variable on this input field someone to create it
51:51
and it’s gonna be called new artists and Dan are create a button this button is
52:00
gonna say and its gonna have another click handler in there that’s going to
52:10
execute a new function that we’re going to create call dad artists and two that
52:16
function I can apply my template variable rate here so I’m gonna pass
52:21
along new artists and I can reach any other properties of those element and we
52:30
know that input fields have a property called value so I can pass that along
52:35
and that means that whatever I type and here is going to get passed along into
52:41
our message let’s go ahead and save that can see the button right now and we’ll
52:48
go back into a component and create our other message and will call this my
52:57
artists to local variable
53:00
and we’ll do a push to the artists are a push is just a regular javascript
53:08
function and we’ll pass along this new variable my artists in here let’s go
53:14
ahead and save this and type in a new artists here and type in my name here
53:19
and we’ll hit a button and you’ll see that my name appears right here and
53:25
that’s pretty cool we can add any other number of names right here and as long
53:31
as we click the Add button it’ll get added into our RA and the list will
53:36
actually data automatically once we change the model right here our list
53:42
will automatically update because we are passing along and the artists array so
53:48
this is actually looking pretty good right side like to add a few more event
53:53
I’m gonna put these in the input field so great here I’m going to do a key up
54:01
and turn event and that is going to equal the same thing
54:07
handing copy to stand here and if we want to we can also do a blur events or
54:16
blur means when somebody leaves an empty field he up enter will mean that
54:22
whenever somebody presses the Enter on the keyboard after they are in the same
54:28
boat filled and save so now if I put in something and here I hit the enter key
54:36
will get a new name added and also if I just hit the Tab either of those will
54:44
activate this in the same way so if you want to we can also add another reset of
54:51
the value here so we’ll see new artist value and will just clear it out at that
54:59
everywhere so whenever somebody does any of these things so if I say my name here
55:08
now when I hit enter its gonna add the name and then it’s gonna clear
55:13
the value of this field survey do that again even if I hit the Tab key now is
55:20
going to do the same thing now being able to handle event is a fundamental
55:25
part of any application angular makes it a lot easier by providing hopes to the
55:30
different events as well as capturing and giving you the event object that’s
55:35
going to allow you to create some really interesting applications with a minimum
55:39
of fuss
55:41
jazz has a way to link properties from your template to your component using
55:46
square brackets right now we’re using a method called interpolation so great
55:52
here with these double curly brackets were out putting the value of a variable
55:56
that is in our component so we go back to our component will notice that we
56:01
initialize that with my name ray and if we click on one of these elements right
56:06
here
56:07
leary said that value to be whatever we click on another way of doing that and
56:13
that is using square bracket notation make a copy of this one so you can see
56:17
the difference and instead of Justice playing this weekend actually modify the
56:25
property of this label into let’s go ahead and do dinner HTML that’s a DOM
56:33
property of any regular HTML tag that means the HTML in side this HTML element
56:41
and we can do is just said that to the name that we want in here so we’ll just
56:46
say let’s go ahead and save this and right now we’ve got two of them so let’s
56:52
go ahead and get rid of the other one so we’ll get rid of the interpolation
56:58
version
56:59
go ahead and save it you’ll see that it’s doing kind of the same thing and
57:03
the other one
57:04
had a little piece of the label that said named we can do that by just typing
57:08
in a literal strain and then just use an expression here as we say plus the
57:13
variable called name in let’s put a call in here and save that for now and we
57:20
should probably put a space in there as well said look a little nicer now his
57:23
name and then whatever we initialize that with and in the same way if we
57:28
click on any of these it’ll show the proper name so this is just another
57:32
notation for what we were doing before now this square brackets notation has
57:39
another style that we can use as you like it a little bit better it’s called
57:44
by and and then the name of the attribute that we want to change so if
57:49
we do this it’s going to work in exactly the same way is just sort of a different
57:54
style of that notation I think the bracket notation is actually more
57:59
popular so you’ll see it used more often in angularjs to applications now let’s
58:06
go ahead and use this property binding to change the background color of each
58:10
artist when we click on their name so right now that’s happening on this line
58:15
right here and what we want to do is when somebody clicks on this we want to
58:19
pass it along the list item that contains each one of these elements so
58:26
to do that I’m going to create a temporary template variable someone who
58:30
used a hashtag right here and I’ll call this artist teaner and do whatever you
58:36
want that create a temporary variable and we can do then is go ahead and pass
58:41
that along with our event so whenever we click on this element is going to pass
58:49
along the item and the item is each individual piece of data but we want is
58:55
actually the list item that has each one of those names so we’re passing along
59:01
the HTML element and save that and go back into a component and right now I
59:09
just want to show you that if we console log what we pass
59:14
and will put what we pass along in a new variable called my element and then
59:21
we’ll just appetite to the console and see that so now when we click on one of
59:27
these element and show the console first all right click and select and SPECT
59:32
make sure that I’m showing the consoles to come over here and choose console and
59:38
let’s go ahead and click on one of these you’ll see that I’m actually a pudding
59:42
with this console lock statement the list item that has my age to element
59:47
with the name and so we have that list item we can do anything we would be able
59:53
to do with JavaScript to thad Allen Mentalist go ahead and say my element
59:59
and modify the style property and will change the background color to something
60:07
else to hash tag ECE for each and save that can hide this and when it reloads
60:19
whenever we click on one of these elements the elements that we have
60:22
clicked on will highlight and stay that way the square bracket notation gives
60:28
you an easier way to access and modify properties within a template using
60:33
something and the controller and it doesn’t have to be a property or a
60:37
variable it can actually execute its own method that does something more
60:43
complicated sometimes it convenient to have an element that can both respond to
60:48
an event and modify a property at the same time anywhere gives you a shortcut
60:54
to do this that combines both of the techniques that we’ve been doing so far
60:57
so we have been learning how to use properties of an element like the
61:02
innerHTML of this label to assign a value that is based on our variables
61:08
that are in our component and the other thing that we’ve done is attached
61:12
different events that can allow us to do things through our components so
61:17
calculate a new artists are at one right here and so on and so forth
61:22
now we can actually do both of those things simultaneously and
61:27
you can probably figure out how to do it but i wanna do is show you that we
61:31
already know how to create this two-way binding ourselves if we did it sort of
61:36
with the two techniques that we already have so what I’m gonna do here is modify
61:40
the property of this input field called value and I’m gonna set that to the name
61:48
variables named variable remember is the name that we have an appt components of
61:53
this variable rate here that is set to my name right now so if I save this
61:57
you’ll notice that when the page reloads it will already have my name on it and
62:02
if I click on these different artists will populate that as well because as
62:07
you know when we click on one of these artists the name value also changes to
62:13
do this on click function right here and so we’ve got that taken care of but what
62:19
about and events away if we wanted to change the value of that variable as a
62:25
user was typing something in our input field so wanted to do that
62:31
go ahead and put this on the next line like this we could use an event notice
62:36
that were already doing events for the input field here and here we can add
62:41
another one that checks for an input event that’s going to take place when
62:46
somebody’s typing something into an empty field and if there is a change in
62:52
our input then we can set the name variable in the same thing that we’re
62:56
doing up here we can change that to our event remember that angular stores all
63:02
the event information in this special event variable and then we can just add
63:08
for the target so whenever the event is generated which would be somebody typing
63:13
something in this input field we are going to change the value of the element
63:19
that has that event which is the same at Ford Field so what that will do it and
63:24
save it and that will allow us to see the name change as we type intent so a
63:30
you can see that as I’m typing the name and it’s being copied into this other
63:38
field because
63:40
was the job of this other fields to display that name through this property
63:45
so there’s actually a way to do this all in one fell swoop
63:50
jazz has a couple of directives called Angie model and engine control that
63:55
allows you to handle to a binding like this now we use energy model when we
64:00
want to work with and import feel like this if we had a control like say
64:05
something like a checkbox radiobutton or a pop up then we would use energy
64:10
control and so all we need to do here is how delete the second one and just say
64:16
that we want to create an engie model and then we’ll just ask at the track the
64:24
value of the variable name so let’s go ahead and save this and this will
64:29
refresh and you’ll see that it works exactly like before so this is a short
64:35
guide it’s really important that you understand why it’s working and what
64:39
it’s doing which is combining both of these methods or we can access
64:43
properties and also check for event at the same time sometimes it is convenient
64:49
to do slightly different things sometimes you’ll see products they
64:53
actually do different things when somebody imports something and maybe you
64:59
want to sort of change the value of something now or a launch a method that
65:03
does something different so you’ll see both of these annotations and the most
65:07
important thing is that you understand when each one of them is the way to go
65:13
for your project and I think that you can do with templates is attached CSS
65:19
styles just like we did with the HTML template and just like with them you can
65:24
add either just a string of texts is the back take character to add a multi-line
65:29
stat sheets or use an external stylesheet now let me show you how that
65:33
works I want to go back into the app that component that yes file and in here
65:39
I can add another element and it can be either something all styles or style you
65:47
are else you have to remember the capital you
65:51
and lowercase rest of the letters now let me just go ahead and add a single
65:56
style with the styles key word here and unlike the templates these are inserted
66:03
into an arrest if you wanted to entered a specific element you could just do
66:07
something like this and then do like a target for a container or something like
66:13
that when I want to do is bring in a style that I’ve recreated for you can
66:19
tell my button doesn’t look too exciting right now so I’m an improved that by
66:22
adding a style so I’m gonna go over a to this just right here in copy this now
66:29
that I have here for a button click on rob because it’s easier to copy that way
66:34
and not a set of already inserted dback tix here
66:37
second disc copy this go back into my apt and let’s get rid of these straight
66:43
quotes and just peace that right there and if I wanted to add more styles I can
66:48
add a comma and add some more right there let’s go ahead and save this and
66:54
we need to make sure that and our appt dad HTML file when we use the button it
67:00
has the proper class year so the class for this is going to be bTW and and
67:06
let’s go and see that you can see that the button now just looks a lot better
67:10
now that something pretty awesome about this style and that’s because it’s being
67:15
controlled and added by our component whenever it is being used in our peach
67:21
if we’ve got a lot of components on our website but were only using some of them
67:26
on a specific page then only those tiles for the component are going to be added
67:31
to our page and it’s actually adding them in the head section of our
67:35
documents if we were to inspect element here and look in the head section you
67:40
would see a style section with our button component rate here again but the
67:46
nice thing is that all that is being managed for us
67:49
automatically I just like with HTML template of course you can refer to an
67:54
external stylesheet here if you want to just grab this button right here and if
68:01
we wanted to refer to another style
68:04
we can actually create some other style sheet saying our CSS document and as
68:09
long as you’re using styles or style you are else then we could just refer to a
68:15
file name right here so say that we had an app that CSS file here go ahead and
68:24
create that file right here in our CSS cold air will call this app that CSS and
68:32
then if we wanted to we could pace that button code and year however button is
68:37
probably something that you’re going to want to be sort of universal to all your
68:42
pages so maybe that’s not the best thing to put on that stylesheet go ahead and
68:48
just put this at the bottom of our current style she and then we’ll find
68:52
all the code for our application which is right before it in our CSS file and
68:58
let me scroll all the way up to this area where it says search styles and
69:05
just copy all that out of here
69:07
leave sort of the main styles that we would use for any sort of section of our
69:12
website right here and I’m going to save this ugly for a second then in our apt
69:21
at CSS we will pay star style sheets save that and we’ll go back into a
69:26
component and now that we have added this style you are else we probably need
69:31
to add the location which in relationship to the index HTML page is
69:36
going to be the CSS folder and then the file called app that CSS so once that
69:43
gets finished loading you can see that all of our styles look great
69:48
the huge difference is that it is only gonna add those styles on to our page
69:53
whenever we are using that specific component so if you don’t have this my
69:57
ad component on our page
69:59
styles are going to be at it so it’s sort of always bothered me to create
70:04
styles that are used only in specific element to my global style sheets this
70:09
is a really smart way to keep your style is focused and organized that you get
70:15
only what you need
70:16
when you’re using these components so far we’ve been using a simple on type
70:22
data structure to hold our information that might be okay for a simple example
70:26
let’s go ahead and take a look at how r application which means if we were using
70:31
a more complex data structure as well as some Xmas script six and typescript
70:37
classes so what I want to do is define our data that’s right now just an array
70:43
of names as an array of objects and it could do that by just modifying and this
70:49
but technically I should be creating a structure for the data that I’m going to
70:54
be using inside the array so right up here I’m gonna add something called an
71:00
interface and interfaces sort of like a class that doesn’t have any methods sort
71:04
of a simpler version of a class of this will be an interface and we’re going to
71:08
give it a name will call this our list so each artist is going to be defined as
71:14
having a name that’s gonna be a string something called a short need this is
71:20
the shorter version of the name with out any special characters and then also a
71:26
renowned sort of a description of what the person is known for as well as a bio
71:33
that’s going to be sort of a longer description for each artist so now we
71:37
have this interface we can go ahead and use it to describe our data a little bit
71:42
more fully so i’m gona good idea net at the very end of each year we had a new
71:49
variable called artists and that is going to now be of type artist and it’s
71:56
going to be an array of those elements so an array of objects in the format
72:03
that we defined in this interface up here so I need to feed to some data now
72:08
I prepared a chest with all the data that we’re going to use in this project
72:14
easy way to copy this is just click on this Rob and select of this copy this
72:20
out of here and then I’m going to just he stayed down here so now we have a
72:26
bunch of sort of sample
72:28
data that we can use on the project now are a component is going to be a lot
72:32
simpler I’m gonna do is delete all this and then I’m going to create a variable
72:38
called artists and then feed our artists constant and that’s why it’s all
72:46
capitalized constants like this are usually capitalized make sure the names
72:51
are right and all this a component is going to do is expose this array of
72:57
artists so let’s go ahead and see that and right now our template have the
73:04
wrong sort of data in them so that’s why it’s showing you that these are objects
73:08
because as we loop through all the different items are were out putting is
73:14
items which right now are objects so we need to just ask for a specific element
73:20
here or use item name let’s say that and now we get the names of each of the
73:28
artists and if we want to we can pull and now they’re element here so I now
73:35
will display what they’re known for let’s go ahead give that when a headline
73:40
level 3 here so that it’s a little bit smaller so that looks a lot better
73:46
already now I’m gonna clean up this hard up here is it doesn’t really need all
73:53
these different element so this will just be a label and the label say search
73:59
for and actually let me on do and I’ll keep this NGS statement here so search
74:08
for other one NGF and if there’s an element called Querrey then this will
74:14
appear and let’s go ahead and put this energy and a span
74:25
right so if that variable exists it’s going to show the query and we will
74:33
delete all these events on the same foot field and what I want to do is create a
74:39
28 data binding so that is the square brackets and parentheses and type in the
74:46
variable here called queria that I want to create and I’ll add a placeholder
74:50
here and searched term and really need to spend anymore someone to get rid of
74:59
it going and see that and actually the cease to be and G model equals weary so
75:11
now this is going to be the input field where we type in the query and if we
75:18
type in aquaria right here you’ll see that the four will start showing up we
75:22
don’t have anything here then it won’t show up and we want to do one more thing
75:26
which is actually display the query terms so we will use interpolation to
75:32
justice play this very term right here and so now we type in something and here
75:39
it will show us what we are searching for here while we type it and if we
75:45
don’t have anything it’ll just have a search label without the word force
75:49
that’s pretty cool let’s go ahead and make this just a little bit more
75:54
formalized I’ve created some classes for this information someone created this
75:59
year with a class of info and all these elements are sort of in there and then
76:06
I’m gonna create an image tag and in here I’m going to look at the images
76:15
folder and then I’ll use interpolation to look for the item short name and the
76:24
job of short name is to give you a simplified version of this name that
76:28
just has a first name and last name so for example for hillary she’s got two
76:33
last names so the shredding sexy just one of the two last night
76:36
and they are all in a simpler format in the images that represent their face is
76:45
named around those short names so you’ll see in just two minutes let’s say images
76:52
/ item touch her name and all the images and with underscored p.m. fourth time
77:00
now that jpg and we should always use an alt tag so I’m gonna do item name and
77:10
then forward over here right let’s take a look in that should look a lot better
77:15
we need to add a class to this list item so this needs a class of artists and
77:22
clear six again this is just some styles that I create it beforehand and just to
77:27
make things look a lot nicer and I we have a pretty nice looking directory
77:32
list that has needs that come in from a more complex data sources that we use
77:39
structured by creating this interface if you’re coming in from Planet JavaScript
77:45
to this more strongly typed class-based language is going to be a little bit of
77:50
adjustment I don’t necessarily want to tell you how to program your code
77:54
however a lot of examples that you’ll see on the web use this more formal
77:59
structure with angularjs to everything revolves around the concept of component
78:05
so in order to get her application to do anything we need to set one up now every
78:10
component has at least three part a decorator which has information about
78:14
the controller a view which is just a template that we want to show and then
78:19
the controller part which is the JavaScript that is going to add
78:23
functionality to the view now it’s a really simple way to create applications
78:28
and wire up our first component now before we do that in order to add any
78:33
functionality with angularjs we need to import the library that we want to work
78:38
with into our application to find a complete listing of all the modules and
78:43
libraries that they belong to
78:45
in the API page now the most common modules
78:50
are called comment which you see right here and there’s another one called core
78:55
which is a little bit further down in order to create our first component we
79:00
need to import the component definition from angular to court can see it right
79:06
here will also need to have a way to start up or initialize the application
79:12
so will be the bootstrap module and that one is further down in angular to
79:19
platform browsers he could see that the bootstrap module is right here it’s
79:24
really a function that starts at the application was gonna do that so in my
79:30
boot that he has filed that is in my process falter in the types grateful
79:35
they’re going to import those two modules first time on imported the
79:40
component module
79:42
angular to score and then I’ll importing the bootstrap function from angular to
79:52
platform browser so now we’re ready to get going to go ahead and start by
79:58
creating our component Cisco as in something called a decorator so it
80:03
starts with an ad sign and then the word component and they will pass along our
80:07
object with our different decorations now this definition right here is called
80:13
a decorator it let’s all set up a lot of different types of information about our
80:18
components in angularjs to create a component it creates a shadow DOM
80:23
element for the component and then it loads of the template into that DOM
80:27
element this is going to give us the ability to create our own HTML tags and
80:31
then define what that tag is going to do through JavaScript so the first thing we
80:36
need to add to this component is called are selector this will be the name of
80:41
the HTML tags we want to create a will do a selector right here and we’ll call
80:47
this my apt next we can add argue or template now we’ll get into templates a
80:53
bit deeper and a later video but for now we’re just going to add some simple HTML
80:57
to get things going so well do it right here
81:02
type in some HTML in some quotes now this is really important and very easy
81:10
to mess up
81:11
decorators are a tight script edition and in that language they are
81:15
expressions that return a function it’s actually a javascript 7 feature and what
81:19
you have to remember is that you do not put a semicolon at the end of this
81:24
decorator definition if you do this you’ll get an error that is extremely
81:29
difficult to debug you probably feel like putting a sonic on right here but
81:33
just don’t do it so finally we need to create the controller for our module now
81:39
this is going to be a class that’s going to define the functionality for our
81:43
application right now it’s not really gonna do anything but we need to create
81:47
this class so that then we can bootstrap the application so we’ll call this class
81:52
at component and right now it’s not really going to do anything so now we
82:00
have all the elements of the component ready we need to initialize or load up
82:05
the application now this is done through a function called bootstrap now we
82:10
loaded bootstrap from platform browser right here so we can just call that
82:15
function and pass along are a component class now bootstrap is going to look for
82:22
the selector that we defined right here in our HTML and then it’s going to bind
82:28
the information from our model to it that means that we need to do one more
82:32
thing and that’s sad
82:34
the my appt tag into our HTML wherever we want our message to show up right now
82:40
the only thing that will happen is that my Apple be replace by this HTML heading
82:46
lows that each one and I’m gonna save this and then I’ll switch over to index
82:52
HTML and in the Body section I’m just gonna create a new tag gonna be called
82:59
my app lets go ahead and close they’re just like we would a regular HTML tag
83:04
and I’m gonna tape and the words loading dock that right here and then going to
83:10
save this
83:12
if I take a look in my browser we should see this text right here that says
83:17
welcome to my appt
83:20
angular is in essence this plane the message from our component now this is
83:24
just a bad the simplest type of application that you could possibly
83:28
create but it sets of the foundation of how you build anything with angularjs to
83:33
finish up component is something you have to do quite often and he gets a bit
83:39
more complicated with the more components we have on our application so
83:44
let’s see how adding a second subcomponent complicates things just a
83:48
little bit right so the first thing I want to do is go ahead and create a new
83:52
partial this is going to have the HTML for my new component somebody call this
83:58
artist details that each the amount and this is gonna be some clean each team
84:04
out to these classes I’m adding a great here are just things that I’ve created
84:14
in CSS noting that angular specific and here I’m going to be using interpolation
84:25
to bring in some of these variables from each user so this artist is going to be
84:31
something that I’m going to pass along to this artist details that each team in
84:37
my component and I’m gonna go ahead and view this with software app so you can
84:43
see all of it
84:43
Muslim time I don’t like to wrap things cause I think it makes the codebook a
84:47
bit more disorganized but it’s a little bit easier to see when I have wrapping
84:52
turned off by let’s go ahead and save this and now I’m gonna create my new
84:59
component and it’s going to be called artists details
85:04
component that es and just like with the app component I’m going to import score
85:12
sexy let me go ahead and copy everything here including this component so we’ll
85:19
come back here we need to import this component for angular core we don’t
85:24
really need to bring
85:25
the information about the artist item in this one we do need to create this
85:31
interface this particular component is going to need to understand what makes
85:37
up an artist and so I’m gonna need this definition just like I did in the
85:42
previous component it’s something that we probably want to place in its own
85:46
file if we have more than one component using it but for analysis copy and paste
85:52
it in here so that we can use it so the selector is not going to be called
85:56
artists details details
85:59
URL is going to be an artist details that HTML and I’m not going to be using
86:06
directives here in for a now this is not use any styles but we are going to need
86:13
to have as an input artists and this is what we’re gonna be feeding into this
86:19
component and of course down here will need to export the class for this
86:24
component and I’ll call that artists details
86:29
component I really gonna do anything but we do need to create it go and save this
86:34
and we need to go back into a component make sure that we are importing the
86:39
artist component as well as our new component which is artist details come
86:45
on it and we need to make sure we are importing from the right place so
86:50
artists details component here as well go ahead and switch software app in here
86:56
as well just so that we can see everything on this window I directives
87:01
are going too important not just artist item component but also artist details
87:07
component and now I need to worry about how the information about the artist is
87:13
going to get to my details component so in the app that HTML document and you to
87:20
add my new tag my new directive so this week called artists details and we’ll
87:30
need to close that out and the variable that we’re going to inject artist
87:34
details is going to be called the artist
87:36
and if you remember in artist details I am using and this variable called
87:43
artists to go ahead and fill out all this information here so that’s what
87:46
we’re doing we’re just identifying that and passing a long as a property now
87:52
we’re going to pass it along to a variable called current artists having
87:57
to find that yet but that’s how we’re going to do it so we need to do now is
88:02
make sure that we create the click event that’s going to generate this current
88:07
artists variable so that’s going to happen whenever we roll over one of
88:11
these items number we want when we click on one of these artists we want to bring
88:16
this artist details
88:18
component up so we’ll need to do the click event it needs to happen in the
88:22
list item so we’ll do that next we’ll say OK click event right here and this
88:30
is going to run a function in the apt component and we’re going to call a show
88:36
artists and will pass it along the item that we want to show so where are we
88:44
getting this item
88:45
remember go ahead and use this as a software app as well remember that each
88:50
one of these elements as we’re looping through them when we create them get a
88:54
temporary template variable called items which one of these is going to have its
88:59
own item variable we’re using that and passing that along to our function
89:03
culture artist we’re going to create in just a second and that will give us all
89:09
the information for the individual artists so now we need to create the
89:13
shortest function here so let’s go ahead and save this might break the
89:17
application it’s still working just fine
89:20
probably break if we click on it and also we haven’t saved a component yet so
89:25
that’s probably why it’s not breaking hearts are now in exporting this class
89:30
AB component we need to create the function that going to give us the
89:36
information that we need so great here we need to say show artists and show
89:44
artist is going to receive that variable called item now this is
89:48
is a variable that exists inside this function that the fact that I call this
89:53
item doesn’t have anything to do with the fact that in the app and passing
89:58
along a variable called item in this apt component I could call this whatever I
90:03
wanted but two sort of competing in the time on human like to call it the same
90:07
variable name because I don’t want you to think that it’s coming from this
90:12
right here this its own internal variable than in here what i’ll do is
90:17
i’ll set a variable called current artists to that item and because this
90:25
current artists variable doesn’t exist anywhere in this function I’m going to
90:30
need to create its current artists going to be if type artists and whenever I
90:35
show an artist than this variable that’s in this apt component is going to get
90:42
the value with the information for each artist restless go and save this and
90:47
hopefully if we didn’t make any mistakes right so if you notice right now the
90:52
item that we’re creating this artist details is actually showing up and not
90:57
really correct we don’t need something showing up when there is no data for it
91:02
so if you were to look at the console for this you would notice that we’re
91:07
getting some errors the area that we’re getting is that it can’t read property
91:11
name of something that hasn’t been defined and so the main issue we’re
91:16
having right now is that in our apt HTML we are showing this artist details
91:23
before there is any information for it and the other problem is that when we
91:28
are clicking to show the artist we left this old clicking here at that which
91:35
show us the artists that we clicked on we really don’t need to update this item
91:39
called search anymore with this so we can get rid of both of these rate here
91:44
and that way it will only have one click event but more importantly we to make
91:49
sure that we generate and NGF statement so that this shows up only if the
91:55
current artists exists so I’m gonna do
91:59
and NGF right here and if the current artists variable exists then I’m going
92:06
to display this artist details how many go ahead and save this closest out you
92:13
can see that the box not showing and if we click on one of these elements we see
92:18
the box behind everything so let’s take a look it looks like we’re not showing
92:23
the bio somehow that’s just something that I missed so let’s go back into the
92:29
tales and sure enough this is supposed to just be bio bio there’s no such thing
92:35
in the data is going and save that and now when we click on each artist to
92:40
artist will show up now I don’t really want to this list to be here whenever
92:45
the details are showing because Wendy screen is very small you can see that
92:49
the box may be showing up but it’s behind all these lists items so that’s
92:54
not good but go ahead hired this list at the details are showing up so when I
93:00
want to do here is go back into at that HTML and only show this list if there is
93:07
a search queries for an artist so I’ll do and and she is statement here just
93:15
make sure that if there is a queries somebody has type something in here then
93:21
the list of artists will show up and then when I can do when I click on one
93:28
of these artists names in addition to run in this function called show artist
93:33
I can also said the query to be equal to nothing that should clear out the query
93:40
let’s try that out like I made a typo in here it should be NGF like this go ahead
93:47
and refresh that and now this list doesn’t show up until we type and an
93:52
artist’s name right now it’s not really filtering artist is this sort of show on
93:56
the list no matter what we type in here but if we click on an artist then this
94:01
queries gone and so the artist will show up properly and although this isn’t
94:07
perfect quite yet there’s some improvements that we could do this the
94:11
functionality
94:12
of this details is working pretty well so we can click on some other artists
94:17
and have that artists information show up as you can clearly see breaking your
94:23
application into components makes them a bit more organized but there is a lot
94:28
more things that you have to worry about and so let’s take a look at some of the
94:32
improvements that we could make to the application in the next video
94:36
application is almost done but there’s a couple of things that we could improve
94:41
on now since we may end up using our artists class it would be a good idea to
94:46
create that as a separate file also we’re using our styles a little bit and
94:50
consistently in the apt that component that yes we’re using a style you are
94:55
else and in the artist item component reusing just a styles array with
95:01
individual styles so go ahead and fix both of those that start with taken out
95:06
this interface artists from both of the places using it and separating that as a
95:11
separate file something to cut this one out of here and then I’m going to create
95:16
a new file here and I’ll just call this artist that yes and here I’m gonna piece
95:23
that and make sure that I use an export command otherwise I won’t be able to
95:28
import it somewhere else and then I’m going to save this come back over here
95:33
and imported manually so here we’re just gonna grab this one and copy it and
95:41
import artist the class with the interface from just the artist class
95:48
file that we just created which is called artists and the other place that
95:53
we are using it is in the item details component so we’ll take it out of here
95:59
will peace that in there
96:03
and call that file again in this other component rights of both of those
96:08
components are now using a single file if I ever had to change the structure of
96:13
this class I would just need to edit one document and it always recommended that
96:18
you use one class per component or per file that keeps things a little bit
96:23
cleaner now let’s go and fix the other problem which is the inconsistent usage
96:28
of style sheets as I mentioned in our decided component I’m using this tiles
96:34
that are in disarray so what i’ll do is create a new file I’ll call this app and
96:42
then items that CSS and I’m gonna grab all the styles from here and pasted on
96:51
this new file take out both of these elements I had these as two elements in
96:56
an array and you could do that if you want to or you can space them all in one
97:01
place and save this and come back here and change this so that it uses this
97:07
style URLs array and then call and that other file which is in the CSS fall
97:13
there and it’s called app items that CSS alright so let’s go ahead and save this
97:21
and let’s go ahead and create the styles for the other component which is artist
97:27
details will do something similar here will use a styles or style you are else
97:33
and call and a file that we’re going to be creating in the CSS fold there will
97:39
call this one app details that CSS so let’s go ahead and create down in here
97:45
and what I want to do is go ahead make sure we save this one close out some of
97:54
these other attacks that were not using right now and in the app that CSS we
98:01
have a bunch of styles and see all this artist info stuff right here that we can
98:06
cut out of this town she and and paste into
98:10
this app details file so go ahead and see that and let’s try refreshing this
98:17
sometimes you need to do that that’s going to click and you can see that the
98:22
styles are now applied here you make this a lot bigger you can see that this
98:26
card only reaches a certain size moreover we are using only a single
98:35
artist class there’s a couple of improvements that I could make to the
98:39
stylesheets let me just go ahead and do that I’m going to add a flow last on
98:45
this image and a little bit of a margin
98:49
let’s go ahead and save that and when we type in the artist and click to get the
98:55
details this looks a lot better actually looks pretty nice when it is really why
99:00
is that this is excellent I tell it’s a good practice to keep to a single class
99:05
for each of your components and also moving our styles to external files will
99:10
also make things more consistent overall anything you can do today to help things
99:14
make more sense when you take your code and the future is going to be time well
99:18
spent in angularjs one filters allow you to control the house someday that was
99:24
displayed in angularjs two filters are now called pipes are filtering content
99:30
through pipes can be a little more challenging in this new version so let’s
99:35
go ahead and take a look and create our filter for our data that takes into
99:40
account but we type in here under the query data in as an input change it
99:46
somehow and then your desired output and there are some built in pipes so for
99:51
example I can take the display of this name right here and use a pipe command
99:56
to modify that so that it’s always uppercase so let’s go ahead and see this
100:01
in now as you can see all their names are upper case now that’s a very simple
100:06
pipe there are a few other ones especially ones that relate to date if
100:12
you take a look at the API 2.0 preview you can type in the word pipe and see
100:17
some of the other ones so there is a lowercase Piper percent pipe something
100:22
to turn things up
100:23
he’s as well as add a pipe now if you want to use a pipe in the same way that
100:29
you did an angular one you’re going to have to build it yourself so are the
100:33
type of pipe that we need we’re gonna have to build our own version so what
100:38
I’m gonna do is under this type script folder I’m going to create a new file
100:43
and I’m gonna call a search type that tis is gonna look similar to other
100:51
classes so what i’ll do first is import the pipe class from the angular 24
100:58
library and then I’m going to need a decorator the decorator is similar to
101:04
what we’ve done before but it’s called pipe and in here who want to pass along
101:08
an object just like before
101:10
sure that you do not put a semicolon right here and then you pass along a
101:15
name this is gonna be the name of the pipe so this is how we’re going to call
101:20
this within our content so I’ll call this one find and then we’re going to
101:25
need a class definition so we’ll see exported class and will call this search
101:33
type and then in here we can start programming are pipe now pipes used a
101:39
method called transform that allows you to define the data as well as the
101:45
modifiers soyuz a transfer method here and pass along the pipe data and this is
101:54
an array of how we want to modify the data and then in here we’re going to
102:00
create our transformation so what I’m going to return from this function is
102:07
the pipe data I’m going to take that data and filter it through some text
102:14
filters so what I can do here is asked for each of the elements in my data
102:19
array saucy each item and use an error function and dysfunction itself is going
102:27
to take our data and return each of the elements so once again each item and
102:36
we’re going to
102:36
the data that we want to modify because what we’re doing is essentially taking
102:40
our object that has a bunch of information artists so we want to do is
102:45
modify each of the items are going to be relevant to the search in my case I went
102:51
to search either through the Name field of each artist or the renowned field so
102:56
you could search for just the name of the artist as somebody type sedan or
103:01
also any information in what they’re known for so I’ll see each item and what
103:07
I want is the name and because I want to be able to type in the name in lowercase
103:13
or uppercase and not have to worry about being case sensitive
103:19
then we’ll take the name converted to lowercase this is just a regular
103:23
javascript function to lower case and then use and includes method again this
103:31
is another Javascript method that checks to see if an element includes another
103:36
element and what I want to do here is check the pipe modifier and also change
103:43
that to lower case again we’re just converting both the data that were
103:48
searching with the data in the object and instead of just checking for one
103:54
element let’s go and make this bigger so you can see it all on one line so
103:58
instead of just checking for each item’s name what I want to do is actually check
104:03
for either the name or another field and then one type in the other field that I
104:09
want to check which is now and compared that to lower case and also convert the
104:15
pipe modifier to lower case then delete the second or right here and we’ll put a
104:21
semicolon it right there now I’m counting my parentheses and it looks
104:27
like I got a little trigger-happy hear someone to lead this other one eats a
104:32
semicolon right here and I actually need a parenthesis right there as well but so
104:41
are custom pipe is all set up let’s go ahead and save this and will switch back
104:46
into the apt component file
104:49
will need to import this new pipe into the sequins rate here so go ahead and
104:55
copy one of these so we called the class for the search pipe search pipe and we
105:03
want to import it from search type that TAS and that also needs to comment
105:12
through our decorator by calling pipes right here and that receives an array of
105:19
pipes and right now will have one so we will pull in search pipe and here we
105:25
have a common right there and then once we do these two things
105:31
save this and we need to add this now into our HTML so let’s go into the app
105:39
that HTML here is where we list each item and here is where you make the
105:45
query and we went to do here is then in RNG for statement so great here we’re
105:53
going through each one of the artists I’m going to pipe down information
105:59
through our signed pipe and we’re gonna pass along the query parameter go ahead
106:07
and do this with soft wrapping gonna pass along to this find pipe are worried
106:13
promoter remember query is what users type in right here so let’s go ahead and
106:20
save that hopefully we haven’t made any mistakes it so it is heartening to see
106:25
this
106:26
loading status here it means that there’s something wrong with our appt so
106:30
I’m gonna go to the inspect command here in our developer mode and go to the
106:37
console agency that is saying that it can’t find a resource of 44 means they
106:44
can’t find a file and I’ve got a couple of problems here number 1 I’m looking
106:50
for something called search that pipe that tis I don’t need to put the date
106:55
yes extension in an import command
106:58
that’s because our system J as module handler is gonna automatically add the
107:04
extension but I’ve also actually called this file search that pipe and it looks
107:10
like I’m actually looking for search that pipe so let’s go ahead and save
107:14
this and I’m going to rename this search right here so let’s do renaming search
107:20
and make this dash pipe and now you can see that it reloads just fine make sure
107:29
we re-air the console and just reload again just in case sometimes when the
107:35
console shows you areas unless you clear them you’re not going to know if there’s
107:39
really no errors anymore San agency that everything is filtering properly so we
107:44
can actually type in you type in space you see everybody again that’s because
107:49
everybody’s name has to space and it so if you type in any term that is either
107:54
in the name of the artist or in the renowned then that artists will show up
108:00
and you can show that artist information and just by clicking on them and that’s
108:04
actually a pretty good search so filter is actually something that I really miss
108:10
from the angular one version of this platform and I hope that it’s something
108:15
that in the future the angularity ads back because it’s one of the more fun
108:21
and easy ways to filter content having to write your own search pipe is a
108:27
little bit more challenging than just using built-in filters however I think
108:32
it’s still a good lesson to learn if you want to know how to bring some of the
108:36
other pipes from angular one there is a really good section on the angular to
108:41
website called upgrading from one point X and it has a lot of interesting info
108:47
about how to bring content from aguillar 12 angular too including in this our
108:54
methods for the old order by and even the filter Querrey commands that we used
109:00
to have so there are some examples of how to build those I’ve shown you hear
109:05
just how to do
109:06
the filter Querrey but all this information on how to build a custom
109:11
pipe is going to be useful to you at some point in the future even if those
109:16
are added back into angular
AngularJS 4U is a development blog and Angular Community where you can share your latest ng development tips, articles, demos, plugins, modules and more.

Leave a Reply

Your email address will not be published. Required fields are marked *