Angular Routes, Services and Scope

Routes
Wiring Together Views Section 1
Angular Note Wrangler
Starting With Static Pages

This was handed to us from our designer. All the pages are static.
Note Wrangler
notes-index.html
users-index.html
css
application.css
images
Organizing: Separate Directories for All

Separate controllers, services, lters, and directives into individual directories.
templates
Note Wrangler
notes-index.html
users-index.html
css
javascript
app.js
Note Wrangler
notes-index.html
users-index.html
css
javascript
app.js
controllers.js
lters.js
services.js
directives.js
controllers
lters
services
directives
templates
Organizing: Separate Files for All

Inside the controllers directory we will have a le for each controller.
Note Wrangler
notes-index.html
users-index.html
css
javascript
app.js
K e e p t h in g s
e n c a p s u la t e d a n d b it e -s
iz e
controllers
notes-create-controller.js
notes-edit-controller.js
notes-index-controller.js
notes-show-controller.js
lters
services
directives
templates
Back to Our Designers Static Files

Both of these static les have boilerplate code that is exactly the same.
Note Wrangler
notes-index.html
users-index.html
css
javascript
templates
Both are fully fleshed out files with

much redundancy <html>...</html>
notes-index.html
Duplicated code in both

users-index.html and notes-index.html
<!DOCTYPE html>
<html lang="en" ng-app="NoteWrangler">
<head>
<meta charset="utf-8">
<title>Note Wrangler</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/application.css" />
</head>
<body>
<div class="nav-wrapper has-dropdown">
<div class="nav-content">
<div class="wrapper">
<div class="nav-content-layout">
<div class="nav-list">
<a href="#/"
class="list-item"
notes-index.html
<div class="main-wrapper">
<div class="note-wrapper">
<div class="note-content">
<div class="notes-header">
<h1 title="Notes">Notes</h1>
</div>
<a class="card-notes" ng-repeat="note in notes">
<div class="card" title="{{note.title}}">
<h2 class="h3">{{note.title}}</h2>
<p>{{note.description}}</p>
</div>
</a>
</div>
</div>
</div>
</div>
Unique chunk inside

the main-wrapper div
users-index.html
notes-index.html
<div <div
class="main-wrapper">
class="main-wrapper">
<div class="users-wrapper">
<h1>Users</h1>
</div><div class="users-wrapper">
<a class="card-users" ng-repeat="user in users">
<div class="card" title="{{user.name}}">
<h2 class="h3">{{user.name}}</h2>
<a class="card-notes"
ng-repeat="note in notes">
<p>{{user.bio}}</p>
</div>
<div class="card"
title="{{note.title}}">
</a>
<h2
class="h3">{{note.title}}</h2>
Unique chunk inside
</div>
</div>
</div>
</a>
</div>
the main-wrapper div
unique chunk inside

the main-wrapper
</div>

<script src="./js/vendor/jquery.js"></script>
</div>
<script src="./js/vendor/angular.js"></script>
</div>
<script src="./js/vendor/angular-route.js"></script>
a Unique HTML Gets Its Own Template File

notes-index.html
users-index.html
<h1>Users</h1>
<a class="card-users" ng-repeat="user in users">
</div>
<div class="card" title="{{user.name}}">
<h2 class="h3">{{user.name}}</h2>
<p>{{user.bio}}</p>
<a class="card-notes" ng-repeat="note in notes">
</div>
</a>
<div class="card" title="{{note.title}}">
</div>
<h2 class="h3">{{note.title}}</h2>
</div>
</div>
</a>
</div>
a Moving Templates Into Their Own Folder

We will place our static les into our templates/pages directory.
Note Wrangler
index.html
css
templates
pages
notes
notes-index.html
users
users-index.html
notes-index.html
k<div
class="note-wrapper"> ...
users-index.html
<divindex.html
class="users-wrapper">...
We can eliminate the duplication and remove the prex on our les.
a Moving Templates Into Their Own Folder

We will place our static les into our templates/pages directory.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
notes-index.html
notes/index.html
k<div
class="note-wrapper"> ...
users/index.html
users-index.html
users/index.html
<divindex.html
class="users-wrapper">...
We can eliminate the duplication and remove the prex on our les.
Creating the Main Index File

This is the rst le that will load up our Angular app.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
Unique content
removed
Add ng-app

<head>...</head>
<body>
<a href="#/notes"> Notes </a>
<a href="#/users"> Users </a>
</div>
<div class="hero-wrapper"> ... </div>
</div>
<script src="/js/vendor/jquery.js"></script>
...
Current State of Our App
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
Current State of Our App
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
a The Notes URL Should Load Notes

