So I followed this guide: http://viralpatel.net/blogs/angularjs-routing-and-views-tutorial-with-example/
But when I try to change the view nothing happens, anybody a idea what I do wrong?
This is the code I got.
Home.php:
<!DOCTYPE html>
<html ng-app="lax">
<head>
<meta name="author" content="Koen Desmedt" />
<meta name="description" content="CMS Belgium Lacrosse" />
<meta name="keywords" content='Lacrosse, BLF, Belgium' />
<meta name="googlebot" content="noarchive" />
<link href="lib/bootstrap/css/bootstrap.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="lax.js"></script>
<link href="css/style.css" rel="stylesheet">
<title>CMS Belgium Lacrosse</title>
</head>
<body>
<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#/home">
<span class="glyphicon glyphicon-home"></span> BLF
</a>
</li>
<li>
Players
</li>
<li>
Club
</li>
<li>
Games
</li>
</ul>
</nav>
</div>
</header>
<div id='contentcontainer'>
<div class='container' ng-view></div>
</div>
</body>
</html>
lax.js:
var lax = angular.module('lax', []);
lax.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'views/news.php',
controller: 'NewsController'
}).
when('/players', {
templateUrl: 'views/players.php',
controller: 'PlayersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
lax.controller('NewsController', function($scope) {
$scope.message = 'This is Add new order screen';
});
lax.controller('PlayersController', function($scope) {
$scope.message = 'This is Show orders screen';
});
From angular 1.2.0, ngRoute has been moved to its own module. You have to load it separately and declare the dependency.
Update your html:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
And Js:
var lax = angular.module('lax', ['ngRoute']);
For more information: http://docs.angularjs.org/guide/migration
Angular routes require the route module to be included as well. Here is the documentation that covers this.
So, I think you may be missing the:
<script src="angular-route.js"></script>
In the <head> of the page.
*Note: this module used to be part of Angular, but was moved out recently (1.2?). So, some tutorials are still assuming that $route is built-in.
Adding this would work :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
but it will not work without internet access when running for a first time ,Therefore you should ng-route dependency to your project and refer that in your html file
How to add ng-route dependency
Related
I have just start working with AngularJS but have an extensive background with JavaScript, PHP, HTML, CSS, etc. I have a basic template put together and everything works fine, when you start at '/'. However, if I tried to load '/contact' or any other page instead of starting at '/' I get a 404 not found. Now, I understand the basics as to why: AngularJS loads different content based on the templates via AJAX so the page never changes. The question: how do I fix this? I cannot be the first one to have this issue but I did some Googling and couldn't find any help.
File: index.html
<!DOCTYPE html>
<html ng-app="alertBlaze">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AlertBlaze</title>
<link href="stylesheet/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet/app.min.css" rel="stylesheet">
<base href="/">
</head>
<body ng-controller="mainController">
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">AlertBlaze</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>Platform</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div ng-view></div>
<script src="javascript/jquery.min.js"></script>
<script src="javascript/angular.min.js"></script>
<script src="javascript/bootstrap.min.js"></script>
<script src="javascript/app.min.js"></script>
</body>
</html>
File: app.min.js
var alertBlaze = angular.module('alertBlaze', ['ngRoute']);
alertBlaze.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
alertBlaze.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/platform', {
templateUrl : 'pages/platform.html',
controller : 'platformController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo : '/'
});
$locationProvider.html5Mode(true)
});
alertBlaze.controller('mainController', function($scope) {
});
alertBlaze.controller('platformController', function($scope) {
});
alertBlaze.controller('aboutController', function($scope) {
});
alertBlaze.controller('contactController', function($scope) {
});
Any help is appreciated.
Thank you!
I think problems in $locationProvider.hashPrefix('');
If you can go to http://alertblaze.com/contact you catch 404, but if you can go to http://alertblaze.com/#/contact - it's success.
try to change
$locationProvider.hashPrefix('');
to the
$locationProvider.hashPrefix('!');
or remove
$locationProvider.html5Mode(true)
and change your routing with #/
Okay, so yeah apparently the issue is exactly what Tara's said it was however, I want the pound sign remove for cleaner URL's so I added Apache Rewrite Rules to rewrite everything to index.html:
RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]
Add the above as a rewrite and everything will work!
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 started with AngularJS, and my route doesn't work. I searched in google and try some solution found but nothing works.
My index.html (public/index.html)
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Projet Web</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<!--<li class="active">Link <span class="sr-only">(current)</span></li>-->
<li>Véhicules</li>
<li>Agences</li>
<li>Agents</li>
<li>Statut</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- div pour les templates-->
<div ng-view>
</div>
</body>
</html>
My app.js (javascript/app.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : '../views/index.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/vehicules', {
templateUrl : '../views/vehicules.html',
controller : 'VehiculeCtrl'
})
// route for the about page
.when('/agents', {
templateUrl : '../views/vehicules.html',
controller : 'AgentsCtrl'
})
// route for the about page
.when('/agences', {
templateUrl : '../views/vehicules.html',
controller : 'AgencesCtrl'
})
// route for the about page
.when('/status', {
templateUrl : '../views/vehicules.html',
controller : 'StatusCtrl'
})
.otherwise({redirectTo: '/'});
});
And my controller (controllers/VehiculesCtrl.js):
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet) {
$scope.text = 'Salut ! je teste le controleur';
var url = '127.0.0.1:3000/vehicules';
//console.log("curieux", VehiculesGet);
var res = VehiculesGet.getAllVehicules(url, function(data, status){
console.log("test",status);
console.log("test",data);
$scope.result = data;
});
});
// GET ALL VEHICULE
myApp.factory('VehiculesGet', [ '$http', function($http) {
//var url = 'http://127.0.0.1:3000/vehicules';
var result;
var data;
return {
getAllVehicules: function(url, callback) {
$http.get('http://127.0.0.1:3000/vehicules')
.success(function (data, status) {
// données récupérées avec succès
callback(data, status);
}).error(function(data,status){
callback(data, status);
});
}
};
}]);
My tree:
public
javascripts
controllers
VehiculesCtrl.js
app.js
views
index.html
Help me please :) ...... And sorry for my english x)
Thanks
I think you should add
<body ng-controller="VehiculeCtrl">
to your controller and remove
var myApp = angular.module('myApp', ['ngRoute']);
from your controller.
Then export your controller from app.js like
myApp.controller('VehiculeCtrl', function ($scope,$http, VehiculesGet)
Try to load the angular-route after the angular, not after your controller, this should work
<head>
<meta charset="UTF-8">
<script src="../node_modules/angular/angular.min.js"></script>
<script type="text/javascript" src="../node_modules/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="javascript/app.js"></script>
<script type="text/javascript" src="javascript/controllers/VehiculeCtrl.js"></script>
</head>
You are missing the ng-view element in your markup. This is where the routing functionality places the templateUrl content. See this link for documentation: https://docs.angularjs.org/api/ngRoute/directive/ngView
You should remove var myApp = angular.module('myApp', ['ngRoute']) from VehiculesCtrl.js. In VehiculesCtrl.js you should use myApp variable which is declared in app.js
See how in the plunker below, when you click on link one or link three, the pages do not load at the top of the page so you cannot see the page title, you have to actually scroll up to see the page title. Why is this? How can I make it so it loads the page at the top, like a regular webpage?
Here's the plunker.
Here's my js:
var routerApp = angular.module('routerApp', ['ui.router','ui.bootstrap']);
routerApp.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise('/home');
$locationProvider.html5Mode(false).hashPrefix("");
$stateProvider
// HOME VIEW ========================================
.state('home', {
url: '/home',
templateUrl: 'partial-home.html'
// onEnter: scrollContent
})
// ONE VIEW ========================================
.state('one', {
url: '/one',
templateUrl: 'partial-one.html'
})
// TWO VIEW ========================================
.state('two', {
url: '/two',
templateUrl: 'partial-two.html'
})
// THREE VIEW ========================================
.state('three', {
url: '/three',
templateUrl: 'partial-three.html'
})
});
Here's my html (see the plunker link above for the injected pages).
<!DOCTYPE html>
<html>
<head>
<!-- CSS -->
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="script.js"></script>
<!-- // base path for angular routing -->
<!--<base href="/" />-->
</head>
<body ng-app="routerApp">
<!-- NAVIGATION -->
<!-- Fixed navbar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" ui-sref="home">Some web page somewhere</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a ui-sref="one">Link One</a></li>
<li><a ui-sref="two">Link Two</a></li>
<li><a ui-sref="three">Link Three</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- End Fixed navbar -->
<!-- MAIN CONTENT -->
<!-- Inject Content Here -->
<div class="container" style="padding-top:68px;">
<div ui-view></div>
</div>
</body>
</html>
Add autoscroll="false" to your ui-view to prevent this behavior.
<div class="container" style="padding-top:68px;">
<div ui-view autoscroll="false"></div>
</div>
Plunker demo
See the documentation about ui-view and autoscroll directives:
autoscroll
(optional)
string
It allows you to set the scroll behavior of the browser window when a view is populated. By default, $anchorScroll is overridden by ui-router's custom scroll service, ui.router.state.$uiViewScroll. This custom service let's you scroll ui-view elements into view when they are populated during a state activation.
Not new to programming. But I'm new to angularjs. So it's probably a daft question..
I've been following a tutorial...but for some reason the page routing doesn't work.
I have a nav bar on the top, home, about, contact etc. Typical stuff.
I would like to be able to click on "about" and be routed to the about.html file on the same page.
Nothing appears! The index.html is in a partials file. Please note I'm a newbie to angular and I've followed the instructions. My server works fine. The Nav bar looks good but doesn't link properly.
This is the code for index.html. Thanks
<!-- define angular app -->
<html ng-app="financeApp">
<head>
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<script src="js/angular.min.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<img class="logo" src="img/logo.png" />
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- define angular controller -->
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view> </div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</body>
</html>
and this is the code for script.js
// create the module and name it financeApp
// also include ngRoute for all our routing needs
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('#', {
templateUrl : 'partials/index.html',
controller : 'mainController'
})
// route for the about page
.when('#about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('#contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
});
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
The following should work for you.
You need to create partials/main.html
INDEX.HTML
<!DOCTYPE HTML>
<html ng-app="financeApp">
<head>
<meta charset="utf-8">
<!-- CSS -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
</head>
<!-- HEADER AND NAVBAR -->
<header>
<div class="wrap">
<!-- logo -->
<!-- <img class="logo" src="img/logo.png" /> -->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#/"></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</div>
</header>
<body>
<div class="main" ng-controller="mainController">
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<div ng-view></div>
<!-- angular templating -->
<!-- this is where content will be injected -->
</div>
</div>
<!-- App JS -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-route.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
SCRIPT.JS
var financeApp = angular.module('financeApp', ['ngRoute']);
// configure our routes
financeApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'partials/main.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'partials/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'partials/contact.html',
controller : 'contactController'
})
.otherwise({
redirectTo: '/'
})
});
// create the controller and inject Angular's $scope
financeApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
financeApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
financeApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
I guess you followed this tutorial and at least it explains everything what you need.
Possible errors could be:
Wrong folder name -> check again if the templateURLs match your file system
Errors in the template files
If you provide us some error messages from the console, we can help you better.