While i am trying to click on first and second page its not showing any thing, i have wasted lot of time on this but no output is coming, Files script.js index.html first.html and second.html
script.js
angular.module('RoutingApp', ['ngRoute'])
.config( ['$routeProvider', function($routeProvider) {
$routeProvider
.when('/first', {
templateUrl: 'first.html'
})
.when('/second', {
templateUrl: 'second.html'
})
.otherwise({
redirectTo: '/'
});
}]);
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="RoutingApp">
<h2>AngularJS Routing Example</h2>
<p>Jump to the first or second page</p>
<div ng-view>
</div>
</body>
</html>
first.html
<h2>This is the first page.</h2>
second.html
<h2>This is the second page.</h2>
Anchor(a) tag needs to be changed to match them with route URL. Those should have / in them.
first
or
second page
Related
I have been trying to make a angularjs application where I want to route to a different html page on a button click. But is not working for some unknown reasons.
My html code
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<button ng-click="changeview()">ClickMe</button>
<h1>MainPage</h1>
</body>
</html>
My Code
var app = angular.module("app", ['ngRoute'])
app.config(['$locationProvider', function($locationProvider) {
$locationProvider.hashPrefix('');
}]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/Details', {
templateUrl: 'details.html'
}).
when('/Main', {
templateUrl: 'main.html'
}).
otherwise({
redirectTo: '/Main'
});
}]);
app.controller("Controller", function($scope,$routeParams,$location){
//$scope.ProductId = $routeParams.id;
$scope.changeview = function () {
console.log('in function changeview');
$location.path('/Details');
}
})
Here is my plunkr
Please help.
You have missed to add the ng-view directive. It needs to be included for the routing to be able to rendered the templates
<div ng-view></div>
Working plunker
You need to have ng-view directive in index.html
<div class="viewWrapper">
<div ng-view></div>
</div>
WORKING DEMO
this is my test.js file
angular.module("testApp",['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider){
$routeProvider
.when("/test",{
templateUrl: 'test.html',
controller: 'testCtrl'
})
.otherwise({
redirectTo : "/test"
});
$locationProvider.html5Mode(true);
}]).controller("testCtrl",function(){
this.message = "hello";
console.log("in controller");
})
this is index.html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script src="angular.js"></script>
<script src="angular-route.js"></script>
<script src="test.js"></script>
<base href="/">
</head>
<body>
<div ng-view></div>
</body>
</html>
this is test.html file
<div ng-controller="testCtrl as tCtrl">
<h1>{{tCtrl.message}}</h1>
</div>
when I hit http://127.0.0.1:8080/ it is redirected http://127.0.0.1:8080/test and it is working fine with load all resources i.e controller and angualar.js.
but when i hit http://127.0.0.1:8080/test it doesn't load anything giving {{tCtrl.message}}
How to resolve this issue.
This my app.js,
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.when('/',{
templateUrl: 'views/home.html',
controller: 'homeCtrl'
}).when('/detail',{
templateUrl: 'views/details.html',
controller: 'detailCtrl'
}).otherwise({
redirectTo: '/home'
});
});
myApp.controller('homeCtrl',function($scope){
$scope.message ="Welcome to your Home Page"
});
myApp.controller('detailCtrl',function($scope){
$scope.message ="Name: Manish"
});
This is index.html page,
<html >
<head>
<meta charset="ISO-8859-1">
<title>Try It Out</title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body ng-app="myApp" ng-controller="homeCtrl" style="text-align: center;">
<span >{{message}}</span><br>
Home
Details
<br><br>
<div ng-view></div>
<h4>copyright 2017</h4>
</body>
</html>
this is my home.html
<h3>Home</h3><br>
{{message}}
same in details.html
<h3>Details</h3><br>
{{message}}
problem is when i run it on server its going to home page at first.but when i click on details..its not showing message of Details.html.
and main problem is with URL...clicking on Details link..
http://localhost:7675/AngularJSinglePage/#!/#%2Fdetail
As u can notice "!/#%2F" this comes in between..don't know from where,it should come like this
http://localhost:7675/AngularJSinglePage/#/detail
Any one faced same problem? Help me out, I am trying to learn SPA using AngularJS?
Answered # https://stackoverflow.com/a/41273403 :)
In addition you do not have a spaController in your app.js which is referenced in your
I am trying to set up a SPA with angular, and with the current code it is not working, while run on a server. My index.html does not have a # after it, which I think it should for the SPA. I am curious why I am not getting a # in the url's. for example, navigating to the index i get something like localhost:4000/index.html/ instead of localhost:4000/index.html#/. When i try to navigate to localhost:4000/index.html/home i get a 404 error. Can anyone tell me why this is so, or if there are any other issues you can spot.
This is my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ski</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
</head>
<body ng-app="Ski">
<ng-view></ng-view>
<script src="js/app.js"></script>
<script src="js/routes.js"></script>
</body>
</html>
angular routes :
angular.module('Ski').config(function($routeProvider) {
'use strict';
.when('/home', {
templateUrl: 'templates/home.html'
})
.when('/map', {
templateUrl: 'templates/map.html'
})
.otherwise({
redirectTo: '/'
});
});
app.js
angular.module('Ski', ['ngRoute']);
Templates:
this on is templates/maps
<div>
<h1> Hello World </h1>
</div>
this one is templates/home
<h1> Home </h1>
Ive just started to learn AngularJS and im trying to use angular-route but can't get it to work.
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="fantasySportsApp">
<head>
<title></title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="Content/Style/bootstrap.min.css"/>
<!--Placeholder for views-->
<div data-ng-view="">
Hejsan
ge
</div>
<script src="Content/Scripts/jQuery-1.11.0.js"></script>
<script src="Content/Scripts/jquery-ui.js"></script>
<script src="Content/Scripts/angular.min.js"></script>
<script src="Content/Scripts/angular-route.js"></script>
<script src="App/app.js"></script>
<script src="Content/Scripts/bootstrap.min.js"></script>
</body>
</html>
my app.js looks like this:
var fantasySportsApp = angular.module('fantasySportsApp', ['ngRoute']);
fantasySportsApp.config(function($routeProvider) {
$routeProvider.when('/login', {
controller: 'userController',
templateUrl: 'App/partials/login.html'
})
.when('/startPage', {
controller: 'startPageController',
templateUrl: '/App/partials/startPage.html'
})
.otherwise({ redirectTo: "/index" });
});
when i start my page ill get to this url: localhost:26283/index.html#/index but it wont show me anything. the page is empty. If i inspect the html i find this in the code: "<-- ngView: -->" think indicates that the partial view that i try to route to is supposed to start but there is nothing under the tag.
What could be the problem?