The document provides an overview of AngularJS, highlighting essential resources, components, and functionalities necessary for web development. It outlines key concepts like controllers, directives, services, and routing, along with a structured approach to implement them. Additionally, it suggests specific examples and resources for learning and using AngularJS effectively.

1. MAPS & ANGULAR
Presented by: Kathryn Merlihan

2. 1. Pluralsite.com – Great tutorials found here.
2. Angularjs.org – Angular’s home. Lots of documentation here.
3. Builtwith.angularjs.org – pics and links to other public websites that
have been built with Angular JS. Ideas. Inspiration.
4. Plunkr.co – Complete web development environment hosted in
your browser (Built with Angular). Pretty awesome for rapid
development.
Angular Resources

3. Angular Dependencies
➔ None!
All you have to do to be up and running with Angular
is:
1. Add a <script> tag pointing to angular.js
2. Add an ng-app attribute in your HTML
• ng-app is an angular directive (Initiates the app)
• The ng is short for Angular.

4. Super High Level Angular Overview
Angular is made up of a bunch of different
components that make it cool. Here are a few that I
used in the NAN map:
1. Controllers
2. Directives and Views
3. Services
4. Routing

5. Super High Level of NAN Map Structure
Map
Controller & View
Listing
Controller & View
Filters
Controller
& View
Data Service
Router

6. Controllers
Controllers are functions that take control of a section
of our HTML which Angular invokes.
We use ng-controller as an attribute in our HTML to
reference the function.
EXAMPLE

7. Controller/View/Model Example
Model – data attached to scope
View – Where the data is viewed on the page
{{message}}
Controller – controls the
manipulation of data

8. ➔ Primary responsibility is to set up the model on our
scope object
➔ Angular passes scope onto the controller function
➔ The controller manipulates that scope.
Controllers Capabilities

9. At a high level, directives are markers on a DOM
element (such as an attribute, element name,
comment or CSS class) that tell AngularJS's HTML
compiler ($compile) to attach a specified behavior to
that DOM element or even transform the DOM
element and its children.
Directives & Views

10. Some Angular Directives

11. A component which provides a specific service and
does a specific job.
It’s purpose is to keep complexity out of the controller.
Easy reuse throughout the application.
Ex. The Data Service for NAN
Services

12. Services
Controller View
Model
Directives
Service
Services never directly interact with the view but can
provide logic to directives, models and controllers.

13. Routing allows you to use multiple views in your
application.
➔ Multiple screens (different views)
➔ Back button functionality (use of #)
➔ Depends on another module – angular-route.js
➔ Does not come with Angular.
Routing

14. Route Example

15. ➔ To the Code!
➔ 101011101101101100110110
Code Time