My view is outputting {} instead of the desired $scope value. See code below:
app.js:
angular
.module('tbsmapApp', [
'ngAnimate',
'ngRoute',
'firebase'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl',
controllerAs: 'main'
})
.when('/country/:country', {
templateUrl: 'views/country.html',
controller: 'CountryCtrl',
controllerAs: 'country'
})
.otherwise({
redirectTo: '/'
});
});
country.js:
angular.module('tbsmapApp')
.controller('CountryCtrl', function ($scope, $firebaseObject, FirebaseRef, $routeParams) {
$scope.country = $routeParams.country;
});
The view:
<h1>Top Sites by Traffic in <span>{{country}}</span></h1>
Any idea why this is happening? I am running jVectorMap in the application. That wouldn't have anything to do with it - would it?
Related
I have index file
<div ng-app="myApp" data-ng-init="init()">
<ng-view></ng-view>
</div>
script looks like this
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
$scope.init=function(){
alert('executing the init function')
}
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})
the first time the path is /home/ the alert is triggered.but from the menu controller when the variable var1 is true then path is changed to /home/ again but the init function is not running and alert is not triggered. how can this be fixed. i want the init in homecontroller to run everytime the path is changed to /home/
You can try this. It might work.
var app = angular.module('myApp', ['ngRoute'])
app.config(function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider
.when('/home/',
{
template: 'home.html',
controller: 'homeController'
}) .
when('/menu/',
{
templateUrl: 'menu.html',
controller: 'menuController'
})
app.controller('homeController',function($scope,$rootScope){
var init=function(){
alert('executing the init function')
};
init();
})
app.controller('menuController',function($scope,$location){
if($scope.var1){
$location.path('/home/')
}
})
Yo everyone.
I searched how to remove the hash(#) from the routing (source: AngularJS routing without the hash '#') but I encountered a problem.
I'll explain.
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: TestCtrl,
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: PageCtrl,
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
For the first redirection
- I've got something like : www.my-website.com/test
all is working fine.
For the second :
- www.my-website.com/test/hello
and here, there is a prob, when I put more than one " / " in the route, no page is loaded and I've got two
Failed to load resource: the server responded with a status of 404
(Not Found)
in my console.
One called : www.my-website.com/test/page.html and the other : www.my-website.com/test/hello
Hope someone can help me. Thanks in advance.
Angular 1.4.x requires that 'ngRoute' be included in the module to use $routeProvider and $locationProvider so include it as a <script...>:
angular-router (see here).
I am assuming you see something like:
To include it in your module:
var app = angular.module('someModule', ['ngRoute']);
And the controller needs to be in quotes controller: 'someCtrl' like:
$locationProvider.html5Mode(true);
$routeProvider
.when('/test', {
controller: 'TestCtrl',
templateUrl: 'test.html'
})
.when ('/test/:idPage', {
controller: 'PageCtrl',
templateUrl: 'page.html'
})
.otherwise({ redirectTo: '/test' });
Here is an example that I put together: http://plnkr.co/edit/wyFNoh?p=preview
var app = angular.module('plunker', ['ngRoute']);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/hello/:idHere', {
templateUrl: 'resolveView.html',
controller: 'helloCtrl',
resolve: {
exclamVal: function(){
return '!!!!!!!!!!'
}
}
})
.when('/default', {
templateUrl: 'default.html',
controller: 'defaultCtrl'
})
.when('/test', {
controller: 'testCtrl',
templateUrl: 'test.html'
})
.otherwise({ redirectTo: '/default' });
$locationProvider.html5Mode(true);
}]);
app.controller('MainCtrl', function($scope, $location, $routeParams) {
});
app.controller('testCtrl', function($scope, $routeParams) {
console.log('hi')
});
app.controller('defaultCtrl', function($scope, $routeParams) {
console.log('Inside defaultCtrl')
});
app.controller('helloCtrl', function($scope, exclamVal, $routeParams) {
$scope.exclamVal = exclamVal;
$scope.myVar = $routeParams.idHere;
});
When using parameters in ngRoute and accessing the URL directly (not through a link inside the site), the CSS does not load. All my routes work perfectly except for /chef/:id. I used yeoman's angular generator, and I'm running things using grunt serve.
Here's my Route code:
angular
.module('agFrontApp', [
'configuration',
'LocalStorageModule',
'ngCookies',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../views/main_view.html',
controller: 'MainCtrl',
controllerAs: 'MainCtrl',
})
.when('/login', {
templateUrl: '../views/login_view.html',
controller: 'LoginCtrl',
controllerAs: 'login',
})
.when('/chefs', {
templateUrl: '../views/chef_list_view.html',
controller: 'ChefListController',
controllerAs: 'chefs',
})
.when('/chef/:id', {
templateUrl: '../views/chef_detail_view.html',
controller: 'ChefDetailController',
controllerAs: 'chef'
})
.when('/receitas', {
templateUrl: '../views/recipe_list_view.html',
controller: 'RecipeListController',
controllerAs: 'recipe'
})
.when('/perfil', {
templateUrl: '../views/perfil_view.html',
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
And here's the controller for /chef/:id:
'use strict';
(function() {
function ChefDetailController($routeParams, $scope, $log, Chefs) {
var vm = this;
Chefs.getChef($routeParams.id)
.then(function(data) {
$log.log('success');
})
.fail(function(data) {
$log.log('something went wrong');
});
}
angular.module('agFrontApp')
.controller('ChefDetailController',
[ '$routeParams', '$scope', '$log', 'Chefs', ChefDetailController]);
})();
What am I doing wrong?
Edit:
Here's chef_detail_view.html: http://pastebin.com/bL5ST01N
You're very likely loading your CSS using a relative url like so
<link rel="stylesheet" href="styles/style.css" />
The problem is in html5mode your chef url is /chef/123 So the browser is trying to load your CSS from
/chef/styles/style.css You'll want to either turn off html5mode or change your stylesheet href to be root relative (e.g. /styles/style.css)
I'm trying to use angular-route, but when I change the div tag from <div ng-include="'views/main.html'" ng-controller="MainCtrl"></div> to <div ng-view></div> that tag is suddenly empty.
The app.js code I have is:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/'
});
});
and the html pages and controllers are made, but pretty much empty, save some placeholder stuff.
I'm not 100% sure how I'm supposed to include the angular-route code, but what I have seems to be working.
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.20/angular-route.js"></script>
you app.js should be like this:
angular .module('testApp', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider
.when('/main', {
templateURL:'views/main.html',
controller: 'MainCtrl'
})
.when('/adoption', {
templateURL: 'views/foo.html',
controller: 'fooCtrl'
})
.otherwise({
redirectTo: '/main'
});
});
I am trying to implement html5's pushstate instead of the # navigation used by Angularjs. I have tried searching google for an answer and also tried the angular irc chat room with no luck yet.
This is my controllers.js:
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function(data) {
$scope.phones = data;
});
}
function PhoneDetailCtrl($scope, $routeParams) {
$scope.phoneId = $routeParams.phoneId;
}
function greetCntr($scope, $window) {
$scope.greet = function() {
$("#modal").slideDown();
}
}
app.js
angular.module('phoneapp', []).
config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}])
Inject $locationProvider into your config, and set $locationProvider.html5Mode(true).
http://docs.angularjs.org/api/ng.$locationProvider
Simple example:
JS:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
HTML:
Page 1 | Page 2