I'm trying to implement an answer on another StackOverflow question, using a link in the header to redirect Index.html's ng-view.
When loading pages directly via: http://server/#/page the app works without issue (no console errors, page renders correctly, angular/js logic runs correctly). My routing logic returns 'undefined' when I step through the logic (into the angular library), delivering me to http://server/# which is a great page of nothingness, except the header and footer render correctly.
I'm not sure what I'm doing incorrectly.
I'm going to be selective as to what I include code wise (just to keep this at a reasonable length) but if I left something important out, don't hesitate to request it.
Index.html:
<!DOCTYPE html>
<html ng-app="passwordResetApp">
<head>
<title>COP Azure B2B Password Reset</title>
<meta charset="utf-8"/>
<!--Lib-->
<!--ng base-->
<script src="app/lib.bower/angular/angular.js"></script>
<script src="app/lib.bower/angular-route/angular-route.js"></script>
<!--ui grid-->
<script src="app/lib.bower/angular-ui-grid/ui-grid.min.js"></script>
<link href="app/lib.bower/angular-ui-grid/ui-grid.min.css" rel="stylesheet"/>
<!--Misc-->
<link rel="stylesheet" href="app/lib.bower/bootstrap/dist/css/bootstrap.min.css" />
<!--Custom-->
<script src="app/app.js"></script>
<!--Custom - Services-->
<script src="app/services/resetRequestService.js"></script>
<script src="app/services/adValidationService.js"></script>
<!--Custom - Controllers-->
<script src="app/controllers/HeaderController.js"></script>
<script src="app/controllers/PasswordResetRequestController.js"></script>
<!--Custom modules-->
<script src="app/modules/header.js"></script>
<!--Custom - Other-->
<link rel="stylesheet" href="app/css/passwordReset.css"/>
</head>
<body ng-app>
<div class="container">
<!--<div ng-include="'app/views/_header.html'"></div>-->
<div header></div>
<div class="viewWrapper">
<div ng-view></div>
</div>
<div class="push"></div>
</div>
<div ng-include="'app/views/_footer.html'"></div>
</body>
</html>
app.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp', ['ngRoute']);
app
.config(
function($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/passwordReset.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).when('userSearch', {
templateUrl: 'app/views/userSearch.html',
controller: 'ResetRequestController as vm',
caseInsensitiveMatch: true
}).otherwise({ redirectTo: '/' });
}
);
app.directive('header',
function() {
return {
restrict: 'A',
//This menas that it will be used as an attribute and NOT as an element. I don't like creating custom HTML elements
replace: true,
templateUrl: 'app/views/_header.html',
controller: 'HeaderController as vm',
caseInsensitiveMatch: true
}
});
app.run([
'$route', '$http', '$rootScope',
function ($route, $http, $rootScope) {
$http.defaults.withCredentials = true;
$rootScope.getUrlPath = function (url) {
return baseUrl + url;
};
}
]);
}());
_header.html:
<header id="pageHeader">
<div class="row">
<div class="col-sm-4 col-md-3 col-lg-2 cop-logo-container">
<img id="cop-logo" src="app/img/ConocoPhillips_Logo.png" />
</div>
<div class="col-sm-4 col-md-6 col-lg-8">
<h2>Azure B2B Password Reset</h2>
{{vm.currentUser.name}}
</div>
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="pull-right" style="padding: 20px">
<div ng-if="vm.currentUser" id="headerUser">
<p>Welcome, <span class="username">{{vm.currentUser.name}}</span></p>
</div>
<div ng-if="!vm.currentUser">
<div class="btn btn-primary">Login</div>
</div>
</div>
</div>
</div>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<ul ng-if="vm.currentUser" class="nav navbar-nav">
<li>Home</li>
<li>Search Users</li>
<li>Logout</li>
</ul>
<ul ng-if="!vm.currentUser" class="nav navbar-nav">
<li>Home</li>
</ul>
</div>
</div>
</nav>
</header>
HeaderController.js:
(function() {
'use strict';
var app = angular.module('passwordResetApp');
var headerController = function ($scope, $location) {
var vm = this;
vm.currentUser = {};
vm.currentUser.name = 'caninc';
vm.changeView = function(view) {
$location.path(view);
}
};
app.controller('HeaderController', headerController);
}());
Issue is with <li>Home</li>
# so when clicked http://server/# not http://server/#/page
Related
I am learning how to employ UI-router in AngularJS, but I am not able to display the nested views.
Also, when I install UI-router using Bower, it is not working as it should. What could be the problem as I have to use CDN now.
Here is what I've done so far:
Index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="#">AngularUI router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui sref="about">About</a></li>
</ul>
</div>
</nav>
<div class="container">
<div ui-view></div>
</div>
</body>
</html>
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
})
.state('home.list', {
url: '/list',
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
})
.state('home.paragraph', {
url: '/paragraph',
template: 'Random Blah Blah Blah.'
})
});
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref=".list" class="btn btn-primary">list</a>
<a ui-sref=".paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>
First the used CDN was dead or not correct, so changed the CDN:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
Secondly, fixed the router states, for example:
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
I put the templateUrl and controller under swappable view called
'main'.
Thirdly, Changed your ui-view section as follows:
<div ui-view = "main"></div>
Please check the fixed code given below:
app.js
angular.module('routerApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/home',
views: {
'main': {
templateUrl: 'partial-home.html'
}
}
})
.state('list', {
url: '/list',
views: {
'main': {
templateUrl: 'partial-home-list.html',
controller: function($scope){
$scope.dogs = ['Bernese', 'Husky', 'Goldendoodle'];
}
}
}
})
.state('paragraph', {
url: '/paragraph',
views: {
'main': {
template: 'Random Blah Blah Blah.'
}
}
});
$urlRouterProvider.otherwise('/home');
});
index.html
<html ng-app="routerApp">
<head>
<title>Learning UI router</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" ui-sref="home">AngularUI router</a>
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</div>
</nav>
<div class="container">
<div ui-view = "main"></div>
</div>
</body>
</html>
partial-home.html
<div class="jumbotron text-center">
<h1>The Homey Page</h1>
<p>This page demonstrates <span class="text-danger">nested</span> views.</p>
<a ui-sref="list" class="btn btn-primary">list</a>
<a ui-sref="paragraph" class="btn btn-danger">Paragraph</a>
</div>
partial-home-list.html
<ul>
<li ng-repeat="dog in dogs">{{dog}}</li>
</ul>
I'm learning Angular JS and I'm got stuck when using ui-view.
I don't know ui-view or something else is trouble. But my navbar didn't appear.
Any help must be great!
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<!-- NAVIGATION -->
<div ui-view="navbar"></div>
<!-- MAIN CONTENT -->
<div class="container">
<div ui-view="content"></div>
</div>
</body>
</html>
app.js
(function() {
'use strict';
angular
.module('myApp', ['ui.router'])
.config(stateConfig);
stateConfig.$inject = ['$stateProvider'];
function stateConfig($stateProvider) {
$stateProvider.state('app', {
abstract: true,
views: {
'navbar#': {
templateUrl: 'navbar.html',
controller: 'NavbarController',
controllerAs: 'vm'
}
}
});
}
})();
navbar.html
<nav class="navbar navbar-inverse" role="navigation">
<ul class="nav navbar-nav">
<li><a ui-sref="home">Home</a></li>
<li><a ui-sref="about">About</a></li>
</ul>
</nav>
Help, please!
As Claies pointed out you need to have descendants states, so that only your parent abstract state would be activated. Please check the answer here
In the run config you have to initialize/activate the root url by calling $state.go('your.state.name') or you have to use ng-route's otherwise api to activate the initial state. Here I have used unnamed view for content in index.html
So I've set up ui-router and I had it working a few minutes ago, sort of, it would display the template with content loaded from another html file, but none of the links would work. Now nothing is working: the template shows up but the content is not pulled in and none of the links work.
Ctrl.js
var site = angular.module('site', ['ui.router']);
site.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('page', {
url: '/page',
templateUrl: 'page.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html',
});
$urlRouterProvider.otherwise('/page');
})
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
<script src="scripts/ctrl.js"></script>
<link rel="stylesheet" href="style/main.css">
</head>
<body ng-app="site">
<nav class="navbar navbar-default navbar-fixed-top" id="navigate">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navSmall">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navSmall">
<ul class="nav navbar-nav navbar-right">
<li>about</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron text-center container-fluid">
<div ui-view></div>
</div>
<footer class="footer">
<div id="note" class="container">
<div class="row">
<div class="col-sm-8">
-----Footer Content-----
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</footer>
</body>
</html>
About.html (should be loaded but it's not)
<div ui-view="about">
<div class="container-fluid bg-about">
<div class="container-content">
<div class="row">
</div>
</div>
</div>
</div>
Wow you all are fast! Thanks for the suggestions. So update: changing it to ahref="#/about" helped in that I can now go to the link but still no content displays. There is a console error:
Error: Access to restricted URI denied
fg/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:103:167
n#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:98:460
m/g<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:95:489
e/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:130:409
uf/this.$get</m.prototype.$eval#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:103
uf/this.$get</m.prototype.$digest#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:142:165
uf/this.$get</m.prototype.$apply#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:145:399
Ac/c/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:115
h/<.invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:41:374
Ac/c#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:36
Ac#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:21:332
fe#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:20:156
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js:315:135
g/</j#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29566
g/</k<#https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882
angular.min.js:117:399
Your state URL is /about, not /about.html.
In any case, use the ui-sref directive, that's what it's for
<a ui-sref="about">about</a>
You simply pass in the state name (and any params, see the documentation) and it will create the right URL for you taking into account any $locationProvider.html5mode configuration.
If you are loading the app via file:///some/path/to/index.html, the AJAX requests to your templates (ie about.html) might not work. You should be using an HTTP server for your local development.
Have a look at (or even just clone as a base) the angular-seed project. It provides an excellent starting point for first-time Angular development.
You are mistake the state URL
your code <li>about</li>
You can access the state by URL from browser, but referencing other section of the app is a bad practice though it still works
<li>about</li>
Do this
<li><a ui-sref="about">about</a></li>
your state URL is mistake, is /about not /about.html
Try this
<li><a ui-sref="about">about</a></li>
For link to work you need to use
about
instead of
about.
Also for content to pull in like data binding you need to use controller.
Try this, just make sure test.html be there.
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var module = angular.module("sampleApp", ['ngRoute']);
module.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/route1', {
controller: 'myCtrl',
templateUrl: 'test.html'
}).
otherwise({
redirectTo: '/'
});
}]);
module.controller("MainController", function($scope) {
});
module.controller("myCtrl", function($scope) {
$scope.my = 10;
ab = function() {
alert($scope.my);
}
});
</script>
</head>
<body ng-app="sampleApp">
<div ng-controller="MainController">
Route
<ng-view>
</ng-view>
</div>
</body>
</html>
When I navigate to the home/index page via the "Home" link, the page in SPA-style correctly switches the content initially, but then half-a-second later the page refreshes. This does not happen when I navigate to my "Second" page via the same navbar, only when navigating from my Second page to home.
I'm new to Angular so my apologies if I'm missing something blatantly obvious. I've also included my local server code as I'm wondering if that may be the source of the problem...
index.html
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Intro to Angular</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0/angular-route.min.js"></script>
<script src="app.js"></script>
<style>
html, body, input, select, textarea
{
font-size: 1.05em !important;
}
</style>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">jQuery</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view>
</div>
</div>
</body>
</html>
main.html
<h1>This is main.</h1>
<h3>Scope value: {{ name }}</h3>
second.html
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
app.js
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second/', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
$scope.name = "Main";
}]);
myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.num = $routeParams.num || 1;
}]);
server.js
var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(8080, function(){
console.log('Server running on 8080...');
});
Your home link is a standard link to /index.html. Links using angular-route should start with a hash (#) to prevent the browser from navigating away from the page. The solution in this case is to use #/ instead of /index.html
I have just started learning angularjs. I am trying the tutorial one given on their official website.
http://docs.angularjs.org/tutorial/step_08
What i am trying to achieve is to build multiple views by adding routing.
when i access home.html it is displaying all the mobile list perfectly but once i click on the link to get the details of any of the mobile the next page gives me this error
[$injector:unpr]
do notice there is no unknown provider error
and all the expression on phone-detail.html is being printed as it is not being evaluated.
here is my app.js code
var phonecatApp = angular.module('phonecatApp', [
'ngRoute',
'phonecatControllers'
]);
phonecatApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: 'PhoneListCtrl'
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: 'PhoneDetailCtrl'
}).
otherwise({
redirectTo: '/phones'
});
}]);
then my controller.js code is
var phonecatControllers = angular.module('phonecatControllers', []);
phonecatControllers.controller('PhoneListCtrl', ['$scope', '$http',function ($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
alert(data);
$scope.phones = data;
});
$scope.orderProp = 'age';
}]);
phonecatControllers.controller('PhoneDetailCtrl', ['$scope', '$routeParams','$http',function($scope, $routeParams,$http) {
$http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
$scope.phone = data;
});
}]);
home.html code
<html lang="en" ng-app="phonecatApp">
<head>
<title>Hello world example from angular js</title>
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="scripts/controller.js"></script>
</head>
<body>
<div class="row">
<div class="container">
<div ng-view></div>
</div>
</div>
</body>
</html>
phone-list.html code -
<div class="col-lg-12">
<hr>
<p class="pull-right col-lg-4">
<input type="text" ng-model="query" class="form-control col-lg-6" placeholder="Search" style="width:auto;">
<select ng-model="orderProp" class="form-control col-lg-6" style="width:auto;">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
<option value="-age">Oldest</option>
</select>
</p>
<p class="col-lg-6">Total number of phones: {{phones.length}}</p>
<div class="clearfix"></div>
<hr>
<h3 ng-bind-template="Thumbnail view | Search for : {{query}}">List view</h3>
<div class="row">
<div class="col-lg-4" ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<div class="thumbnail">
<a href="#/phones/{{phone.id}}">
<img src="{{phone.imageUrl}}" data-src="{{phone.imageUrl}}" alt="{{phone.name}}">
</a>
<div class="caption">
<h3>{{phone.name}}</h3>
<p>{{phone.snippet}}</p>
</div>
</div>
</div>
</div>
</div>
phone-detail.html code -
<div class="phone-images">
<img ng-src="{{img}}"
class="phone"
ng-repeat="img in phone.images"
ng-class="{active: mainImageUrl==img}">
</div>
<h1>{{phone.name}}</h1>
<p>{{phone.description}}</p>
I got it where was the problem.
It was because i copied content in phone-detail.html from github which should come in a later step. in phone-detail there was some code like
{{phone.hardware.accelerometer | checkmark}}
here checkmark is a filter but i didn't introduced filter at all.
So solution was I added filter.js with content
angular.module('phonecatFilters', []).filter('checkmark', function() {
return function(input) {
return input ? '\u2713' : '\u2718';
};
});
then import script.js in home.html and it worked fine.
So i did two mistake -
1. Introducing code for filters without registering any filter.
2. Didn't post the whole code for phone-detail.html so that you can figure out the mistake number one.
A special thanks to #Lorenzo to help me dig out the problem.
As you defined an App module with var phonecatApp = ... you have to use it to create your controllers for Angular to know that phonecatController "belongs to" phonecatApp.
So just replace angular.module with phonecatApp.controller
Replace this line
var phonecatControllers = angular.module('phonecatControllers', []);
//------------------------^-------------^---------------------------
With this
var phonecatControllers = phonecatApp.controller('phonecatControllers', []);
//------------------------^--------------------^---------------------------
Or you can do
angular.module('phonecatApp').controller('phonecatControllers', []);