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
Related
I'm starting to configure my application with Angularjs, I am following a route guide but I can not make the project run
i dont know how to register my controllers and services for load
dynamically when i change pages... :/ y created mi appConfig file for configure my routes.
My directory.
my app config:
angular.module('library.crud', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/views/home.html'
})
.when('/book', {
templateUrl: 'app/views/book.html',
controller: 'bookController',
controllerAs: 'vm'
})
.when('/books', {
templateUrl: '../app/views/books.html',
controller: 'booksController',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/'
});
});
example controller:
(function () {
'use stritct';
angular
.module('library.crud')
.controller('booksController', booksController);
booksController.inject = ['$rootScope', '$scope', 'bookService'];
function booksController($rootScope, $scope, bookService) {
var vm = this;
}
})();
example service:
(function () {
'use strict';
angular
.module('library.crud', [])
.factory('bookService', bookService);
bookService.$inject = ['$http', '$q'];
function bookService($http, $q) {
var service = {
};
return service;
}
})();
indexHTML:
<html>
<head>
<!--script imports, angular, jquery, bootstrap etc... -->
<script src="app/appConfig.js"></script>
</head>
<body ng-app="library.crud">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
at what time do my HTML pages know which controller to invoke and where is it located? how register my services ?
When i enter a books options from menu, the console show the next error:
The controller with the name 'booksController' is not registered.
UPDATED INDEX.HTML:
<html>
<head>
<link rel ="stylesheet" href="resources/bootstrap/css/bootstrap.min.css"/>
<script src="resources/jquery/jquery.min.js"></script>
<script src="resources/bootstrap/js/bootstrap.min.js"></script>
<script src="resources/angular/angular.min.js"></script>
<script src="resources/angular/angular-route/angular-route.min.js"></script>
<script src="app/appConfig.js"></script>
<script src="app/services/book.service.js"></script>
<script src="app/views/controllers/books.controller.js"></script>
<script src="app/views/controllers/book.controller.js"></script>
</head>
<body ng-app="library.crud">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Home</li>
<li>Books</li>
</ul>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
There are two things in your code,
(i) You dont have to add dependencies in your code.
angular.module('library.crud').factory('bookService', bookService);
(ii) Add reference for your controller and service in your index.html.
<script src="app/appConfig.js"></script>
<script src="app/service.js"></script>
<script src="app/controller.js"></script>
The main reason this error occurs when everything else looks ok is because you did not include your js files in your index.html. Based on your screenshot, it looks like you have your controllers and services in separate files. Make sure you put them after your appConfig.js file in index.html.
Another issue I see is in your service file.
angular
.module('library.crud', [])
.factory('bookService', bookService);
should be
angular
.module('library.crud')
.factory('bookService', bookService);
If you include square brackets as a second parameter in the .module line, angular will think you are creating a new app instead of trying to register your service/controller to your existing app.
Also, it is highly recommend to use ui-router instead of NgRoute in any Angular1.x applications: https://github.com/angular-ui/ui-router
It seems that by asking this question, I am just beating a dead horse, but I have been through all the posts that I could find and still could not find an answer. I (and even a colleague) have spent countless hours trying to solve what seems to be a relatively basic concept. So , can I please get some help with my angularjs routing
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<link href="/app/css/app.css" rel="stylesheet" />
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
<script src="/app/js/controllers/indexController.js"></script>
<script src="/app/js/services/RestaurantData.Service.js"></script>
</head>
<body>
<header class="container-fluid">
<h1>What Do I Eat</h1>
</header>
<div class="container-fluid">
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
</div>
</div>
<ng-view></ng-view>
</div>
<footer class="container-fluid">
whatever i want
</footer>
</body>
</html>
app.js:
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/myRest',
{
templateUrl: '/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
ExistingRetaurantController.js
'use strict';
foodApp.controller('ExistingRestaurantController',
function ExistingRestaurantController($scope) {
$scope.restaurant = {
name: 'Cheesecake Factory',
food: 'Cheesecake',
price: 6.95
}
}
);
ExistingRestaurant.html:
<div class="container-fluid">
<h1>Existing Page!</h1>
</div>
I think the problem is the project structure. Index.html appears to be nested within app. I thought the easiest fix was to move index.html to the root of the project. So with a folder structure of:
I was able to getting working as follows..
In Index.html, I changed the links to be #!/ (hash-bang):
<!DOCTYPE html>
<html lang="en" ng-app="foodApp">
<head>
<meta charset="utf-8" />
<title>What Do I Eat</title>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"></script>
<script src="/Scripts/angular-route.min.js"></script>
<script src="/app/js/app.js"></script>
<script src="/app/js/controllers/ExistingRestaurantController.js"></script>
<script src="/app/js/controllers/NewExperienceController.js"></script>
<script src="/app/js/controllers/NewRestaurantController.js"></script>
</head>
<body>
<ul>
<li>My Restaurants</li>
<li>Add Restaurant</li>
<li>Add Experience</li>
</ul>
<ng-view></ng-view>
</body>
</html>
Then in app.js I added the $locationProvider and set the hash-prefix to !. (I don't know why it's called hashPrefix because I always think it's a suffix, given that it comes after the hash, but I can live with it.)
'use strict';
var foodApp = angular.module('foodApp', ['ngResource', 'ngRoute']);
foodApp.config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix("!");
$routeProvider
.when('/myRest',
{
templateUrl: '/app/templates/ExistingRestaurant.html',
controller: 'ExistingRestaurantController'
})
.when('/addExp',
{
templateUrl: '/app/templates/NewExperience.html',
controller: 'NewExperienceController'
})
.when('/addRest',
{
templateUrl: '/app/templates/NewRestaurant.html',
controller: 'NewRestaurantController'
});
}
]);
Your start path then becomes:
http://localhost:63317/index.html
and changes to the following when clicking the links:
http://localhost:63317/index.html#!/myRest
http://localhost:63317/index.html#!/addRest
http://localhost:63317/index.html#!/addExp
Well after 4 days of searching, I finally figured out my own answer. I was using angular version 1.6.1. The moment I rolled it back to 1.2.1, everything worked fine. I shall continue to research to figure out best routing practices.
Try rolling your angular version back until it works.
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>
I am learning Angularjs and Nodejs by developing a project.
I have followed this tutorial and organised my folder structure and route configurations.
Problem:
I have added a method called isActive to update ng-class based on tab click. But when I click the tab it is not calling the isActive method.
My guess is, I have done something wrong in appRoutes.js but not sure how to fix this. I am able to reach the MainController but not the methods in it.
I have another question, I need to make the Home tab active when I enter the application or when I clicked on home tab or when I click on application header too.
Below is the html and the js codes.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<base href="/">
<title>ets</title>
<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/ets.css">
</head>
<body ng-app="etsApp">
<div id="mainDiv">
<div>
<section id="header_section" class="main-title"></section>
<section id="nav_section"></section>
</div>
<section id="body_section">
<div ng-view="ng-view"></div>
</section>
<section id="footer_section" class="footer-style"></section>
</div>
<script type="text/javascript" src="libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#header_section').load('views/partials/header.html');
$('#nav_section').load('views/partials/navigation_main.html');
$('#footer_section').load('views/partials/footer.html');
});
</script>
</body>
</html>
navigation_main.html
<div>
<nav class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li ng-class="{active : isActive('/home')}" id="nav_home">
Home
</li>
<li ng-class="{active : isActive('/expensereporting')}" id="nav_exprep">
Expense Reporting
</li>
<li ng-class="{active : isActive('/remainders')}">
Todo Remainder's
</li>
<li ng-class="{active : isActive('/pdfoperations')}">
PDF Operation's
</li>
<li ng-class="{active : isActive('/imageoperations')}">
Image Operation's
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login/Register</li>
</ul>
</nav>
</div>
header.html
<div>
<header id="header" style="margin-left: 50px;">
<a href="/" style="text-decoration: none; color: black;">
<strong>eTools Store</strong>
</a>
</header>
</div>
appRoutes.js
angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
});
$locationProvider.html5Mode(true);
}]);
app.js
angular.module('etsApp', ['ngRoute', 'appRoutes', 'HomeCtrl', 'MainCtrl']);
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.isActive = function(destination) {
console.log($location.path());
return destination === $location.path();
}
});
Your navigation_main.html is outside of controller scope. That's the main reason. Try to create separate controller for you navigation like this
.controller('NavCtrl', function($scope) {
isActive = function(destination) { /*...*/ }
}
Put it into file js/nav.js and add to your html
<script type="text/javascript" src="js/nav.js"></script>
And then add this controller to your navigation_main.html code
<div ng-controller="NavCtrl">
About problem not reaching isActive method:
Try to reorganize:
<script type="text/javascript" src="js/controllers/MainCtrl.js"> </script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
into:
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
May be you forget to add .otherwise
.when('/', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.when('/home', {
templateUrl: 'views/partials/home.html',
controller: 'MainController'
})
.otherwise({
redirectTo: '/'
});
Update :
Try this -
In navigation_main.html
<li ng-class="{'active' : path}" >
Image Operation's
</li>
MainCtrl.js
angular.module('MainCtrl', []).controller('MainController', function($scope) {
console.log('Main Controller');
$scope.itemClicked= function(destination) {
$scope.path = destination;
}
});
You can try angular ui-router for your routing and for adding an active class when a state is active. You only need to add ui-sref-active="YourActiveClassHere". Angular UI-Router
Try to change the order of this,
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
To this,
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
<script type="text/javascript" src="js/controllers/HomeCtrl.js"></script>
Try to add ng-click=isActive('/home'), in your a tag.
<li ng-class="{active : activeClass == 'home'}" id="nav_home">
<a href="/home" ng-click=isActive('/home')>Home</a>
</li>
In your MainCtrl add this line,
$scope.activeClass = '';
$scope.isActive = function(destination) {
$scope.activeClass = destination;
}
I have the following script:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<!--link rel="stylesheet" type="text/css" href="css/main.css"-->
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#navbar').css("height"))+10);
});
$(window).load(function() {
alert(parseInt($('#navbar').css("height")));
$('body').css('padding-top', parseInt($('#navbar').css("height"))+10);
});
</script>
</head>
Basically I have a fixed top navbar (<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">) and it's covering up the top of my page's actual body content. I came across this solution (after window.load finishes, set the padding of the body based on navbar's height) from many other sources. But it doesn't work. The window.resize works perfectly and will readjust the padding of the body accordingly.
Any idea what's wrong? When I first load the page, the alert statement executes and says the value is NaN. The page behind is still fully white and hasn't loaded at all until I've clicked 'ok'. It's doing this is both chrome and Firefox. Any idea what's happening? Thanks.
Edit:
Adding more code.
This is the body
<body ng-app="cosmoApp">
<div ng-include="'templates/header.html'"></div>
<div ng-view></div>
<div ng-include="'templates/footer.html'"></div>
<script src="/scripts/angular.js"></script>
<script src="/scripts/angular-route.js"></script>
<script src="/scripts/cosmo.js"></script>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
</body>
This is the partial html that Angular shoves into the ng-view div in the body.
<nav id="navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div>
<div class" jumbotron navbar-brand">
<h2>Whatever</h2>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Home</li>
<li>Services</li>
<li>Gallery</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
This is the JS
angular.module('cosmoApp', ['ngRoute'])
.config(['$routeProvider',
function($routeProvider){
$routeProvider
.when("/", {templateUrl: "partials/home.html", controller : 'PageCtrl'})
.when("/services", {templateUrl: "/partials/services.html", controller : "PageCtrl"})
.when("/gallery", {templateUrl: "/partials/gallery.html", controller : "PageCtrl"})
.when("/about", {templateUrl: "/partials/about.html", controller : "PageCtrl"})
.when("/contact", {templateUrl: "/partials/contact.html", controller : "PageCtrl"})
.otherwise({redirectto: "/"});
}]).controller("PageCtrl", function($scope)
{
});
Edit 2:
Adding screenshot of the page load. Why does it think window is loaded at this stage if it's not actually loaded?