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?
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.
Im uning angular to make page login, I use template login.html and controller login.html, the problem is when I call login controller the main controller will be executed automatically !
and I found : warning: tried to load angular more than once.
this is my JS:
trainingApp.config(['$routeProvider' ,function($routeProvider){
$routeProvider
.when('/login',{
templateUrl: 'login.html',
controller: 'loginCtrl'
})
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl'
})
.otherwise({
redirectTo : "/"
});
}]);
trainingApp.controller('loginCtrl',['$scope', function($scope){
$scope.alertt = function(){
// console.log("ok");
alert("okkkkkkk");
}
}]);
trainingApp.controller('mainCtrl', ['$scope','$timeout', 'apiService','$location', function ($scope,$timeout, apiService,$location) {
console.log('hello');
}]);
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Plannification Des Formations</title>
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap-tokenfield.css">
<link rel="stylesheet" type="text/css" href="mystyle/bootstrap.min.css">
<link rel="stylesheet" href="mystyle/bootstrap-datepicker.css">
<link rel="stylesheet" href="mystyle/jquery-ui.css">
<script src="public/jquery-1.11.2.min.js"></script>
<script src="public/jquery-ui.js"></script>
<script src="public/bootstrap-datepicker.js"></script>
<script src="node_modules/lodash/lodash.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="public/daypilot/daypilot-all.min.js"></script>
<script src="public/bootstrap-tokenfield.js"></script>
<script src="public/bootstrap.min.js"></script>
<!-- <script src="bower_components/angular-route/angular-route.js"></script> -->
<script src="controllers/app.js"></script>
<script src="controllers/mainCrtl.js"></script>
<script src="services/apiService.js"></script>
</head>
<body data-ng-app="training" data-ng-controller="mainCtrl" ng-view>
.......
</body>
</html>
login.html
<button id="btn-login" class="btn btn-success " ng-href="#!/">Login </button>
Please remove ng-controller="mainCtrl" from your html, as you have already defined controller in $routeProvider config.
Please change your code like this.
.when('/',{
templateUrl: 'index.html',
controller: 'mainCtrl',
abstract: true,
})
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
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>