I have basic routing working, but when I try and include params in my routes, nothing renders inside my ngview
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.when('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'mainController'
})
});
myApp.controller('mainController',
['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {
$scope.name = "Chris";
alert($routeParams);
$scope.num = $routeParams.num;
$log.info($scope.num)
}]);
So when I try and access /second/:num nothing renders in my ngview. But if i do / or /second, those pages work properly
Hey you please check the controller in second.html page whether the controller is added or not and i suggest always use different controllers for each template.
Best way is use stateProvider easy and flexible than routeProvider both are same but stateProvider is more handy.
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($stateProvider) {
$stateProvider
.state('/', {
templateUrl: 'pages/main.html',
controller: 'mainController'
})
.state('/second/:num', {
templateUrl: 'pages/second.html',
controller: 'mainController'
})
});
myApp.controller('mainController', ['$scope', '$log', '$stateParams', function($scope, $log, $stateParams) {
$scope.name = "Chris";
alert($stateParams);
$scope.num = $stateParams.num;
$log.info($scope.num)
}]);
There must be something in the way you are declaring the path to your templates, or some kind of error in your console. Below is a repro of your code, with the html files in ng-templates:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'main.html',
controller: 'mainController'
})
.when('/second/:num', {
templateUrl: 'second.html',
controller: 'mainController'
})
});
myApp.controller('mainController', ['$scope', '$location', '$log', '$route', '$routeParams', function($scope, $location, $log, $route, $routeParams) {
$scope.name = "Chris";
$scope.num = $routeParams.num || 'not defined';
console.log($scope.num);
$scope.goTo = function(number) {
$location.path('/second/' + number);
};
$scope.route = $route.current;
$scope.goHome = function(number) {
$location.path('/');
};
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.4.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script data-require="angular-route#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
</head>
<body ng-controller="mainController">
<div ng-view></div>
<script type="text/ng-template" id="main.html">
<pre>route params: {{route.params}}</pre>
This is the main page, where $scope.num is {{ num }}
<ul>
<li ng-repeat="num in [0,1,2,3, 'zebra']">
<button ng-click="goTo(num)">{{ num }}</button>
</li>
</ul>
</script>
<script type="text/ng-template" id="second.html">
<pre>route params: {{route.params}}</pre>
This is the second page, where $scope.num is {{ num }}
<br>
<button ng-click="goHome()">Home</button>
</script>
</body>
</html>
Does anything jump out at you?
Related
I have a problem with the function $ locationProvider.html5Mode (true), this is the setting:
var app = angular.module("app", [
"ngRoute",
"ngAnimate"
]);
// ROUTE CONFIG
app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.
when("/archive", {
templateUrl: "archive.php",
controller: "archiveCtrl",
animate: "slide-left"
}).
when("/single", {
templateUrl: "single.php",
controller: "singleCtrl",
animate: "slide-left"
}).
otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
});
In the head tag:
<head>
<base href="/">
</head>
The root of the site is
site.com/main.php
Where main.php contains the div ng-view
Any idea why it does not work?
here is a working example I created on JSFiddle, I removed the templateUrl and use template instead, but it shouldn't matter in this case(you are asking how does html5mode and base work)
html
<div ng-controller="mainCtrl">
single
archive
<div ng-view></div>
</div>
Javascript
var app = angular.module("myApp", [
"ngRoute"
])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/archive", {
template: "<p>archive</p>"
})
.when("/single", {
template: "<p>single</p>"
})
.otherwise({
redirectTo: "/archive"
});
$locationProvider.html5Mode(true);
}])
.controller("mainCtrl", function mainCtrl($scope, $location) {
$scope.$location = $location;
});
JSFiddle
i want when user click on someone user ,show new view for that information.
I have two controlles,first get list of user,and it is work fine,but second controller have function which hava param of users id,but they show blank page.I realy don t know how to redrect view from second controller method.
This is my code:
<html>
<head>
<title>Angular JS Views</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.js"></script>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "app">
<p>view Students</p>
<p>View Student</p>
<div ng-view></div>
<script type = "text/ng-template" id = "viewStudents.htm">
<ul ng-repeat="entry in pacijenti">
<li>{{ entry.ime }}</li>
<li>{{entry.prezime}}</li>
<li>{{entry.jmbg}}</li>
<button type="button" ng-click="getP(entry.jmbg)" >
</button>
<a ng-href='#viewStudent' ng-click="myCtrl.getP(entry.jmbg)" >click me</a>
</ul>
</script>
<script type = "text/ng-template" id = "viewStudent.htm">
<ul ng-repeat="entry2 in pac">
<li>{{entry2.dijagnoza}}</li>
<li>{{entry2.bolest}}</li>
link1
</ul>
</script>
</div>
<script>
var app = angular.module("app", ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'HomeController'
}).
when('/viewStudent', {
templateUrl: 'viewStudent.htm',
controller: 'myCtrl'
}).
otherwise({
redirectTo: '/viewsStudents'
});
}]);
app.factory('photos', ['$http', function($http) {
return $http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti")
.success(function(response) {
return response;
})
.error(function(response) {
return response;
});
}]);
app.controller('HomeController', ['$scope', 'photos', function($scope, photos) {
$scope.pacijenti=this;
photos.success(function(response) {
$scope.pacijenti =response;
});
}]);
app.controller('myCtrl', function($scope, $http) {
$scope.pac=this;
$scope.getP=function(jmbg){
$http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
.then(function(response) {
$scope.pac = response.data;
}, function(response) {
$scope.pac = "Something went wrong";
});
};
});
</script>
</body>
</html>
Modify your route to accept a jmbg id:
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/viewStudents', {
templateUrl: 'viewStudents.htm',
controller: 'HomeController'
}).
when('/viewStudent/:jmbg', {
templateUrl: 'viewStudent.htm',
controller: 'myCtrl'
}).
otherwise({
redirectTo: '/viewsStudents'
});
}]);
Then in the controller, retrieve the jmbg id:
app.controller('myCtrl', function($scope, $http, $routeParams) {
$scope.pac = this;
$scope.jmbg = $routeParams.jmbg;
$scope.getP = function(jmbg){
$http.get("http://localhost:8080/mavenproject2/fizijatar/12345/pacijenti/"+jmbg+"/pregledi")
.then(function(response) {
$scope.pac = response.data;
}, function(response) {
$scope.pac = "Something went wrong";
});
// Call the getP function with the jmbg id
$scope.getP($scope.jmbg);
};
});
The link to open the student view would look like this:
<a ng-href="#viewStudent/{{entry.jmbg}}">click me</a>
Here is a working plunker example: https://plnkr.co/edit/99aDJkuvIDopNoILNFGB?p=preview -- Please note, I removed the photo factory usage, and instead hard coded example data.
I'm trying to link to a different page/view via ng-click and a function inside my controller. I don't do it with href because later it should be a right-click-event. But my code doesn't work. I've tried very much, and searched alot of pages but I can't find any solution. Thanks for your help :)
game.html
<div class="container" ng-controller="MainController">
<div class="handcards" ng-repeat="card in stdCards">
<a ng-click="goToCardDetail()" href="">{{ card.name }}</a>
</div>
</div>
MainController.js
app.controller('MainController', ['$scope', 'stdcards', '$location', function($scope, stdcards, $location) {
stdcards.success(function(data) {
$scope.stdCards = data;
});
$scope.goToCardDetail = function() {
$location.path('#/cards/0');
};
}]);
app.js
'use strict';
var app = angular.module('myApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainController',
templateUrl: 'templates/game.html'
})
.when('/cards/:id', {
controller: 'CardController',
templateUrl: 'templates/card.html'
})
.otherwise({
redirectTo: '/'
});
});
You don't need to include the # when you are calling $location.path(). So it should just be
$location.path('/cards/0');
var myapp = angular.module('myApp', []);
myapp .config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/login', {
templateUrl: 'static/lib/templates/login.html',
controller: 'Ctrl'
}).
otherwise({
redirectTo: '/addOrder'
});
}]);
My HTML:
<body ng-controller="Ctrl" >
.....
</body>
I am getting an error saying that my controller is not defined.
Is your Ctr defined in js file? Typically something like...
var app = angular.module('myAPP', ['ngResource', 'ngRoute']);
app.controller('Ctrl', function ($scope, $http) {
console.log("a login ctrl....");
});
Make sure you are including the Ctrl script in your HTML:
<script src="login.controler.js"></script>
I use routeProvider in Angular JS:
.when('/chat/dialog/:id', {
controller: 'ChatController'
});
In controller I have:
if($routeParams.id) {
alert('ok');
}
And my URL looks like as:
http://site-dev.com/chat/dialog/1
Link is:
Why does not work routing in Angular JS?
Controller:
.controller('ChatController', ['$scope', '$sce', '$http', '$location', '$anchorScroll', '$timeout', '$routeParams', function ($scope, $sce, $http, $location, $anchorScroll, $timeout, $routeParams, ) {
if($routeParams.id) {
alert('ok');
}
}])
Routing:
.config(function ($locationProvider, $routeProvider) {
$routeProvider
.when('/profile/personal/:type', {
templateUrl: '/public/html/personal.html',
controller: 'EditProfileController'
})
/* Chat */
.when('/chat/dialog/:id', {
controller: 'ChatController'
});
})
Try to add into head tag <base href="/">, like this:
<head>
<base href="/">
</head>