IntroductionWelcome| 00:00 |
(MUSIC).
Hello.
| | 00:04 |
I'm Joe LeBlanc.
Welcome to Up and Running with AngularJS.
| | 00:08 |
Angular is a powerful, flexible JavaScript
framework tied directly to HTML.
| | 00:14 |
We'll be exploring techniques, like
editing data in real time using models,
| | 00:19 |
using filters to change output at display
time, routing requests to separate views,
| | 00:24 |
and communicating with server side
resources.
| | 00:29 |
Angular has the tools you need to build
browser-based applications quickly, so
| | 00:33 |
let's get up and running with AngularJS.
| | 00:36 |
| | Collapse this transcript |
| What you need to know| 00:00 |
Before learning AngularJS, there are a few
things you'll need to be comfortable with.
| | 00:04 |
First, there's JavaScript.
JavaScript is the primary language that
| | 00:08 |
Angular is written in.
To learn more about JavaScript, take
| | 00:12 |
JavaScript Essential Training from the
lynda.com library.
| | 00:15 |
Angular is also tied directly to HTML.
To learn more about HTML, take HTML
| | 00:21 |
Essential Training, also on the lynda.com
library.
| | 00:25 |
AngularJS is a JavaScript framework tied
directly to HTML, so knowledge of both are essential.
| | 00:31 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
This course includes exercise files you
can use to follow along.
| | 00:03 |
They are designed so you can jump into any
video.
| | 00:06 |
Let's have a look at how the Exercise
Files folder is organized.
| | 00:09 |
The Exercise Files folder has a folder for
each chapter.
| | 00:13 |
These folders have folders for each video.
There's a start folder and a final folder.
| | 00:18 |
The start folder has the beginning state
of code at the beginning of the video.
| | 00:22 |
While the final folder has the ending
state of the code.
| | 00:25 |
You can use the start and final folders to
compare your work with the work in the video.
| | 00:30 |
There's also a server folder.
This folder contains the HTTP server we'll
| | 00:35 |
be using for this course.
In the next chapter, we'll be talking
| | 00:38 |
about how to use and set up this server.
With the exercise file structure in mind,
| | 00:42 |
you can now watch any video in this course
and follow along.
| | 00:46 |
| | Collapse this transcript |
| Using the challenges| 00:00 |
This course includes several videos called
Challenges.
| | 00:03 |
Challenges are quick exercises that give
you a hands-on opportunity to practice and
| | 00:08 |
master what you’re learning.
I’ll start each challenge by describing
| | 00:11 |
your core objectives for the exercise.
If the challenge involves using any sample
| | 00:16 |
files, I’ll tell you where to find them.
I’ll also give you a rough estimate of how
| | 00:20 |
much time it took me to complete the
challenge.
| | 00:23 |
When you've completed a challenge, make
sure to watch the matching solution video.
| | 00:27 |
In each solution, I'll show you how I
solved the challenge and give you some of
| | 00:31 |
my thinking along the way.
After working through these challenges
| | 00:34 |
you'll be well on your way to mastering
angular js.
| | 00:38 |
| | Collapse this transcript |
|
|
1. Configuring a New Angular ProjectWhy Angular?| 00:00 |
With numerous choices for JavaScript
frameworks, why choose Angular over the others?
| | 00:05 |
Let's take a look at the unique features
Angular offers.
| | 00:08 |
This is a complete web application built
in Angular.
| | 00:11 |
It's designed for an airline.
On the flight screen, we can search for
| | 00:15 |
different flights offered by the airline.
As we type in airport codes, the view
| | 00:20 |
updates automatically.
Let's take a look at some of the code
| | 00:23 |
powering this.
On line 18, we have a tr element.
| | 00:27 |
This element has an attribute named
ng-repeat.
| | 00:31 |
Now, this is no ordinary attribute.
In Angular, it's referred to as a directive.
| | 00:35 |
This particular directive allows us to
cycle over an object or an array.
| | 00:40 |
Another feature with angular is scoped
variables.
| | 00:43 |
Each HTML element has it's own variable
scope.
| | 00:47 |
So this way, the flight variable that's
declared here, is only applicable to the
| | 00:51 |
tr element.
This way, you don't have to worry about
| | 00:54 |
JavaScript variables polluting the global
scope.
| | 00:57 |
Finally, you can use Angular as much or as
little as you like.
| | 01:01 |
To activate Angular, add the NG app
directive to your markup.
| | 01:05 |
Then also add the Angular Library as a
script.
| | 01:08 |
From there you can use any of the
directives or filters or modules offered
| | 01:12 |
by Angular.
Angular's tight integration with HTML sets
| | 01:16 |
it apart from many other JavaScript
frameworks.
| | 01:19 |
Eliminating repetitive DOM manipulation.
Directives and Netsense scopes provide the
| | 01:23 |
functionality needed for building
sophisticated applications.
| | 01:28 |
| | Collapse this transcript |
| Downloading Angular and dependencies| 00:00 |
Using Angular is as easy as including one
JavaScript file and writing HTML markup.
| | 00:06 |
So, let's download Angular now.
Go to angularjs.org and click the Download button.
| | 00:11 |
You'll have several options here for the
download, stable and minified is fine.
| | 00:15 |
Now, click the Download button.
This pulls it into our Downloads folder,
| | 00:19 |
but this isn't where we're going to be
working with it.
| | 00:22 |
Lets create another folder where we will
be able to work with this file.
| | 00:25 |
I'm going to go to the Desktop and create
a New Folder here, and I'm just going to
| | 00:30 |
call it project.
So, now I'm going to move angular.min.js
| | 00:33 |
into the project folder, and and now I'm
going to drag the project folder on to
| | 00:38 |
Sublime Text.
Right now, we have a minified JavaScript
| | 00:41 |
code for angular.
This code has all the white spaces
| | 00:44 |
stripped out of it, so that it downloads
as quickly as possible.
| | 00:48 |
Now, lets add an HTML file that will use
Angular.
| | 00:50 |
Angular has a short cut for creating HTML
documents quickly.
| | 00:55 |
First, make sure that the context is set
to HTML.
| | 00:58 |
Next, type HTML and then type tab, this
brings up a skeleton for an HTML file.
| | 01:05 |
I'm going to give this document a title of
Demo.
| | 01:07 |
Next, I'm going to include angular.min.js.
Type in script and then type tab.
| | 01:14 |
This automatically fills text/javascript
as the script type.
| | 01:18 |
To include the file, add a space, type src
equals, and then the path to the
| | 01:23 |
JavaScript file.
Now, let's add some Angular code.
| | 01:27 |
To activate Angular, we need to modify the
HTML tag.
| | 01:31 |
Type a space and then ng/app.
Now, I'm going to type in some code where
| | 01:36 |
people will be able to add their name and
be greeted.
| | 01:39 |
So, I'm going to type h1 and tab, and that
will give me an h1 tag.
| | 01:43 |
Now, I'm going to type Welcome, and then
I'm going to use double curly braces, and
| | 01:48 |
then I'm going to type name, and then I'm
going to close those double curly braces.
| | 01:53 |
Those double curly braces are going to act
as a place holder for the name variable.
| | 01:57 |
Now, I'm going to add an input were people
can type their name, type in input and a
| | 02:02 |
tab, and then add the forward slash.
I'll add an attribute called placeholder,
| | 02:08 |
and then set that to type your name.
And now I'm going to add an Angular directive.
| | 02:13 |
This one is called ng model.
Ng model is going to be set to name.
| | 02:17 |
So this way, when someone types their name
in the input, it'll automatically be
| | 02:22 |
reflected in the h1 tag.
So, let's Save this file, call it index.html.
| | 02:28 |
Now, let's open this file in a web
browser.
| | 02:29 |
I'm going to project, and then I'm just
double clicking on index.html.
| | 02:35 |
So, now we have an H1 that says Welcome,
and then we have an input where we can
| | 02:39 |
type our name.
So, you'll notice as I typed in my name,
| | 02:42 |
the H1 tag updated automatically.
This is because the ng-model directive is
| | 02:47 |
binding the name variable.
Let's go back to angularjs.org.
| | 02:52 |
You'll notice there's a link here called
Extras.
| | 02:54 |
Click on this link, and several other
JavaScript files will appear.
| | 02:58 |
We already have Angular itself, and we
don't necessarily need any of these other files.
| | 03:02 |
However, later on we'll be wanting to deal
with server side resources.
| | 03:08 |
Angular resource will allow us to do this.
So, download angularresource.min.js.
| | 03:14 |
Clicking on angularresource.min.js, simply
displays the JavaScript code in the browser.
| | 03:20 |
We really want this to be a file on our
computer, so let's save it.
| | 03:24 |
So, that saved the file to our Downloads
folder.
| | 03:27 |
Let's move this file from Downloads to the
Projects.
| | 03:30 |
While Angular is functionality is found in
a single file, it also offers extras, but
| | 03:35 |
these are not required.
| | 03:36 |
| | Collapse this transcript |
| Developing an application boilerplate| 00:00 |
While Angular itself is just one
JavaScript file, more will be added as our
| | 00:04 |
application grows.
Keep our project organized, it's helpful
| | 00:08 |
to create a Boilerplate structure that can
be used for each new project.
| | 00:12 |
I'm going to the Exercise Files, and going
to Chapter 1, Video 3.
| | 00:16 |
And now, I'm going to copy the start
folder to the desktop.
| | 00:19 |
Currently, we have
angular-resource.min.js, angular.min.js,
| | 00:24 |
and an index.html file.
Let's rearrange this and begin adding more
| | 00:29 |
resources that we'll need for our
Boilerplate.
| | 00:32 |
First, let's download Bootstrap.
Bootstrap is a CSS framework that I'd like
| | 00:36 |
to use with this project.
After downloading it, it's going to go to
| | 00:39 |
my Downloads folder.
So first, let's move that from the
| | 00:42 |
Downloads folder to the start folder.
Now, unzip this file, and then you'll
| | 00:47 |
notice there's a CSS folder, an img
folder, and a js folder.
| | 00:51 |
Let's move all these down into the start
folder.
| | 00:53 |
Now, I'm going to remove both the
bootstrap folder and the bootstrap.zip file.
| | 00:58 |
The CSS folder contains all the Cascading
Style Sheets that we're going to be using
| | 01:02 |
for the Bootstrap framework.
And then, the img folder contains images
| | 01:06 |
for some of the icons.
The js folder contains some JavaScript for
| | 01:10 |
Bootstrap that we are not going to use, so
let's remove it.
| | 01:13 |
Now, let's move our Angular files into the
js folder.
| | 01:17 |
We could leave the Angular files here, but
one thing to keep in mind is that we're
| | 01:21 |
going to be adding more JavaScript to this
project.
| | 01:24 |
Also, it'd be a good idea for us to keep
the Angular files separate from the files
| | 01:28 |
that we create.
That way, we won't edit the Angular files
| | 01:31 |
by mistake.
Let's add another folder for Angular and
| | 01:34 |
any other libraries that we download.
I'm going to call it lib.
| | 01:38 |
Now, move the angular files into lib.
Finally, we need to update index.html with
| | 01:44 |
our new files.
I'm going to open it in Sublime Text.
| | 01:47 |
First, let's change the path to angular,
and next, let's also add the angular
| | 01:52 |
resource file.
We also need to add the bootstrap CSS file.
| | 01:56 |
To do that, in Sublime Text, type link,
and then press Tab.
| | 02:01 |
This'll create a link tag for you.
Next, let's add the path to the bootstrap file.
| | 02:06 |
It's in css/bootstrap.min.css.
Bootstrap has another css file.
| | 02:12 |
This file contains the responsive design
features of Bootstrap.
| | 02:16 |
So let's include it as well.
Notice that we're only including the
| | 02:20 |
minified versions of these files.
They're marked with .min in the name of
| | 02:24 |
the file.
Now we can use this as our project Boilerplate.
| | 02:28 |
We can use this as the base for our
current project as well as future ones.
| | 02:32 |
Developing a good Boilerplate before
writing an angular application will keep
| | 02:36 |
things organized and help avoid confusion
later on.
| | 02:39 |
| | Collapse this transcript |
| Starting a Node server| 00:00 |
Throughout this course, I'll be using a
Node server to deliver the application.
| | 00:04 |
This server is distributed separately in
the exercise files.
| | 00:08 |
Let's set up the server.
First, let's make sure that Node is
| | 00:11 |
installed on this computer.
I'm going to go to terminal, and type in,
| | 00:14 |
node space dash dash version.
Typing in this command should give you the
| | 00:19 |
version number of Node.
If you get an error instead, Node is not
| | 00:24 |
installed on your computer.
To install Node, you can get it from node.js.org.
| | 00:29 |
For more information on installing Node,
watch Node.js First Look.
| | 00:33 |
Specifically, watch the installing Node
chapter.
| | 00:36 |
With Node on this computer, I'm going to
set up the server.
| | 00:39 |
First, I'm going to copy the server folder
from the exercise files to the desktop.
| | 00:44 |
I'm going to leave it here throughout the
rest of the course.
| | 00:46 |
Next, I'm going to open up terminal.
I want to change directory to that server folder.
| | 00:52 |
So I'm going to type in cd D and then
desktop forward slash server.
| | 00:57 |
Since, this is the first time I am using
the server.
| | 01:00 |
I need to install the node dependencies,
to do that I am going to type in NPM install.
| | 01:05 |
If you see warnings during the
installation process, don't worry about them.
| | 01:10 |
These are primarily directed towards the
developers of the packages that we are using.
| | 01:15 |
Next, let's start this server.
To do so, type node, space, index.js, then
| | 01:22 |
type Return.
It says the server is now ready at local
| | 01:25 |
host port 3,000.
If we go to local host at port 3,000,
| | 01:29 |
we'll currently get an error.
This is because we currently don't have a
| | 01:33 |
public folder inside of our server.
To fix that, let's go to the exercise files.
| | 01:38 |
There's a public folder inside of the
start folder.
| | 01:41 |
Copy the public folder into the server.
Now if we refresh the browser, it shows
| | 01:46 |
the application bootstrap we developed
earlier.
| | 01:50 |
One thing to note is that you can keep the
server running from video to video.
| | 01:54 |
Just replace the public folder with the
appropriate one from the exercise files.
| | 01:57 |
The Node server makes it possible to
switch the exercise files without stopping
| | 02:02 |
and restarting.
Be sure to have the server running, before
| | 02:05 |
you start each video.
| | 02:06 |
| | Collapse this transcript |
|
|
2. TemplatesSupplying scope data| 00:00 |
Each dum element in AngulAir has its own
variable scope.
| | 00:04 |
Lets have a look at how variables can be
assigned to scopes and how that can be displayed.
| | 00:08 |
First, I'm going to start up the nodes
server.
| | 00:10 |
I'm going to change directory into
Desktop/server, and then I'm going to type
| | 00:15 |
node index.js, I'm now going to minimize
this window.
| | 00:19 |
Next, lets have a look at the server
folder.
| | 00:22 |
If you already have a public folder here
remove it.
| | 00:25 |
Now, go to the Exercise Files folder and
get a public folder for this video, copy
| | 00:30 |
this folder into the server folder.
If we go to local host at port 3000, we
| | 00:35 |
have the existing application.
Let's start making some changes.
| | 00:38 |
I'm opening up the server folder and I'm
opening public in Sublime Text.
| | 00:44 |
In this course, we're going to be dealing
with a fictitious airline.
| | 00:47 |
Let's start changing around the mark up to
display a list of airports.
| | 00:51 |
First, I'm going to remove lines 10 and
11, and then make a little space.
| | 00:56 |
Next, I'm going to create a div here.
I'm going to give the div a class of container.
| | 01:01 |
This is a boot strap class.
After that, I'm going to add in a header,
| | 01:05 |
and now I'm going to add an unordered
list.
| | 01:08 |
If I type ul and hit Tab in Sublime Text,
it gives me the full tag.
| | 01:12 |
Inside of this unordered list, I'm going
to have three variables.
| | 01:16 |
One for the airport code, one for the
airport city, and one for the airport name.
| | 01:20 |
To output these three variables, I'm going
to enclose them in double curly braces.
| | 01:26 |
Finally, we need to have a way of
supplying the airport object.
| | 01:30 |
To do that, we're going to use the ng
repeat directive.
| | 01:33 |
We're going to supply this directive with
the code airport in airports.
| | 01:37 |
However, we still need a place for this
data to come from.
| | 01:40 |
Lets have a look at the js folder.
Inside of the js folder there's now a
| | 01:45 |
controllers folder, and inside that folder
is app.js.
| | 01:48 |
On line one, we're defining a new
function.
| | 01:52 |
This function has a single argument of
$scope.
| | 01:54 |
What's different about this function from
a standard Java script function is that
| | 01:58 |
AngulAir is going to have a look at it
first.
| | 02:01 |
When AngulAir sees the $scope variable in
the function signature, it's going to
| | 02:06 |
automatically pull the scope object, and
supply it into this function as it's called.
| | 02:12 |
The difference is that AngulAir is going
to be calling this function.
| | 02:15 |
We are not going to call it directly.
Once we have the scope, we can then assign
| | 02:20 |
variables to the scope.
In this case, we're adding airports as a
| | 02:23 |
property of the scope, and airports as an
object.
| | 02:27 |
This object has the airport code, the name
and the city for each airport in the list.
| | 02:33 |
Now, that we have this function, we need
to tell AngulAir to use it.
| | 02:37 |
Copy app.ctrl, and then go back to
index.html.
| | 02:42 |
On line ten, add ng-controller to the div
tag, and then paste in the value.
| | 02:48 |
This tells AngulAir to look for App CTRL
and to use it as the controller for this element.
| | 02:54 |
Lets save this file and go to the browser.
You will notice that when I hit Refresh
| | 02:58 |
nothing appears, that's because we need to
add the Java Script file.
| | 03:02 |
Make a space on line six, type in script
and then type tab if you are in Sublime
| | 03:07 |
Text, and then add the path to the Java
script file.
| | 03:10 |
Now, save index.html, go back to the
browser and hit Refresh.
| | 03:14 |
You’ll notice that there are three
unordered lists.
| | 03:17 |
These correspond to the three airports
that are in our scope.
| | 03:21 |
Since, this variable is in the scope, we
can use it in more than one place.
| | 03:24 |
Let’s create another list that just shows
the code for every airport.
| | 03:28 |
Make some space down on line 20, and then
create another unordered list.
| | 03:33 |
This time we're going to repeat the list
items.
| | 03:36 |
Add an ng-repeat directive to the list
item, and then again use airport in airports.
| | 03:42 |
This time just add airport.code as a
variable.
| | 03:46 |
If we save the index.html file, and then
go to the browser and hit Refresh.
| | 03:50 |
You'll notice the airport codes are listed
underneath the airports.
| | 03:54 |
Now, let's take a look at what happens if
we move this markup.
| | 03:57 |
Currently, this markup from line 20 to
line 22 is enclosed within the div that
| | 04:03 |
starts on line 11.
If we move the code that's on lines 20
| | 04:07 |
through 22 and move it outside of this
div, it's going to lose the scope.
| | 04:12 |
Save the file, then go back to the browser
and hit Refresh.
| | 04:16 |
Now, that the code is moved outside of the
div, its outside of the scope.
| | 04:20 |
So, it doesn't have access to that data.
Controllers in AngulAir provide a way of
| | 04:24 |
setting and changing scope variables, when
a controller function definition contains
| | 04:28 |
the scope variable, AngulAir will use
dependency injection to supply the right object.
| | 04:34 |
| | Collapse this transcript |
| Filtering output| 00:00 |
Raw data often needs a bit of formatting
before it's ready to be presented.
| | 00:04 |
Angular provides filters capable of
formatting just before output.
| | 00:08 |
Before diving into the, the Angular code,
let's start up the server.
| | 00:12 |
I'm going to change directory to
Desktop/server, then I'm going to type
| | 00:17 |
node index.js, and then hit Return.
This started up the server.
| | 00:22 |
Now, let's get the Exercise Files in
place.
| | 00:25 |
Go to Chapter 2 > Video 2, and copy the
Public folder out of start and into the
| | 00:30 |
Server folder.
Now, let's go to local host at port 3000
| | 00:34 |
in the browser.
Currently, we're listing the airport code
| | 00:37 |
followed by a dash, and then the name of
the city.
| | 00:39 |
Let's start editing this code.
I'm pulling the public folder into sublime text.
| | 00:44 |
And now, I'm opening index.html.
Now, let's say we wanted to display all of
| | 00:48 |
the airport cities in uppercase.
We could go to the data stores itself.
| | 00:53 |
So if I went to js > controllers and
app.js, I could just change the names of
| | 00:58 |
all the cities to uppercase.
However, that's not very convenient and we
| | 01:03 |
might also want to keep this data the way
it is for use later.
| | 01:06 |
Instead of changing the data itself, I'm
going to filter it.
| | 01:10 |
To do that, go to line 15, and then add a
space after airport.city, then after that
| | 01:16 |
add a pipe, the pipe lets AngulAir know
that we want to use a filter.
| | 01:20 |
And the filter we're going to use here is
called uppercase, save the file, then go
| | 01:24 |
back to the browser and hit Refresh.
Now, all the city names are displayed in uppercase.
| | 01:29 |
Let's take a look at some of the other
filters that are available in AngulAir.
| | 01:33 |
The next one we're going to take a look at
is a currency filter.
| | 01:36 |
Add a few lines after line 16 and then add
a paragraph tag.
| | 01:40 |
Up until now, we've been using scope
variables throughout our AngulAir application.
| | 01:45 |
In this case, we're going to use a string
literal.
| | 01:48 |
Open with two curly braces, and then add
the number 128 in single quotes, then add
| | 01:54 |
a pipe and then type currency, then close
with two curly braces.
| | 01:58 |
If you save the file and refresh the
browser, you will notice $128 appears with
| | 02:04 |
the correction number of decimal places.
Finally, let's take a look at one more
| | 02:08 |
filter that can be very useful if you're
wanting to debug an application.
| | 02:12 |
Add a couple more lines, and then add
another paragraph tag.
| | 02:16 |
In this case, let's say we want to see the
entire airport object at once as a string.
| | 02:21 |
To do that, we can use a JSON filter.
This will take the JavaScript object and
| | 02:25 |
turn it into a string.
Open with two curly braces and then type
| | 02:29 |
in airports, then follow with a space and
a pipe.
| | 02:33 |
And then another space and json, and
finally end with two curly braces.
| | 02:38 |
Save the file and refresh the browser, and
you'll notice we have all the data that
| | 02:42 |
was available as a JavaScript object, but
it's now represented as a string.
| | 02:46 |
This could be helpful to make sure that
you're actually getting data set in a
| | 02:50 |
scoped variable.
These aren't the only filters that are
| | 02:53 |
available at AngulAir.
On docs.angulair.js.org, there's a section
| | 02:57 |
for filters on the left.
It shows all the filters that are
| | 03:00 |
available with AngulAir.
Filters provide a way of formatting
| | 03:04 |
variable output without changing the
scoped variables.
| | 03:07 |
Whenever possible, use filters to keep
presentation logic out of the controller.
| | 03:12 |
| | Collapse this transcript |
| Controlling scopes| 00:00 |
Besides variable, scopes can also contain
functions.
| | 00:04 |
Angular provides a way of calling these
functions when down events occur.
| | 00:08 |
The server is already up in running, so
lets add the exercise files into the server.
| | 00:13 |
Go to the exercise files folder, go to
chapter two, video three, start, and then
| | 00:19 |
copy the public folder into the server
folder.
| | 00:24 |
Then go to the browser and load up local
host at port 3000.
| | 00:28 |
Currently, we're displaying three airports
with the airport code and the name of the city.
| | 00:32 |
What I'd like to do next is add links to
these cities.
| | 00:36 |
After clicking on a link to a specific
city, it'll set that airport as the
| | 00:40 |
current airport.
To do this, let's start editing the code.
| | 00:44 |
I'm dragging the Public folder onto
sublime text two, and then going to js
| | 00:48 |
controllers and app.js.
Let's add a function and a variable that
| | 00:53 |
will help us keep track of the current
airport.
| | 00:56 |
First, let's add the variable.
We're going to set this as a scope variable.
| | 01:00 |
Type in $ scope.
And then .currentairport, initially I'm
| | 01:04 |
going to set this to null.
Next, let's add the following function
| | 01:07 |
that will allow us to select the current
airport, again type in $scope and this
| | 01:13 |
time type set airport.
This function will take one argument,
| | 01:17 |
which is the airport code.
Once we have the airport code, we can use
| | 01:22 |
that to look up the information for a
specific airport.
| | 01:25 |
So for instance, if MCI was passed in, we
would have the information for Kansas City
| | 01:31 |
International Airport.
Now let's write this function, so that the
| | 01:34 |
airport code looks up the information and
stores it into current airport.
| | 01:39 |
Notice that we're using code to look up
the airport in the Airports scope
| | 01:43 |
variable, then setting current airports in
the same scope.
| | 01:47 |
Now, let's go back to index.html and
actually start using this function.
| | 01:50 |
Let's add links to each of these list
items.
| | 01:53 |
Add an anchor tag here, and just wrap the
entire string in that tag.
| | 01:57 |
Leave the href attribute blank.
We don't want to send this to a specific URL.
| | 02:03 |
We just want to give users a place to
click.
| | 02:06 |
This is where it would be possible to use
an on-click attribute.
| | 02:09 |
Instead of using on-click, I'm going to
use ng-click.
| | 02:12 |
The difference between on-click and ng
click, is that ng click is going to look
| | 02:17 |
for a function that's in our scope.
By contrast, on-click would look for a
| | 02:21 |
global function.
Since airport.code is within this scope,
| | 02:25 |
we can pass it into the function.
Now, save index.html, go back to the
| | 02:30 |
browser, and hit refresh.
There are now three links.
| | 02:34 |
However, when you click on the links,
nothing happens.
| | 02:36 |
Lets change that, go to the end of line 16
and make a couple of new lines.
| | 02:42 |
Open up a new paragraph tag, then type,
current airport, and follow that with a colon.
| | 02:47 |
Since current airport is one of the scope
variables, we can use it here.
| | 02:51 |
Start with double curly braces, type
current airport and then type, dot name
| | 02:56 |
and then end with closing curly braces.
Now, save the file and go back to the browser.
| | 03:02 |
Now, hit refresh.
You'll notice the current airport appears
| | 03:06 |
with no data.
Now when we click on a city, it shows the
| | 03:09 |
name with the airport.
There is one more thing we can do to make
| | 03:12 |
this a little bit nicer.
If you hit refresh, you'll notice that
| | 03:15 |
current airport is displaying with no city
name.
| | 03:19 |
Ideally, we really don't want to show
this, unless a current airport is actually selected.
| | 03:24 |
So to handle this, we can use a directive
from AngulAir, called ng show.
| | 03:28 |
Go back to index.html, and then add ng
show as a directive to the paragraph tag.
| | 03:34 |
Then set ng show to current airport.
Ng-show evaluates a variable in your
| | 03:40 |
scope, and determines whether it's null or
undefined or false, and if it is, it
| | 03:45 |
doesn't show what's in that tag.
However, if it's set to something else, it
| | 03:49 |
displays the tag.
Save index.html, and go back to the
| | 03:53 |
browser, and hit refresh.
You'll notice the current airport disappeared.
| | 03:57 |
But if we click on an airport, it
reappears.
| | 03:59 |
Functions added to scopes can be called
directly from elements.
| | 04:03 |
The ng click directive makes it possible
to call these scope functions.
| | 04:07 |
| | Collapse this transcript |
| Including partials| 00:00 |
As an application grows, it's likely the
same pieces of markup will be needed in
| | 00:04 |
multiple places.
Angular makes it possible to create these
| | 00:08 |
pieces of markup as partials.
The server is already running, so let's
| | 00:12 |
copy the Exercise Files into the server.
Go to Chapter two, Video four, Start, and
| | 00:18 |
then Copy the Public folder into the
Server folder.
| | 00:22 |
Now, let's start editing the Public
folder.
| | 00:24 |
The Public folder now has a folder for
partials.
| | 00:28 |
Partials contains airport.html.
The markup in airport.html is designed to
| | 00:34 |
display the current airport.
On line one, we're using the ng-show directive.
| | 00:39 |
This is hiding the markup when current
airport is not set.
| | 00:43 |
Next on line two, we're displaying the
current airport's name as a header.
| | 00:47 |
Then on line seven, we're cycling through
all the destinations of the current
| | 00:51 |
airport, and then displaying them as list
items.
| | 00:54 |
Now, let's go to index.html to use this
partial.
| | 00:59 |
First, let's move some of the existing
markup into another div.
| | 01:03 |
What we're going to do it create a
multi-column layout.
| | 01:05 |
On line 12, add a div tag.
This div is going to have two classes.
| | 01:11 |
The first is pull left, and the second is
span6.
| | 01:15 |
Next, add the closing div tag on line 20.
This div will serve as the left column.
| | 01:22 |
Now, let's add another div for the right
column.
| | 01:25 |
Give this div a class of span5.
Now, we're going to use the ng-include directive.
| | 01:32 |
Ng-include allows us to use a separate
file for the markup.
| | 01:36 |
We can specify the path to that file
through the src attribute.
| | 01:40 |
Within the src attribute, we can specify a
scope variable.
| | 01:45 |
In this case, I'm going to use sidebarURL.
SidebarURL is currently not being set in
| | 01:51 |
our scope, Sso let's set it.
Save this file, and then open js >
| | 01:55 |
controllers > app.js.
Scroll down to line 31, and add $scope,
| | 02:02 |
and then sidebarURL.
Set this variable to partials/airport.html.
| | 02:08 |
Now, let's go to the browser and load this
up.
| | 02:11 |
Go to localhost@port3000.
Now, when you click on the city names, it
| | 02:15 |
displays the airport on the right.
It's also still displaying current airport
| | 02:20 |
underneath the list.
Let's get rid of that, go to line 19, and
| | 02:24 |
remove it entirely.
Now, this is one of several ways you can
| | 02:27 |
use the ng-include directive.
Another way is to use ng-include as a tag.
| | 02:33 |
Let's set up this ng-include tag, just as
we did the div.
| | 02:37 |
We're going to give it a class of span5,
and then the src attribute is going to be
| | 02:42 |
set to sidebarURL.
Now, Save this file and Refresh the browser.
| | 02:46 |
When we click on the city names, the
cities now appear twice.
| | 02:51 |
That's because we're displaying it with
two different ng-include directives.
| | 02:54 |
One of the drawbacks with using ng-include
as a tag, is that earlier versions of
| | 03:00 |
Internet Explorer can not read this.
Partials provide a way of separating
| | 03:04 |
markup into reusable pieces.
You can use the ng-include directive as
| | 03:09 |
its own tag, or you can use it in
combination with another tag.
| | 03:13 |
| | Collapse this transcript |
| Challenge: Editing airports| 00:00 |
In this challenge, you'll create a form
for editing airport names.
| | 00:04 |
Your objectives for this challenge
include, using a link to select an airport
| | 00:07 |
for editing.
There will be a link next to each airport
| | 00:10 |
name and when users click this link, it
should pull up a form for editing that
| | 00:14 |
airport name.
Next, you'll only want to show this form
| | 00:18 |
when the editing is taking place.
And then finally, use a partial to keep
| | 00:22 |
the markup for this form separate from the
rest of the application.
| | 00:25 |
This challenge should take about 10
minutes to complete.
| | 00:28 |
When you're done, make sure to check out
my solution video where I'll show how I
| | 00:31 |
added this form.
| | 00:33 |
| | Collapse this transcript |
| Solution: Editing airports| 00:00 |
So here's how I solve the challenge.
All three airports are displaying with the
| | 00:04 |
airport names.
Currently there's no form showing, but
| | 00:07 |
when I click one of the edit links, the
form appears, and now I can edit the
| | 00:11 |
airport name.
I can edit multiple records, and go back
| | 00:14 |
and forth.
So let's take a look at the code.
| | 00:17 |
First in index.HTML, I added an NG-click
directive on line 16, this directive
| | 00:23 |
allowed me to link to the edit airport
function and passing the airport code.
| | 00:27 |
Also in index.html, I added a div on line
22 this div is using the NG-include directive.
| | 00:35 |
The src attribute is set to formURL.
Currently, this file is referring to
| | 00:40 |
formURL as well as editAirport in the
current scope.
| | 00:44 |
Let's take a look at the scope.
Go to js, controllers, and app.js.
| | 00:49 |
Scroll down to the bottom of the file, and
then on line 32, I added formURL.
| | 00:53 |
FormURL is going to partials/form.html.
Also, on line 39, I added the edit airport function.
| | 01:02 |
This function takes the airport code as an
argument, then this code is used to look
| | 01:07 |
up the airport.
Finally, the airport is set in the editing
| | 01:10 |
scope variable.
Let's now take a look at the form partial.
| | 01:13 |
On line one, I'm using the NG show
directive, it's set to the editing scope variable.
| | 01:20 |
That way, it's only going to show this
markup, whenever editing is set.
| | 01:24 |
Next on line three, I'm using the ng-model
directive.
| | 01:27 |
I'm using this to bind the name of the
airport that's being edited.
| | 01:31 |
This way, as the name of the airport is
being edited, it automatically updates, in
| | 01:35 |
real time.
So using a scope, a partial, an NG model,
| | 01:40 |
makes it possible to display edits as they
occur.
| | 01:43 |
| | Collapse this transcript |
|
|
3. Application StructureRouting views| 00:00 |
Most web applications will have more than
one page.
| | 00:03 |
Rather than loading an entirely new page
from the server, Angular makes it possible
| | 00:07 |
to display updates their views.
I already have by server running, so I am
| | 00:11 |
going to go to the exercise files.
Go to chapter three, video one, start, and
| | 00:16 |
then copy the public folder.
Then open the server folder and paste the
| | 00:19 |
public folder in.
Now, let's start editing this code.
| | 00:22 |
First, in index.HTML line 13 has a div
with an ng-view directive.
| | 00:29 |
Ng-view allows us to specify a place
holder where the view can be displayed.
| | 00:34 |
Next, let's add some JavaScript that will
control this view.
| | 00:38 |
So far most of the JavaScript for this
application has been found in controller/app.js.
| | 00:44 |
For the view logic, let's add a new file.
Copy the script tag from line five, then
| | 00:50 |
add a new line on line six, and paste it
in.
| | 00:53 |
Now, remove controllers from the path.
This app.js file will serve as an overall
| | 00:58 |
file that we can use for the application.
Now, let's create this file.
| | 01:02 |
This file is going to contain what's
called a module.
| | 01:09 |
A module is a self contained piece of code
that's available.
| | 01:12 |
Now, lets create this file.
This file was going to contain what's
| | 01:15 |
called the module.
A module is a piece of self contained
| | 01:18 |
codes that's designed to work with
Angular.
| | 01:21 |
The module I am going to create is
designed to work with the entire
| | 01:24 |
application, so I am going to name it
airline.
| | 01:27 |
The module method takes two arguments.
The first is the name of the module and
| | 01:31 |
then the second is any decencies that you
need for the module.
| | 01:35 |
In this case, we don't need any decencies,
so pass an empty array.
| | 01:39 |
If you omit the empty array, you will get
an error, so even if there are no
| | 01:43 |
decencies for this module still pass an
empty array.
| | 01:47 |
Next, I am going to call a chained method
called config.
| | 01:51 |
This allows me to pass in a function that
will define the views.
| | 01:54 |
I can either define the function right
here on the argument itself or I can pass
| | 01:58 |
in the name of a function.
I am going to create a function called
| | 02:01 |
airlineRouter, and then define
airlineRouter at the bottom Angular uses
| | 02:06 |
dependency injection for the function that
you pass into config.
| | 02:09 |
This way you can specify the objects you
want and then Angular will fetch them, and
| | 02:14 |
pass them in as it calls airlineRouter.
In this case we want the route provider,
| | 02:18 |
so type dollar sign route and then capital
P provider.
| | 02:22 |
Now, let's use Route Provider to define
the routes.
| | 02:25 |
This is done through the when method.
The first argument is the route, and then
| | 02:30 |
the second argument is an object.
This object allows us to pass in the path
| | 02:34 |
to a partial or markup itself.
To pass in the path to a partial, type in
| | 02:38 |
templateUrl, then set this property to the
path of the partial.
| | 02:43 |
Let's take a look at this partial now.
This partial contains the code that
| | 02:46 |
displays all the airports, and allows the
user to pick an airport as the current one.
| | 02:51 |
Let's go to the browser and load up this
site.
| | 02:53 |
Go to localhost at port 3000.
You'll notice now that nothing is displaying.
| | 02:58 |
This is because there's still one more
step before this module we just created
| | 03:02 |
will be active.
On line one here in app.js, we named this
| | 03:06 |
module airline.
However, our application does not know
| | 03:10 |
about this module.
Let's assign this module to the application.
| | 03:14 |
To do that, go back to index.html, then on
line one, set mg app to be airline.
| | 03:20 |
This tells Angular to use the airline
module for this application.
| | 03:25 |
Now, lets go back to the browser, and hit
refresh.
| | 03:27 |
You will notice two things.
First, all the destinations are now
| | 03:31 |
displaying, and then next, you will notice
that there is a hash at the beginning of
| | 03:34 |
the URL and then a slash.
This is because the router is doing all
| | 03:38 |
the routing on the front end, rather than
going back to the server.
| | 03:42 |
Let's define a couple more routes.
Go back to app.js.
| | 03:46 |
At the end of line six, move the semicolon
down, and then call when again.
| | 03:51 |
This time, pass slash flights as the
route.
| | 03:54 |
And now, instead of template.url, type
template.
| | 03:58 |
This is going to allow us to pass in
markup.
| | 04:00 |
Rather than a path to a partial.
Save the file, and then go back to the web
| | 04:04 |
browser, and hit refresh.
Now, if you add flights on to the end, it
| | 04:08 |
loads up the mark up.
However, if you try to go to slash flights
| | 04:12 |
without the hash, they'll send the request
to the server.
| | 04:15 |
Let's add one more route.
Call when again, and this time type reservations.
| | 04:20 |
Again, I'm going to use template.
And now I'm going to add another header.
| | 04:23 |
Save the file, and go back to the browser.
Hit Refresh, finally, replace flights with
| | 04:30 |
slash reservations.
The route provider makes it possible to
| | 04:34 |
build a single-page application, where all
URLs are interpreted by Angular, rather
| | 04:38 |
than by a server.
URLS can be bound to partials or to other
| | 04:41 |
markup through views.
| | 04:43 |
| | Collapse this transcript |
| Supplying navigation| 00:00 |
When an application has multiple views,
its helpful to know which views are
| | 00:04 |
available and which one is active.
Lets add a menu to this application.
| | 00:08 |
The server is running, so I'm going to go
to the exercise files in chapter three >
| | 00:13 |
video two > start and then copy the public
folder.
| | 00:16 |
Then, I'm going to go to the server and
paste the public folder in.
| | 00:19 |
Finally, I am going to open up the web
browser and load up local host at port 3000.
| | 00:24 |
There are now three links for the
different views that are in this
| | 00:27 |
application, one for Destinations, one for
Flights and one for Reservations.
| | 00:32 |
Well, this is convenient it still doesn't
shows us which view is active.
| | 00:36 |
Lets change this now by editing the code.
I am opening the public folder in Sublime Text.
| | 00:41 |
First, lets open up index.html, from lines
14 to 24, there's an unordered list that's
| | 00:47 |
supplying the navigation.
In bootstrap you can add class of active
| | 00:51 |
to make a list item active in the
navigation.
| | 00:54 |
To make that happen, I'm going to add a
new directive, this directive is called ng-class.
| | 01:00 |
By using ng-class, we can tell Angular,
which scope variable to use for the class
| | 01:05 |
of the list item.
In this case, I'm going to use the scope
| | 01:08 |
variable DestinationsActive, and then I'm
going to add an ng-class to both the
| | 01:13 |
flights and reservations links.
For flights, I'm going to use
| | 01:16 |
FlightsActive, and then for reservations,
I'm going to use ReservationsActive.
| | 01:21 |
Now that we're using these scope variables
to determine the class, we need a way of
| | 01:24 |
actually setting those scope variables.
So to do that, we need to call a function
| | 01:29 |
any time one of these links is clicked.
Let's add an ng click directive to each of
| | 01:33 |
these links.
The scope function I'm going to call is
| | 01:36 |
called set active, and it takes one
argument.
| | 01:39 |
The argument is the name of the scope
variable minus active.
| | 01:43 |
So in this case it's Destinations.
And then I'm going to add this ng click
| | 01:47 |
directive to the other two links.
Now, lets go to the controller to have a
| | 01:50 |
look at the setActive function.
Go to JS controllers app.js.
| | 01:54 |
The setActive function begins on line two.
It takes type as an single argument.
| | 02:01 |
First, it sets the three scope variables
as blank, this way the class for each list
| | 02:06 |
item gets cleared.
Then on line seven, we set one of them to active.
| | 02:10 |
We use the tight variable that was passed
in, and then add active on to the end of
| | 02:15 |
that to look up the scope variable to set
to active.
| | 02:18 |
Lets have a look at this code in action.
If I go back to the web browser and hit
| | 02:22 |
Refresh, as I click on each link, it
highlights the link.
| | 02:26 |
This way, we can now see which view is
active.
| | 02:28 |
However, there is still a problem with
this code.
| | 02:31 |
If I load up the site initially, the
Destinations view is active but it's not
| | 02:35 |
shown as active on the list.
It's only shown as active when I click on it.
| | 02:40 |
Let's fix this, so that the highlighting
is not bound to the click event.
| | 02:44 |
We need to move these set active function
calls somewhere else.
| | 02:48 |
To do that, go to the js folder and open
app.js.
| | 02:52 |
In addition to template, or template URL,
you can also pass in a controller to be
| | 02:56 |
used, whenever one of these routes is
selected.
| | 02:59 |
This way, the controller will always be
executed, regardless of whether a link was
| | 03:02 |
followed, or the location bar in the
browser was changed.
| | 03:06 |
Let's pass in these controllers.
Add a controller property to the object.
| | 03:10 |
The value of the controller property will
be a function, and now let's copy over
| | 03:14 |
those function calls to setActive.
First go to line 16 and cut the set active
| | 03:19 |
call, then also remove the ng click
directive.
| | 03:22 |
Paste this function call into the
controller.
| | 03:25 |
Let's do the same now for the other two
routes.
| | 03:27 |
Copy the controller and then paste it into
the object.
| | 03:31 |
Then grab the other set of active calls.
Be sure to remove ng-click from each of
| | 03:35 |
these links as well.
Once these function calls are in place,
| | 03:38 |
save all the files, then go back to the
browser and hit Refresh.
| | 03:42 |
You'll notice that the highlighting still
didn't take place.
| | 03:45 |
That's because we need to specify the
scope in our controllers.
| | 03:48 |
We can have Angular pass in the scope
through dependency injection.
| | 03:51 |
In each of these function definitions add
dollar sign scope.
| | 03:55 |
Then call scope setActive in each of these
controllers.
| | 03:58 |
Save the file, then go back to the browser
and hit Refresh.
| | 04:02 |
Now, all of the links work and
destinations was highlighted when we
| | 04:06 |
loaded the page initially.
Well, there are multiple ways of supplying
| | 04:09 |
navigation, the best way is to use links
and controllers together.
| | 04:14 |
Use the links to show the possible views
and use the controllers to change the
| | 04:17 |
navigation state.
| | 04:19 |
| | Collapse this transcript |
| Nesting scopes| 00:00 |
Angular makes it possible to nest variable
scopes, which can be accessed through
| | 00:04 |
individual controllers.
However, there are some subtleties in this
| | 00:07 |
behavior to be aware of.
The server is already running, so I'm
| | 00:10 |
going to head for the exercise files.
Load up Chapter three > Video three >
| | 00:14 |
Start and then Public folder.
Copy this public folder into the server folder.
| | 00:20 |
Now, let's take a look at the code.
Go to js and controllers.
| | 00:24 |
There are three new files here, one called
Destinations, one called Flights, and one
| | 00:29 |
called Reservations.
These three files are three separate
| | 00:32 |
controllers that we're using with the
router.
| | 00:35 |
In app.js, we're specifying the names of
the controllers.
| | 00:39 |
So instead of having the functions here,
we're just specifying the names.
| | 00:43 |
Currently, the app controller in
controllers app.js has some code that
| | 00:48 |
pertains only to the destinations.
Scroll down to the bottom of the script.
| | 00:52 |
Lines 39 through 44 only pertain to the
destinations controller.
| | 00:57 |
Cut this code and then go to
destinations.js.
| | 00:59 |
Make some space at the bottom and then
paste this code in.
| | 01:03 |
Because these controllers are nested, this
code will still execute when we go to the
| | 01:07 |
Destinations page.
Go to the browser and load up local host
| | 01:11 |
at port 3000.
The Destination section is still working
| | 01:14 |
as intended.
Let's take a closer look at how scopes work.
| | 01:17 |
Back in app.js, we're setting a list of
all the airports that are in the system.
| | 01:23 |
This is an outer scope.
If we open index.HTML and go to line 14,
| | 01:28 |
ng-controller is set to app controller.
Down on line 29 there's the ng-view
| | 01:34 |
directive on the div.
Each time a separate view is selected, the
| | 01:37 |
controller for that view is also bound to
this scope.
| | 01:41 |
This way you have the outer controller on
line 14 and an inner controller on line 29.
| | 01:47 |
The inner controller on line 29 can access
variables in the outer controller.
| | 01:51 |
For instance, here in the destinations
controller, we're accessing scope.airports.
| | 01:57 |
The airport scope variable is being set
back in app.js.
| | 02:00 |
Well, the inner scope can access the outer
scope, the inner scope cannot modify the
| | 02:06 |
outer scope.
Lets see how this works, go to flights.js
| | 02:10 |
and add a line after line two.
Now, set scope.airports to be an empty object.
| | 02:16 |
Finally, go to app.js in the main JS
folder.
| | 02:20 |
We're going to add a scope variable to
both of these templates.
| | 02:23 |
Open with two curly braces and then type
airports.
| | 02:26 |
Then add a space and a pipe and then type
json.
| | 02:30 |
This will display the value of airports in
json format.
| | 02:34 |
Then copy the scope variable and paste it
into the template for reservations.
| | 02:38 |
With all this in place, hit Save.
Now in flights.js, we're setting
| | 02:42 |
scope.airports to an empty object.
Let's go back to the browser and hit Refresh.
| | 02:47 |
First, go to Reservations.
Reservations is showing all the airports
| | 02:52 |
in json format.
Now when you go to flights, you'll see an
| | 02:55 |
empty object.
Back in flights.js, you'll notice on line
| | 02:59 |
three, where setting scope.airports to an
empty object.
| | 03:02 |
And that's being reflected here in the
browser.
| | 03:05 |
You may think that now that we've run this
controller, that the airports object is
| | 03:08 |
set to an empty object permanently.
However, if you go back to Reservations,
| | 03:13 |
all of the data is still there.
The airport scope variable only gets set
| | 03:17 |
to an empty object in the Flights
controller.
| | 03:19 |
In this way, the Flights controller can
have its own local copy of the airports object.
| | 03:25 |
Nested variable scopes is a very powerful
feature of Angular.
| | 03:29 |
They make it possible to have
self-contained elements that can still
| | 03:31 |
read data from the outside, while being
protected from changes elsewhere.
| | 03:35 |
>> Just be sure data is being set in the
right place
| | 03:38 |
| | Collapse this transcript |
| Linking individual records| 00:00 |
Many web applications have the pattern of
showing a collection of records with links
| | 00:04 |
to individual ones.
Using AngulAir's router, it's possible to
| | 00:08 |
generate links to these individual records
and display them.
| | 00:11 |
The server is already running, so I'm
going to go to the exercise files.
| | 00:15 |
I'm going to Chapter three, video four,
start, and then I'm going to Copy the
| | 00:19 |
public folder.
Then I'm going to Paste that folder into
| | 00:22 |
the server.
Now let's edit that code.
| | 00:24 |
First, I'm going to go to the partials
folder and load up airport.html.
| | 00:29 |
The airport partial currently shows the
airport name and then shows a list of all
| | 00:34 |
the destinations.
What I'd like to do here is link each
| | 00:37 |
destination to an individual airport page.
To do that I am going to wrap this
| | 00:42 |
variable in an anchor tag instead of using
href I am going to use the ng-href directive.
| | 00:48 |
By using the ng-href directive we are
preventing the browsers default action, we
| | 00:52 |
want to do that because we were about to
supply a variable here.
| | 00:56 |
I want to make sure that the variable is
available once people click on the link.
| | 01:00 |
Now I am going to set ng-href to hash
slash airports slash open curly braces and
| | 01:05 |
then destination, and then I am going to
close the curly braces.
| | 01:11 |
If I used href here instead of ng-href we
may have ended up with links that had the
| | 01:15 |
curly braces and the word destination
rather than the actual values.
| | 01:20 |
Now, let's add this route to our
application.
| | 01:22 |
Go to js, and app.js.
We're going to add another one here, make
| | 01:28 |
a space on line eight, and then type
.when, and for the first argument, type
| | 01:32 |
slash airports, and then slash, and then
colon, and airportCode.
| | 01:38 |
For the second argument, we're going to
pass in an object.
| | 01:41 |
The first property is going to be
templateUrl.
| | 01:44 |
Now this templateUrl is going to point
back to the partial we just edited.
| | 01:47 |
That's partials airport.html and then
finally we want to add a controller.
| | 01:52 |
Add a comma at the end of that property
definition, and then type controller.
| | 01:57 |
This will be a new controller called
AirportCtrl, now lets go to the
| | 02:02 |
controllers folder and add this
controller, we're going to save this as airport.js.
| | 02:08 |
Now let's define our controller.
The name will be AirportCtrl, we're going
| | 02:12 |
to define two arguments.
The first will be scope and the second
| | 02:16 |
will be routeParams.
AngulAir will read this function
| | 02:19 |
definition and automatically supply the
correct variables when the function is called.
| | 02:24 |
The routeParams object is going to allow
us to get that airportCode from the route.
| | 02:29 |
We want to look up that current airport
and then set the current airport in the scope.
| | 02:33 |
So set scope.currentAirport, and that's
going to be set to scope.airports, and
| | 02:39 |
then we're going to look up the airport
code.
| | 02:42 |
To get that airport code from the
routeParams, type in routeParams.airportCode.
| | 02:46 |
This airportCode property matches up to
the airportCode property in this route.
| | 02:52 |
There's one more thing we need to do
before loading the browser.
| | 02:55 |
Go to index.html and add this new
controller.
| | 02:59 |
I'm going to Copy line eight and Paste it
onto line nine, and then just change
| | 03:03 |
reservations to airport.
Now I'm going to go to the browser.
| | 03:07 |
Load up localhost at port 3000, we can now
pick one of the destinations, and there
| | 03:13 |
are links to the other destinations.
When you click on one of the other
| | 03:16 |
destinations, it now displays this partial
in NG view.
| | 03:19 |
We can also navigate using the location
bar.
| | 03:22 |
If I go to Flights, and then I go to
airports/PDX It'll still load up Portland
| | 03:29 |
International Airport.
To link to individual records, use the
| | 03:32 |
routeParams object to get URL variables.
The route params object will automatically
| | 03:37 |
be supplied by AngulAir whenever it's seen
in a controller function definition.
| | 03:41 |
| | Collapse this transcript |
| Challenge: Displaying two airports| 00:00 |
In this challenge, you create a screen
where two airports are displayed.
| | 00:03 |
First, you’ll use partials to display
airport data.
| | 00:06 |
Next, you’ll use controllers to set the
desired airports for each partial.
| | 00:11 |
And then finally, you’ll use a route with
two URL variables.
| | 00:14 |
The exercise files contains a route that’s
already defined this way.
| | 00:19 |
Go to Chapter three, Video five, and look
in the challenge folder.
| | 00:22 |
This challenge should take about ten
minutes to complete.
| | 00:25 |
When you're done, make sure to check out
my solution video where I'll show how I
| | 00:28 |
display two airports at once.
| | 00:31 |
| | Collapse this transcript |
| Solution: Displaying two airports| 00:00 |
So here's my solution to the challenge.
I'm on local host at port 3000, and now, I
| | 00:05 |
can add two_airports to the end of the
URL.
| | 00:07 |
So I'm going to type airports/PDX/MCI,
this loads up both Portland and Kansas City.
| | 00:16 |
Let's take a look at the code that makes
this happen.
| | 00:17 |
First, go to partials > two_airports.html.
There are two divs here that are almost identical.
| | 00:24 |
The difference is the ng-controller
directive.
| | 00:27 |
There's Airport1Ctrl on line 1 and then
Airport2Ctrl on line 2.
| | 00:32 |
Both divs have an ng-include directive.
This is set to the airportTemplate scope variable.
| | 00:38 |
Let's have a look at where the
airportTemplate scope variable is being set.
| | 00:42 |
Go to js > controllers, and then app.js.
The airportTemplate scope variable is
| | 00:48 |
being set online too.
It's being set to partials/airport.html.
| | 00:53 |
This is the existing partial that we used
previously.
| | 00:56 |
Now, let's take a look at how
two_airports.html is being linked.
| | 01:00 |
Go to js/app.js, lines 12 through 14
define a new route.
| | 01:06 |
The first argument is a route that has
airport1 and airport2 as two separate variables.
| | 01:12 |
Then the second argument is an object.
The object has a templateUrl set to partials/two_airports.html.
| | 01:17 |
Now, let's go back to two_airports.html.
There's Airport1Ctrl and Airport2Ctrl.
| | 01:25 |
Airport1Ctrl looks up the airport that's
set as airport1.
| | 01:30 |
It's pulling this code from the
routeParams.
| | 01:33 |
Once it gets this airport code, it then
looks up the airport in the airport scope
| | 01:38 |
variable, then it sets that airport as the
current Airport.
| | 01:41 |
Now, airport2.js is almost identical.
The only differences are that we're
| | 01:47 |
pulling airport2 instead of airport1 and
that the name of the controller is Airport2Ctrl.
| | 01:53 |
Finally, index.html has the two new
scripts tags added.
| | 01:57 |
Now, two_airports can be displayed on the
same page.
| | 02:00 |
| | Collapse this transcript |
|
|
4. Server-Side IntegrationDefining services| 00:00 |
Most of the time, the data powering in
application will still be on the server,
| | 00:04 |
even if all of the rest of the application
is written in browser side Angular code.
| | 00:09 |
Angular provides a module to help connect
server side resources to front end code.
| | 00:13 |
The server is already running, so let's
copy the exercise files over.
| | 00:17 |
Go to chapter four, video one, start, and
then copy the public folder.
| | 00:22 |
Then go into the server folder, and paste
it in.
| | 00:26 |
Now let's open up the browser.
I'm going to go to local host at port
| | 00:30 |
3000, and then I'm going to go to slash
airports.
| | 00:33 |
Notice that I don't have a hash symbol in
the URL.
| | 00:36 |
This will ensure that we go to the slash
airports route that's defined in the
| | 00:40 |
server, and that this request will not go
to Angular.
| | 00:43 |
The route airports on the server, is
returning airport data in JSON format.
| | 00:48 |
We can configure Angular to read the data
from this route, instead of having to hard
| | 00:52 |
code it into our controllers.
Lets do that now.
| | 00:55 |
I am opening the Public folder in Sublime
Text.
| | 00:58 |
First, lets go to our existing controller.
Go to Controllers and app.js.
| | 01:04 |
Right now, we have all of our airport data
hard coded into this controller.
| | 01:08 |
Lets start by removing all this data.
Select everything from line ten to line
| | 01:13 |
38, and just remove it.
Next, we're going to create a new file
| | 01:17 |
called services.js.
Create it in the js folder.
| | 01:22 |
In this file, we're going to create an
Angular module.
| | 01:25 |
We already have an Angular module that's
driving our application in app.js.
| | 01:30 |
Start by typing angular.module.
The name of the module is going to be airlineServices.
| | 01:36 |
We have one dependency for this module,
its called ng-resource, ng-resource is the
| | 01:43 |
extra that we downloaded at the beginning
of the course.
| | 01:45 |
Now we are going to define the service for
the airports.
| | 01:48 |
To do this, we are going to call the
factory method.
| | 01:51 |
The factory method is going to allow us to
define an object in Angular that can be
| | 01:55 |
used over and over again.
The name of our object is going to be
| | 01:59 |
named Airport with a capital A and then
the second argument for factory is going
| | 02:03 |
to be a function.
Where we define the resource and then we return.
| | 02:06 |
We then can use dependency injection here
to get the resource object.
| | 02:11 |
I'm going to do this by typing in dollar
sign resource.
| | 02:14 |
And then finally, let's return the defined
resource object.
| | 02:17 |
Dollar sign resource allows us to create a
new service.
| | 02:21 |
The argument that dollar sign resource
takes is the route to the service.
| | 02:25 |
In this case, we've defined airports as
our route.
| | 02:28 |
Now, let's go the Destinations controller.
Go to Controllers > Destinations JS.
| | 02:34 |
First, let's modify the Destinations
controller to bring in the airport
| | 02:37 |
resource we just defined.
Go back up to the Function definition.
| | 02:40 |
And then add another argument.
This argument will be airport.
| | 02:45 |
Angular will see this and automatically
pull it into our controller.
| | 02:48 |
Next, after line nine add some space.
We are now going to set the airport scope variable.
| | 02:53 |
To do this, we're going to call
airport.query.
| | 02:57 |
This method will go to the server, get all
the data and then return it.
| | 03:02 |
There are couple more things we need to do
to finish hooking this up.
| | 03:05 |
First, go to JS, app.js.
Previously, we didn't have any
| | 03:09 |
dependencies for this module.
But now, we've define the airline services
| | 03:13 |
module and we would like to use it here.
So in the second argument, on line one,
| | 03:18 |
add airline services.
This will make it possible for Angular to
| | 03:21 |
find the airport object and supply it in
the destinations controller.
| | 03:26 |
Finally, lets go to index.html.
We need to add our services file here, so
| | 03:30 |
that the JavaScript gets loaded.
Copy line ten, make a space and then paste.
| | 03:36 |
Now change app.js to services.js.
Finally, we can go to the browser and see
| | 03:42 |
this in action.
Now, just go to local host at port 3000.
| | 03:46 |
At the moment our data doesn't appear,
this is because we need to make one more
| | 03:50 |
change to index.html from the js/lib
folder.
| | 03:54 |
We need to include the Angular resource
file.
| | 03:58 |
This is the code that powers the resource
that we just defined.
| | 04:01 |
Copy line four and then paste on line
five, then change the file name to angular-resource.min.js.
| | 04:09 |
Now, go back to the browser and hit
Refresh.
| | 04:12 |
Now, all the airports are appearing.
The resource module provided by the
| | 04:16 |
Angular project makes it possible to
connect an application to a service side
| | 04:20 |
data store.
defining these resources as modules makes
| | 04:23 |
them available throughout the application
| | 04:26 |
| | Collapse this transcript |
| Retrieving individual records| 00:00 |
Sometimes, the application needs to fetch
a single record from the server.
| | 00:04 |
An existing AngulAir resource could be
modified to do this.
| | 00:07 |
I already have the server running.
So I'm going to copy in the Exercise Files.
| | 00:11 |
Go to Chapter 4 > Video 2 > start, and
then copy the public folder.
| | 00:15 |
Then go to the server folder, and paste in
the public folder.
| | 00:19 |
Now, I'm going to load up the site in the
browser.
| | 00:21 |
Go to localhost:port3000.
When I get there, all of the destinations
| | 00:26 |
are displaying.
However, if I click on one of the
| | 00:29 |
destinations, it doesn't appear.
This is because the current code is still
| | 00:33 |
looking for the airport data in the
controller.
| | 00:35 |
Let's modify this code so it goes to the
server.
| | 00:38 |
First, let's take a look at where this
data can be found.
| | 00:41 |
If you go to /airports and then /ATL,
it'll pull up the information for Atlanta airport.
| | 00:49 |
We can modify our code to use this pattern
to pull up airport data.
| | 00:52 |
First, let's modify our service.
Go to js/services.js.
| | 00:58 |
The first thing we'll do is modify this
pattern, add a / and a : and then airport code.
| | 01:05 |
The resource format here is flexible, if
the airport code is specified, it will use
| | 01:10 |
the full format displayed here, if the
airport code is not specified, it will
| | 01:14 |
simply pull airports.
Next, let's update our controllers.
| | 01:17 |
First, go to controllers airport.js this
code is currently referencing
| | 01:23 |
scope.airports directly.
Let's modify this so that it uses the
| | 01:27 |
airport resource instead.
First, on line 1, let's add airport as a dependency.
| | 01:33 |
Next, let's use a method of the airport
object to retrieve the record.
| | 01:36 |
Replace scope.airports with airport.get
and then replace the brackets with
| | 01:42 |
parentheses finally enclose airportCode in
an object.
| | 01:46 |
The airportCode property here matches up
to the airportCode route variable here.
| | 01:52 |
We also need to update this code in the
destinations controller.
| | 01:55 |
Go to line 8, and then set current Airport
to Airport.get than pass an object into
| | 02:02 |
Airport.get, set the airportCode property
to code.
| | 02:06 |
Now, let's lets go back to the browser.
Go to localhost:port3000, and now, all the
| | 02:11 |
destinations appear again.
Now, start clicking on the destinations in
| | 02:15 |
each case, clicking on an airport will
load the airport information along with
| | 02:19 |
all the destinations.
And then, when you click on one of the
| | 02:22 |
destinations, it takes you to that
airport's page.
| | 02:25 |
From this page, you can move on to another
destination.
| | 02:28 |
AngulAir resources can pull, not only
collections of data, but also individual
| | 02:32 |
records, for selecting individual records
can be passed through the get method.
| | 02:38 |
| | Collapse this transcript |
| Searching through models| 00:00 |
Displaying an entire collection of data at
once, can be overwhelming.
| | 00:03 |
Let's take a look at how resources and
models can work together to provide a
| | 00:07 |
search feature.
The server is already running, so I'm
| | 00:10 |
going to copy in the exercise files, go to
chapter four, video three, Start and then
| | 00:15 |
Copy public, then Paste it into the
server.
| | 00:19 |
Now let's go to the browser.
I'm going to go to localhost:3000/flights.
| | 00:24 |
Notice that there is no hash in the URL,
this is because we're going to go directly
| | 00:29 |
to the server and not through Angular.
This service is returning all the flights
| | 00:34 |
that are available in the system.
There are quite a few flights available
| | 00:38 |
through this service.
Sorting through all this, would be
| | 00:40 |
overwhelming for our users.
Let's add the screen, where all the flight
| | 00:44 |
information is displayed, but add some
filters, that users can get exactly what
| | 00:48 |
they want.
Let's edit the code.
| | 00:50 |
First, let's add a new resource for the
flight's data.
| | 00:53 |
Go to js, and services.js.
We're going to add another call to factory
| | 00:58 |
here, just like we have a call for
airport.
| | 01:01 |
Type in dot factory, and the past flights
as the first parameter.
| | 01:05 |
With the second parameter, pass in a
function, Just like the airports resource,
| | 01:10 |
let's define the dependency that we want
Angular to fulfill.
| | 01:13 |
Finally, let''s return the resource as we
define it.
| | 01:17 |
This time we're going to use flights as
the route.
| | 01:20 |
Next, let's open of the flights
controller.
| | 01:22 |
Go to js/controllers flight.js.
First, let's add the flights resource that
| | 01:28 |
we just defined.
Next, let's set the flights scope variable.
| | 01:32 |
Remove scope.airports and replace it with
flights.
| | 01:36 |
Now, set the flights scope variable to
Flights.query.
| | 01:39 |
Now let's go to the router.
Go to JS/app.js.
| | 01:44 |
At the moment, the template is defined as
markup.
| | 01:47 |
Let's change this to a URL.
There's a new partial that's been added in
| | 01:50 |
the Partials folder.
Type in partials/flights.html.
| | 01:56 |
Now, let's take a look at that partial.
At the top of this file, we have two inputs.
| | 02:01 |
One for the Origin and one for the
Destination.
| | 02:03 |
These inputs are being bound to the scope
through ng model.
| | 02:07 |
We have a search object in the scope, and
then Origin and Destination properties.
| | 02:12 |
Down on line 18, we're beginning an ng
repeat directive.
| | 02:17 |
This is cycling over all of the flights in
the scope object.
| | 02:21 |
We're also passing these flights in
through a filter.
| | 02:24 |
This filter is bound to the search object.
This object is the same search object that
| | 02:29 |
we have bound through ng model in the
inputs.
| | 02:32 |
Binding this search object to the filter
and to the model, allows us to filter the
| | 02:37 |
objects as they go through ng repeat.
Only the objects with properties that
| | 02:42 |
match Origin and Destination will be
displayed.
| | 02:45 |
Now, let's go to the browser and load
this, go to local host at port 3000, then
| | 02:51 |
choose flights, currently every flight
available is being displayed.
| | 02:55 |
This is quite a bit of information so
let's filter it down.
| | 02:58 |
In capital letters type ATL.
If we just want the LA flight, type in LAX.
| | 03:05 |
You'll notice that the filter works as we
type.
| | 03:08 |
Searching a collection of data on the
client side is possible through models,
| | 03:11 |
and filters.
Use ng model to bind inputs to object
| | 03:15 |
variables, then use a filter once cycling
over records.
| | 03:18 |
| | Collapse this transcript |
| Saving form data| 00:00 |
Angular's resources not only retrieve
data, they also save it back to the server
| | 00:04 |
through a post requests.
Lets create a system that saves and
| | 00:07 |
displays reservations.
The server is already running, so I'm
| | 00:11 |
going to copy the exercise files over, I'm
going to chapter 4, video 4, start, then
| | 00:16 |
I'm copying the pubic folder into the
server.
| | 00:20 |
Now let's go to the browser.
Go to localhost:3000/reservations.
| | 00:26 |
The reservation service from the server,
currently just shows an empty array.
| | 00:30 |
That's because no reservations have been
made yet.
| | 00:33 |
This route also accepts post requests, so
that reservations can be made.
| | 00:37 |
So let's modify our application to make
post requests.
| | 00:40 |
Let's edit the code.
First, let's go to js/services.js.
| | 00:45 |
Let's create a reservation service.
Copy everything from line 5 to line 7
| | 00:50 |
except for the semicolon and then paste it
on line 8.
| | 00:54 |
Instead of flights, let's name this
reservations.
| | 00:57 |
And then for the route, type reservations
instead of flights.
| | 01:01 |
Now save the file and lets go to our
routes.
| | 01:04 |
Currently we have slash reservations
pointing to a template, lets point it to a
| | 01:09 |
partial instead, now lets have a look at
the partial, on lines 4 and 5 we have two
| | 01:14 |
inputs, both of them are using ng-model.
ng-model is binding these inputs to the
| | 01:20 |
reserve object.
One input is bound to the origin property,
| | 01:24 |
and the other input is bound to the
destination property.
| | 01:27 |
Next on line 7, we have a link.
The link has an ng-click directive.
| | 01:32 |
This directive, executes the reserve
flight function.
| | 01:36 |
We'll need to add this function in a
moment.
| | 01:38 |
Next on line 11, we have a table, the
table has an ng-show directive, this
| | 01:43 |
ng-show directive is based on the length
property of the reservations array, if the
| | 01:48 |
length of the reservations array is 0 this
table will not show.
| | 01:52 |
If there are one or more reservations
available, there will be output here
| | 01:56 |
starting on line 20.
Finally on line 36, we're using the
| | 02:00 |
ng-hide directive.
The ng-hide directive works exactly the
| | 02:05 |
reverse of ng-show.
This message will only display when the
| | 02:09 |
length property of reservations is 0.
Otherwise, it will be hidden.
| | 02:13 |
Now let's update the controller to use the
reservations resource.
| | 02:17 |
Go to JS, controllers, reservations.js.
There are two things we want to update here.
| | 02:22 |
First, we need to get the existing
reservations from the service and then we
| | 02:27 |
need to provide a function that will save
reservations once they are made.
| | 02:31 |
First, lets apply this controller with the
reservations object we just defined.
| | 02:36 |
Next, let's set the reservations scope
variable.
| | 02:40 |
We'll set this variable by calling
Reservations.query().
| | 02:43 |
Finally, we need to create the
reserveFlight function.
| | 02:46 |
This is a function that's being called on
line seven of reservations.html.
| | 02:52 |
We want two things to happen as a part of
this save process.
| | 02:55 |
First, we want the record to save and then
we want to clear the forms so another
| | 02:59 |
reservation can be made.
To do this, call the save method of the
| | 03:03 |
reservation service, the first parameter
is an object of information that we
| | 03:08 |
want to save back to this server, in
reservations.html we have a reserve
| | 03:10 |
object, it has an origin and a destination
property.
| | 03:16 |
These are the only two properties that we
need to send back to the server.
| | 03:19 |
We can get both of these at once by simply
passing the reserve object.
| | 03:24 |
The second argument we pass, is a callback
function.
| | 03:27 |
This function executes when we get the
response back from the server.
| | 03:30 |
When the callback function is executed,
the data that's coming back from the
| | 03:35 |
server will be passed in.
First, let's reset the form.
| | 03:38 |
Since the reserve object is bound to two
of the inputs.
| | 03:41 |
Setting the origin and destination
properties to an empty string, will reset
| | 03:45 |
this form.
Finally, we want to update the display to
| | 03:48 |
reflect the new reservation.
This particular service from the server
| | 03:52 |
returns the data that was just passed
back.
| | 03:55 |
Since that data comes through the data
variable, we can push that into our
| | 03:59 |
Reservations array, type
scope.reservations, and then .push.
| | 04:04 |
Then pass the data into the push method.
This will add the reservation data to our
| | 04:09 |
Reservations array.
Now let's go back to the browser.
| | 04:12 |
Go to localhost at port 3000.
Then select the reservations option.
| | 04:17 |
You'll notice that it's giving us a
message saying, that we don't currently
| | 04:21 |
have any reservations.
That's because the length of the
| | 04:23 |
reservations array is currently zero.
Let's reserve a flight.
| | 04:27 |
After filling in the origin, and
destination, and clicking reserve.
| | 04:31 |
A post went back to the server.
Let's take a look at the reservation
| | 04:35 |
service to see this.
Remove the hash, and the slash from
| | 04:38 |
reservations, to see the reservation
service.
| | 04:42 |
You'll notice, it's now showing the flight
number, and flight information, for the
| | 04:45 |
reservation we made.
If we go back to the page, it still
| | 04:48 |
displays our reservation.
We can even close out the browser and
| | 04:52 |
reopen it and it will still be there.
Use resources to save data back to the server.
| | 04:57 |
Unlike using a traditional HTML form,
resource callbacks make it possible to
| | 05:02 |
update the screen without leaving the
page.
| | 05:04 |
| | Collapse this transcript |
| Challenge: Combining multiple data sources| 00:00 |
In this challenge, you'll combine data
from both the flights and reservations services.
| | 00:05 |
Your objectives for this challenge include
adding flight lookups to the reservations page.
| | 00:10 |
You'll also want to wait for an origin
before displaying lookups.
| | 00:13 |
Make sure someone is actually searching
for a flight before displaying this list.
| | 00:17 |
And then finally, only use the existing
services.
| | 00:20 |
This challenge should take about ten
minutes to complete.
| | 00:23 |
When you're done, make sure to check out
my solution video where I'll show how I
| | 00:27 |
combine searching and reserving into one
screen.
| | 00:29 |
| | Collapse this transcript |
| Solution: Combining multiple data sources| 00:00 |
So here's my solution to the challenge.
I'm at localhost:port3000, and now, I'm
| | 00:05 |
going to go the reservations page.
When I begin searching for a flight,
| | 00:09 |
options appear.
And just as before, I can reserve my flight.
| | 00:13 |
So let's take a look at how I did it.
First, go js > controllers > reservations.
| | 00:18 |
On line 1, I added the Flights resource.
This is the resource that we already
| | 00:22 |
defined for Flights.
Then, on line 5, I called flights.query,
| | 00:27 |
and set the scope variable Flights to the
result of that.
| | 00:30 |
This fetches all the flights from the
server.
| | 00:33 |
With that data ready to go, now we can go
to the partials.
| | 00:36 |
In reservations.html, I added a table
starting on line nine.
| | 00:40 |
This table has an ng-show directive.
It's set to reserve.origin.
| | 00:43 |
This ensures that someone has added an
origin to the form.
| | 00:49 |
If an origin has not yet been added to the
form, the table will not appear.
| | 00:52 |
Next, on line 19, we begin showing all the
flights.
| | 00:57 |
The ng repeat directive cycles over all
the flights.
| | 01:00 |
After the loop, we're filtering everything
through the reserve scope object.
| | 01:05 |
Only flights with matching properties will
be displayed.
| | 01:08 |
Finally, we're displaying the flight
information.
| | 01:10 |
Now users can search and reserve in one
step.
| | 01:14 |
| | Collapse this transcript |
|
|
ConclusionExploring advanced techniques| 00:00 |
Throughout this course, Angular has
provided a large vocabulary of filters and
| | 00:04 |
directives for our application..
However, Angular's vocabulary is designed
| | 00:08 |
to be extended with customized tools.
Throughout this application, there are a
| | 00:12 |
few instances where we're displaying the
titles of airports.
| | 00:16 |
Let's have a look at the code that's now
generating these titles.
| | 00:18 |
Go to partials reservations.html.
You'll notice there's now an originTitle
| | 00:24 |
filter as well as a destinationTitle
filter.
| | 00:27 |
Neither of these filters are ones that are
built into Angular.
| | 00:30 |
They're ones that I created.
Let's take a look at how they work.
| | 00:33 |
Go to JS/app.js.
On line 1, I added airlineFilters as a
| | 00:38 |
dependency of the airline project.
Then on line 20, I defined the
| | 00:43 |
airlineFilters module.
The airlineFilters module does not have
| | 00:46 |
any dependencies, however, it does define
two filters.
| | 00:50 |
We have one named originTitle and one
named destinationTitle.
| | 00:54 |
The second argument in each case is a
function that returns a function.
| | 00:58 |
Wrapping the functions this way gives us
an opportunity to do dependency injection
| | 01:02 |
if necessary.
Next, we are supplied with the input and
| | 01:06 |
then finally on lines 23 and 28 we're
returning the output that we want to display.
| | 01:11 |
With these filters in place we can use
them anywhere in our application, this way
| | 01:16 |
we don't have to clutter up the mark up
with redundant concatenation.
| | 01:19 |
It's also possible to create your own
directives.
| | 01:23 |
The AngularJS website has tutorials on how
to create your own directives.
| | 01:27 |
Angular's power expands well beyond the
functionality available in the core library.
| | 01:32 |
Extend Angular with your own filters,
modules and directives.
| | 01:36 |
| | Collapse this transcript |
| Finding Angular resources| 00:00 |
Now that you've seen the functionality
Angular has to offer, you can continue
| | 00:04 |
exploring with these resources.
First there is the Angular Seed Project.
| | 00:08 |
For the project we built, we did our own
boilerplate.
| | 00:12 |
Angular Seed is an example of another
boilerplate that's already available.
| | 00:15 |
Its a little bit more sophisticated than
the one we built, and has some scripts
| | 00:20 |
that can automate your development.
Next, there is AngularJS Batarang, the
| | 00:24 |
Batarang is an extension that you can add
to Google Chrome.
| | 00:28 |
It helps you debug AngularJS applications.
Lets take a look at it in action.
| | 00:36 |
I have our applications here and I am
going to pull up the console.
| | 00:38 |
There's now an AngularJS tab, check the
enable box, and now you can use the Batarang.
| | 00:42 |
The first tab is models, this shows you
all the scopes that are in the document.
| | 00:46 |
The scope lengths show you the data that's
set in each scope.
| | 00:50 |
There also tools for helping you debug the
performance and dependencies of your
| | 00:54 |
AngularJS Application.
Next, there's docs.angularjs.org.
| | 00:57 |
The documentation site has an API
reference, a tutorial and a developer guide.
| | 01:04 |
Finally, there's the AngularJS Google
Group.
| | 01:07 |
From here, you can follow the development
of Angular, as well as find other
| | 01:10 |
resources for getting answers to your
questions.
| | 01:13 |
Angular has a large community with many
resources ready for you to use.
| | 01:18 |
Whether your getting started or digging
deeper, use these tools to get the most
| | 01:21 |
out of Angular.
| | 01:26 |
| | Collapse this transcript |
|
|
