Welcome to AngularJS.
In this learning activity, you'll explore the AngularJS framework
and learn how it's used to architect and
organize code when building web applications.
Back-in-the-day, programmers
used many different approaches to build
rich, client-side web applications.
These approaches ranged from writing all of the
code from scratch to relying on popular
libraries like jQuery.
More often than not, this resulted in messy and
unorganized code.
AngularJS brings order
to the old-school chaos by using
specific building blocks - each designed
for a particular aspect of creating an
application.
Overall, AngularJS is a much
more elegant and civilized way of
building JavaScript applications.
Regardless of the size and the number of
pages in your application,
your browser is only going to load a
single page.
And the content on that page can change.
AngularJS handles content changes quickly and efficiently.
AngularJS is a client-side technology
written entirely in JavaScript.
It works with long-established web technologies
including HTML, CSS, and JavaScript.
The framework architecture is the model view controller MVC.
Developing applications
using MVC enables you to take advantage
of Angular's features and avoid having
to code all the details of everything
you want to accomplish on your page.
In addition, MVC separates the application
logic from the data modules and the views.
In this framework, "model" is the data.
This is the information from
internal data structures, external json
documents, or even databases.
"Views" are how the data is displayed to the user,
which is usually done with a template.
And finally, "controllers" are the glue
that ties the model or data to the view or template.
Controllers are also written in JavaScript.
Some core features of AngularJS include
directives, which are constructs that
teach the browser the new HTML syntax
created by AngularJS.
This allows you to add functionality to a page by creating
custom HTML elements and attributes.
Additionally, it declares directives by
placing a function within the HTML as an
element, attribute, class, or comment.
AngularJS also uses two-way data binding,
which is an automatic synchronization of
data between model and view components.
Changes made to the model are
immediately reflected in the view
without manipulating the Dom.
In addition, changes made to the view are reflected
in the model.
Filters format the view of an expression
to display it correctly for the user.
Finally, AngularJS uses
modules or containers for different
parts of an app including controllers,
services, filters, and directives, which configure the injector.
Advanced features
include using templates to change the page data.
These are integrated into the
HTML and bind the data directly to the
template so pulling in the data, or
interacting with the elements lets you
populate your HTML.
AngularJS also expands functionality by updating the HTML.
Whereas Jquery and JS just manipulate the Dom.
Finally, AngularJS provides for easier external data manipulation
by including Ajax functionality.
With an understanding of
what AngularJS is and how it works,
let's take a closer look at two of its
main features - Directives and Templates.
AngularJS uses directives within HTML to
run a piece of JavaScript code by adding
a directive to an opening tag.
For example the directive ng-controller uses
ng for angular.
Let's look at an example of writing the directive
and what the JavaScript code looks like when you run that directive.
The angular directive
ng-controller is added to the HTML body tag
as an attribute that runs
the function named message controller in the javascript file.
The ng-controller in the HTML body tag
activates this message controller and
the code within the message controller function executes.
Notice, that when a directive is written in a document,
we type it as ng-controller as opposed to
writing it in code where we use ng hyphen controller.
To go any further, we need to take a
brief look at how templates and
directives work together within the HTML
to display data to the user.
Templates are a combination of HTML, CSS, and Angular directives.
The Angular directives within the HTML and possibly
within CSS render a dynamic view of the
information from the model and controller.
Templates can be a portion of
code within an entire HTML file, such as
an index.html file or they can also be a
partial, which is a portion of HTML code
in an external file that will be
dynamically inserted into the whole HTML file.
Let's look at an example of a template.
In this example, the ng-app
directive has been added to the HTML tag
to initialize the angular app,
letting the JavaScript code know to use the main app module.
Ng-app signifies the root of the Angular App.
The angular template in
this example, is within the rectangle area.
The ng-controller, message controller,
has been given an alias of MC.
The scope of the message controller is
the div element its associated with and
all its nested elements.
MC dot message is an example of an Angular expression.
This is where the information from the model and controller renders.
In addition to templates, AngularJS provides built-in
directives that allows each create your own directives.
Let's look at a few built-in directives, to see how they work.
Returning to the expression MC dot message
from our last example, we see a minor
problem with writing this expression using the curly brackets.
When the page renders in the browser, we'll get a flash
of the expression code, MC dot message, in the browser window.
To get around this, we'll use the built-in ng bind directive.
Our template code is written as this:
Now, let's check out the ng-model directive.
This binds the view to the model, which
allows the user to enter content into a
text box and dynamically update the
model and display the input in the view.
This is referred to as a two-way data binding.
In this example, ng model, has been added to the
input tag and binds with the - this dot name -
in the message controller function.
As data is updated in the model, it displays
in the expression - MC dot name.
The last built-in directive we'll look at is the ng-repeat.
This extends iterating functionality to the HTML element.
Let's say you have a list of data you want to
dynamically display on the webpage.
In the opening HTML item list tag LI, you
can add the ng-repeat, such as ng-repeat
equals - character in characters.
You then add the content and expressions to set
up the template between the opening and closing LI tags.
When ng-repeat executes, it runs through the collection of data
and instantiates the template for each item in the collection.
In this example, ng hyphen repeat equals character in MC
dot characters is similar to java script for in loop
that is for character in characters loop.
This dot characters is the
collection of data coated in JSON that
ng hyphen repeat accesses.
Please note that only a sample of the data in the
collection is displaying in this image.
Ng repeat loops through all of the items
in the characters data source.
Now that we have some understanding of
built-in directives and how they're coded within the template,
let's look at a little program to tie this all together.
This program accepts search
words based on the name from the user
and returns the search results.
In addition to the AngularJS we have
already discussed, it also uses an Angular filter.
Let's take a look at this small program.
Ng-app is the root of the Angular app.
Since it's in the opening HTML tag, it applies to all elements.
Ng-controller has been applied to the first opening div tag.
The scope of the message controller spans all elements contained within this div.
Message controller has been given an alias using the as keyword.
This allows us to use MC as a shortcut when referring to the message controller.
Ng-repeat has been added to the opening li tag, indicating
what data source it will target and loop through.
An Angular filter has been added
to ng-repeat to allow search on the name
field the LI element has been coded as a
template containing content and angular
expressions and input was added with ng
hyphen model to allow input and linked
to name in the data for the query.
This small program demonstrated the use of a
few Angular built-in directives and templates.
In this learning activity, you were introduced to AngularJS.
You explored its framework and learned how it's used to
architect and organized code when building web applications.
You could also see in the real world
code examples how AngularJS is a much
easier way of building javascript applications.
You've completed AngularJS.