If the route is http://example.com/#/notes, we want index.html to load the notes/index.html.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
Missin g Note List

How do we include templates?
_ Dening a Route
Angular routes allow us to map URLs to use templates so that every time the current route changes,
the included view changes with it.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
routes.js
http://example.com/#/notes
rout es.js fetc hes and load s note s/ind ex.ht ml
Four Steps to Route Happiness

a
Using ngView
Loading the ngRoute library
Importing ngRoute module
Dening routes
a Using ngView
This allows us to tell our Angular app where to load in templates that we will wire together shortly.
index.html

<head>...</head>
<body>
<a href="#/notes"> Notes </a>
<a href="#/users"> Users </a>
</div>
<div ng-view></div>
</div>
notes/index.html
users/index.html
_ Loading the ngRoute Library

In order to slim the Angular core down, they put routing in a separate module. So you need to
explicitly import ngRoute in your application.
index.html

<div ng-view></div>
</div>
<script src="/js/vendor/angular-route.js"></script>
_ Including ngRoute in Our App

We need to include ngRoute in our main application module so our whole app will have access to
this service.
app.js
angular.module("NoteWrangler", ['ngRoute'])
Now we can create a routes.js le!
routes.js
angular.module('NoteWrangler')
.config(function($routeProvider){});
Well use $routeProvider in a minute to specify Routes.
_ Creating routes.js
Why arent we doing it the way we learned in Shaping up with Angular.js?
Setting your app module to a variable and reusing that variable is bad practice.
routes.js
.config(function($routeProvider){});
Re-declare your application module in every new file
_ Dening Routes With $routeProvider

Inside module.cong we can use one of $routeProviders methods to dene routes.
.when(path, route);
Adds a new route denition to the $route service.
.otherwise(params);
Sets route denition that will be used on route change when no other route denition is matched.
_ Declaring Our First Route

Lets go ahead and dene a route for /notes to load in the notes/index.html using
$routeProviders .when() method.
routes.js
.config(function($routeProvider) {
$routeProvider.when('/notes', {
templateUrl: '/templates/pages/notes/index.html'
})
});
Notes Route Now Loads In
_ Adding the Users Route

routes.js
templateUrl: 'templates/pages/notes/index.html',
})
});
.when('/users', {
templateUrl: 'templates/pages/users/index.html',
})
Notice the method chaining
Users Route Now Loads In

users/index.html
<div class="users-wrapper"> ...
_ Dening the Root Route

If the route is http://example.com/ though, we want index to load in the notes/index.html by default.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
Missin g Notes List!
_ Options for Loading In Notes for Root Route

routes.js
})
...
.when('/', {
})
});
_ Setting a Catch-all Route

routes.js
})
...
.when('/', {
})
.otherwise({ redirectTo: '/' });
});
.otherwise(params);
Sets route denition that will be used on route change when no other route denition is matched.
Templates Are Now Wired Up
Serving Up Our Application
Brackets
Node
Ruby on Rails
and so many more

Angular Routes, Services and Scope

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Angular Routes, Services and Scope

Transféré par

Droits d'auteur :

Formats disponibles

Routes

Wiring Together Views Section 1

Angular Note Wrangler

Starting With Static Pages

Organizing: Separate Directories for All

Organizing: Separate Files for All

Back to Our Designers Static Files

Both are fully fleshed out files with

Duplicated code in both

Unique chunk inside

the main-wrapper div

unique chunk inside

a Unique HTML Gets Its Own Template File

a Moving Templates Into Their Own Folder

a Moving Templates Into Their Own Folder

Creating the Main Index File

<html lang="en" ng-app="NoteWrangler">

Current State of Our App

Current State of Our App

a The Notes URL Should Load Notes

Missin g Note List

rout es.js fetc hes and load s note s/ind ex.ht ml

Four Steps to Route Happiness

Loading the ngRoute library

Importing ngRoute module

<html lang="en" ng-app="NoteWrangler">

_ Loading the ngRoute Library

<div class="hero-wrapper"> ... </div>

_ Including ngRoute in Our App

Re-declare your application module in every new file

_ Dening Routes With $routeProvider

_ Declaring Our First Route

Notes Route Now Loads In

_ Adding the Users Route

Notice the method chaining

Users Route Now Loads In

_ Dening the Root Route

Missin g Notes List!

_ Options for Loading In Notes for Root Route

_ Setting a Catch-all Route

Templates Are Now Wired Up

Serving Up Our Application

Vous aimerez peut-être aussi