Professional Documents
Culture Documents
Angular Routes, Services and Scope
Angular Routes, Services and Scope
Note Wrangler
notes-index.html
users-index.html
css
application.css
images
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
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
Note Wrangler
notes-index.html
users-index.html
css
javascript
templates
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>
<div class="note-wrapper">
<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>
users-index.html
notes-index.html
<div <div
class="main-wrapper">
class="main-wrapper">
<div class="note-wrapper">
<div class="users-wrapper">
<div class="note-content">
<h1>Users</h1>
<div class="notes-header">
<h1 title="Notes">Notes</h1>
</div><div class="users-wrapper">
<a class="card-users" ng-repeat="user in users">
<div class="card" title="{{user.name}}">
<div class="note-wrapper">
<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>
<p>{{note.description}}</p>
</div>
</div>
</a>
</div>
</div>
<!-- Load Js libs -->
<script src="./js/vendor/jquery.js"></script>
</div>
<script src="./js/vendor/angular.js"></script>
</div>
<script src="./js/vendor/angular-route.js"></script>
users-index.html
<div class="users-wrapper">
<div class="note-wrapper">
<h1>Users</h1>
<div class="note-content">
<div class="notes-header">
<div class="users-wrapper">
<h1 title="Notes">Notes</h1>
<a class="card-users" ng-repeat="user in users">
</div>
<div class="card" title="{{user.name}}">
<h2 class="h3">{{user.name}}</h2>
<div class="note-wrapper">
<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>
<p>{{note.description}}</p>
</div>
</div>
</a>
</div>
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.
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.
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
Unique content
removed
Add ng-app
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
javascript
_ 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
Using ngView
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
notes/index.html
users/index.html
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
angular.module('NoteWrangler')
.config(function($routeProvider){});
angular.module('NoteWrangler')
.config(function($routeProvider) {
$routeProvider.when('/notes', {
templateUrl: '/templates/pages/notes/index.html'
})
});
angular.module('NoteWrangler')
.config(function($routeProvider) {
$routeProvider.when('/notes', {
templateUrl: 'templates/pages/notes/index.html',
})
});
.when('/users', {
templateUrl: 'templates/pages/users/index.html',
})
Note Wrangler
index.html
css
templates
pages
notes
index.html
users
index.html
angular.module('NoteWrangler')
.config(function($routeProvider) {
$routeProvider.when('/notes', {
templateUrl: 'templates/pages/notes/index.html',
})
...
.when('/', {
templateUrl: 'templates/pages/notes/index.html',
})
});
angular.module('NoteWrangler')
.config(function($routeProvider) {
$routeProvider.when('/notes', {
templateUrl: 'templates/pages/notes/index.html',
})
...
.when('/', {
templateUrl: 'templates/pages/notes/index.html',
})
.otherwise({ redirectTo: '/' });
});
.otherwise(params);
Sets route denition that will be used on route change when no other route denition is matched.
Brackets
Node
Ruby on Rails
and so many more