Here is my code.
home.html
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css"
href="webjars/bootstrap/3.3.7/css/bootstrap.min.css" />
<script
src="https://code.jquery.com/jquery-3.0.0.js"
integrity="sha256-jrPLZ+8vDxt2FnE1zvZXCkCcebI/C8Dt5xyaQBjxQIo="
crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4 /angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Spring Boot Test</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a ng-click="">Home</a></li>
<li>About</li>
<li>Contact </li>
</ul>
</div>
</nav>
<div data-ng-view = ""></div>
</div>
<!-- /.container -->
<script type="text/javascript"
src="webjars/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
script
<script type="text/javascript">
var app = angular.module('myApp',[]);
app.config(['$locationProvider', '$routeProvider',function config($locationProvider, $routeProvider) {
$routeProvider.
when('/about', {
templateUrl: 'about.html',
controller: 'aboutCtrl'
});
}
]);
app.controller('aboutCtrl',function($scope){
console.log("aknk");
});
app.controller('myCtrl',['$scope','$location','$window', function($scope,$location,$window){
$scope.about = function()
{
console.log("hello");
/*$location.path('about');*/
$window.location.assign('/about');
}
$scope.contact = function()
{
console.log("hello");
$location.path('/contact');
}
}]);
</script>
What i am doing worng? The links on about and contact do not work at all with this code and If I remove $routeProvider code /about call has been sent to the server. Actually what I want is to get the about.html in ng-view div so that I can have common header for all pages.
Your config should look like this.
app.config(function($routeProvider) {
$routeProvider
.when('/about', {
templateUrl: "views/view-queue.html",
caseInsensitiveMatch: true,
})
.otherwise({
templateUrl: "404.html"
})
});
The above code will work.
Related
I am trying an application with AngularJS 1.0 but I am facing issues with routing. The route is not working at all. I can't see my templates being displayed inside ng-view. My code is as shown below.
package.json
"main": "server.js",
"dependencies": {
"angular": "^1.4.3",
"angular-route": "1.6.10",
"body-parser": "latest",
"ejs": "latest",
"express": "latest",
"fabric-ca-client": "^1.0.2",
"fabric-client": "^1.0.2",
"grpc": "1.11.0"
}
app.js
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/vault', {
templateUrl: 'client/vault.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
.when('/til', {
templateUrl: 'client/til.html'
})
.when('/order', {
templateUrl: 'client/order.html'
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<title>Demo Application</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="application" ng-controller="appController">
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</html>
There are two more pages for store and about with only one tag in them.
I should be able to see the changes in the view part i.e. 'This is About page' but it is not being displayed.
I am referring to this URL
Any help would be appriciated.
Update-1
Added angular-route package but still not working.
Getting following error:
" Error: [$injector:modulerr] http://errors.angularjs.org/1.4.3/$injector/modulerr?p0=application&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.3%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1"
Update-2
Entire console output, which shows some error but don't understand a bit of it. It has several warnings as well.
https://pastebin.com/j06ku3yG
Update-3
I didn't added the minified js files for angular-route in to my html and that was the reason I was getting issues. Further more the existing angular script in html page also had version mismatch.
I also corrected some issues with routes after this I faced recursion related issues (could see multiple pages within the same page) Had to make changes to routs.
Thank you all for helping :)
I have modified your code a bit to give you a basic working demo of your app. The routing required an angular-route.js script for 1.2+ AngularJS versions. For both scripts their versions must match. I decided to use 1.6.5. I also replaced bootstrap and jquery with ui.bootstrap - angularjs version.
Here is a working demo:
/* Use `ui.bootstrap` module instead of jQuery + Bootstrap */
var app = angular.module('application', ["ngRoute", "ui.bootstrap"]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'client/index.html'
})
.when('/about', {
templateUrl: 'client/about.html'
})
.when('/store', {
templateUrl: 'client/store.html'
})
});
app.controller('appController', function($scope, $location) {
$scope.isActive = function(path) {
return path === $location.path();
}
});
<!DOCTYPE html>
<html>
<!-- Matching angular.js and angular-route.js versions -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<body>
<div ng-app="application" ng-controller="appController">
<header ng-init="isNavCollapsed=true">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-click="isNavCollapsed = !isNavCollapsed">
<span class="glyphicon glyphicon-menu-hamburger"></span>
</button>
</div>
<div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">
<ul class="nav navbar-nav navbar-left">
<li ng-class="{ active: isActive('/')}">Home</li>
<li ng-class="{ active: isActive('/store')}">Store</li>
<li ng-class="{ active: isActive('/about')}">About</li>
</ul>
</div>
</div>
</nav>
</header>
<div ng-view></div>
<!-- Separate files -->
<script type="text/ng-template" id="client/index.html">
index
</script>
<script type="text/ng-template" id="client/about.html">
about
</script>
<script type="text/ng-template" id="client/store.html">
store
</script>
</div>
</body>
</html>
First, you still needs to link the NgRoute from the angular-route.js.
Secondly, to link templates use href="#!store" instead of href="#store"
Here's a working example using angularjs 1.6.9
'use strict';
var app = angular.module('application', ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/store', {
templateUrl: 'store.html'
})
.when('/about', {
templateUrl: 'about.html'
})
});
<!-- require jquery and bootstrap scripts -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<div ng-app="application" >
<script type="text/ng-template" id="home.html">
<div class="view">
<h2>home</h2>
</div>
</script>
<script type="text/ng-template" id="store.html">
<div class="view">
<h2>store</h2>
</div>
</script>
<script type="text/ng-template" id="about.html">
<div class="view">
<h2>about</h2>
</div>
</script>
<header>
<div id="left_header">Demo Application</div>
</header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Store</li>
<li>About</li>
</ul>
</div>
</nav>
<div ng-view></div>
</div>
I want to use routeProvider in ngRoute in angularjs to view my home.html or delete.html or add.html
app.js
var app = angular.module('MyApp', ['ngRoute']);
MyApp.config([
'$routeProvider',
function($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
MyApp.controller('AddController', function($scope) {
$scope.message = "In add view"
});
MyApp.controller('DeleteController', function ($scope) {
$scope.message = "In delete view"
});
MyApp.controller('EditController', function ($scope) {
$scope.message = "In edit view"
});
MyApp.controller('HomeController', function ($scope) {
$scope.message = "In home view"
});
index.html
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet"/>
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="Scripts/internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view>
</div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
When I run my application, and click on any of the links, it gives me this url: http://localhost:51285/html/#!Edit
And in the body is this...
HTTP Error 403.14 - Forbidden
The Web server is configured to not list the contents of this directory.
In the sample that I am following, it doesn't have that error it just changes to the message.
you have some mistake in your code :
in your html:using Add
2.in your app.js:instead of MyApp.config or MyApp.controller use app.config and app.controller.MyApp is name of your app but you must use variable that your app stored on it.
follwing will working:
your html:
<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<!-- bootstrap css -->
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<!-- Jquery js -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="internal/app.js"></script>
</head>
<body>
<div class="container">
<nav role="navigation" class="navbar navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="">Add</li>
<li class="">Edit</li>
<li class="">Delete</li>
</ul>
</nav>
<div ng-view></div>
<!-- Footer -->
<h3 style="margin-top: 40px;" class="text-center text-info">Single Page App</h3>
</div>
</body>
</html>
your app:
var app = angular.module('MyApp', ['ngRoute']);
app.config([
'$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/Add', {
templateUrl: 'html/add.html',
controller: 'AddController'
})
.when('/Edit', {
templateUrl: 'html/edit.html',
controller: 'EditController'
})
.when('/Delete', {
templateUrl: 'html/delete.html',
controller: 'DeleteController'
})
.when('/Home', {
templateUrl: 'html/home.html',
controller: 'HomeController'
})
.otherwise({
redirectTo: '/Home'
});
}
]);
app.controller('AddController', function ($scope) {
$scope.message = "In add view";
});
app.controller('DeleteController', function ($scope) {
$scope.message = "In delete view";
});
app.controller('EditController', function ($scope) {
$scope.message = "In edit view";
});
app.controller('HomeController', function ($scope) {
$scope.message = "In home view";
});
I hope it could be ralted with configuration. Please check the link below! Angular force an undesired exclamation mark in url
i'm having this online course on AngularJS, which provides the code in folders, according to the lesson. This one is about routing and single page applications; similar demos and structures work on plunker (like this one ) but not in my machine...I don't understand why, can someone help me out?
EDIT: actually, if I download this demo the thing wont work...
INDEX file:
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
The Module file: 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;
}]);
Pages one and two (views):
<h1>This is Main.</h1>
<h3>Scope value: {{ name }}</h3>
<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>
The folder structure. The code is as suggested
Your references for angular and bootstrap are not correct
Angularjs
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
Bootstrap
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
You need to correct you urls like this
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;
}]);
<html lang="en-us" ng-app="myApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i></i> Second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
Also you need to add a page for the view on the following path in project pages/main.html
You need to use your application throught the localhost like this:
Just mount your project on HTTP server.
$> sudo npm -g live-server
$> cd path/to/root/dir/project
$> live-server
EDIT: and eventually, include every time your scripts at bottom of body:
<body>
.....
.....
.....
<script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
I don't know why angular routing didn't work with me. I revised the code 10 times and I couldn't find the solution.
My index page is like -
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title></title>
<meta charset="utf-8" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="scripts/jquery-1.9.0.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="demo.js"></script>
</head>
<body>
<div class="container">
<nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
<ul class="nav navbar-nav">
<li class="active">home</li>
<li>add</li>
<li>edit</li>
<li>delete</li>
</ul>
</nav>
<ng-view>
</ng-view>
<h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
</div>
</body>
</html>
and Javascript page like
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />
var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/add', {
templateUrl: 'Views/add.html',
controller:'addController'
}).
when('/edit', {
templateUrl: 'Views/edit.html',
controller: 'editController'
}).
when('/delete', {
templeteUrl: 'Views/delete.html',
controller: 'deleteController'
}).
when('/home', {
templateUrl: 'Views/home.html',
controller: 'homeController'
}).
otherwise({ redirectTo: '/home' });
}]);
myApp.controller("addController",function ($scope) {
$scope.message = "in Add view Controller";
});
myApp.controller("editController",function ($scope) {
$scope.message = "in edit view Controller";
});
myApp.controller("deleteController",function ($scope) {
$scope.message = "in delete view Controller";
});
myApp.controller("homeController",function ($scope) {
$scope.message = "in home view Controller";
});
I have 4 html pages in "Views" folder their name is "add","edit","delete","home" and they have the same content.
<div class="row jumbotron">
<h2>{{message}}</h2>
</div>
Please I want to know why it didn't work.
Actually your code is correct but Angular applications work properly on client server architecture.
Kindly Run your application using a local server. There is no need for any Tomcat server. You can easily download a Google Chrome Plugin "Web server for Chrome". here- https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=en
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/yeti/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.controller()
app.config(function($routeProvider) {
$routeProvider
.when('/abc', {
'template': "This is the ABC page"
})
.when('/Home', {
'template': "This is the home page"
})
.when('/About', {
'template': "This is the About page"
})
.when('/Contact', {
'template': "This is the Contact page"
})
.when('/Service', {
'template': "This is the Service page"
})
})
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Routing App</a>
</div>
<ul class="nav navbar-nav">
<li>Abc</li>
<li>About us</li>
<li>Services</li>
<li>Contact</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
<div ng-view></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="script.js"></script>
</html>
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
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'
})
});
myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
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'
})
});
myApp.controller('mainController', ['$scope', '$log',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.