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>
Related
I have a project in Maven with angularJS routes; login.routes.js appears like this:
(function() {
"use strict";
angular
.module("app")
.config(['$stateProvider', loginConfig]);
function loginConfig($stateProvider) {
$stateProvider
.state("login", {
url: "/login",
templateUrl: "app/login/login.html",
controller: "LoginController",
controllerAs: "vm",
})
.state("logged", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope) {
$timeout(function() {
if ($cookies.get('user')) {
[...]
} else {
[...]
$state.go('login');
}
}, 0)
}
}
})
.state("logout", {
[...]
resolve: {
checkLogged: function($log, $timeout, $state, $cookies, $rootScope, $location) {
[...]
}
}
})
}
})();
I'm minifing all the angularJS files; actually, everything works minified but the routes.
Is there a way to make the code minifiable? I minified with success controllers using
angular
.module("app")
.controller("Controller", Controller);
Controller.$inject = ['$log',...];
Is there something like that, but for routes?
One way to do it is in the below example:
checkLogged: ['$log', '$timeout', '$state', '$cookies', '$rootScope',
function($log, $timeout, $state, $cookies, $rootScope) {
//code
}
] //<-- array
Wrap your function in an array and inject each AngularJs provider as a string. This should solve your minification issues.
Also this is an AngularJs question not Angular. You may want to update your tag.
Hope that helps.
edit: I'm using bootstrap, I think bootstrap tab is causing the
problem
View does not get updated after $scope variable update.
$scope.codeData
if i console the $scope.codeData, i can see the data, but does not render in view.
I have to click twice to get the view render correctly.
is there anything wrong with my code??
Thank you.
config
angular.module('SPAroutes', ['ngRoute', 'SPAcontrollers', 'SPAdirectives'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: 'templates/views/admin.html',
controller: 'adminCtrl',
controllerAs: 'admin'
})
$locationProvider.html5Mode(true).hashPrefix('!');
}]);
Controller.js
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
$scope.codeData = res.data;
console.log($scope.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
admin.html
{{codeData}}
You are mixing up controllerAs with scope as phil mentioned in his comment on question. Instead of using scope here store values insidethis reference something like this.
angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories', 'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window, $SPAaccount) {
var admin = this;
this.dataRetrive = function(category){
$http.get('/ctrls/get/blockCode/header').then(function (res){
admin.codeData = res.data;
console.log(admin.codeData);
$('#headerTab').tab('show');
}, function (err){
console.log(err);
})
};
}]);
and inside the view: admin.html
{{admin.codeData}}
here is working plunk for your refernce
I originally had my app set up with ng-route and I'm now switching over to ui-route. I used to use "when('/json/galleries/:projectId')" to generate a gallery when a thumbnail was clicked. Now with "state" I can't seem how to pass my projectId to the gallery state to generate my gallery.
App Module
(function() {
'use strict';
var bhamDesignsApp = angular.module('bhamDesignsApp', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ngMessages', 'ngAria', 'ui.router', 'mm.foundation', 'appControllers']);
bhamDesignsApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/home.html',
controller: 'ProjectsController'
})
.state('gallery', {
url: '/gallery/:projectId',
templateUrl: 'partials/gallery.html',
controller: 'GalleryController'
});
});
})();
App Controller
(function() {
'use strict';
var appControllers = angular.module('appControllers', []);
appControllers.controller('ProjectsController', ['$scope', '$http',
function ($scope, $http) {
$http.get('app/json/projects.json').success(function(data){
$scope.projects = data;
});
$scope.orderProp = '-year';
}]);
appControllers.controller('GalleryController', ['$scope', '$stateParams', '$http',
function($scope, $stateParams, $http) {
$http.get('app/json/galleries/' + $stateParams.projectId + '.json').success(function(data) {
$scope.gallery = data;
});
}]);
})();
HTML
.row
.small-12.medium-3.columns(ng-repeat="project in projects | orderBy:orderProp | filter:categoryFilter")
.tmbnail-container
a(ui-sref="gallery")
img.tmbnail(ng-src="{{project.thumbnail}}")
.text
h5 {{project.title}}
h6 {{project.year}}
.small-12.medium-6.columns
a(ui-sref="gallery")
You don't pass any ID to the state.
Change it to
a(ui-sref="gallery({projectId: project.id})"
(assuming project has an id field that holds its ID)
Documentation that explains how to use ui-sref: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref
I have a problem with the $elementProvider not being found if I try to define a controller on the $state, for example:
.state('tournament', {
url: '/tournament',
controller: 'TournamentController',
templateUrl: '/views/tournaments/index.html'
})
But it works fine if I do it in the template:
<div class="ui form segment" ng-controller="TournamentController">
Any ideas how to make it work with $state?
here is a working declaration of state routes:
var ConfEditorApp = angular.module('ConfEditorApp', ['ngAnimate', 'ui.router']);
ConfEditorApp.run(['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;
}]);
ConfEditorApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("Index")
$stateProvider
.state('Databases', {
url: '/Databases',
templateUrl: 'Partials/Databases.html',
controller: 'DatabasesSectionCtrl as databasesSection'
});
}]);
and here is the controller declaration:
ConfEditorApp.controller('DatabasesSectionCtrl', ['$state', '$stateParams', '$location', '$scope', '$http', '$window',
function ($state, $stateParams, $location, $scope, $http, $window) {
......
try to check if something is wrong in your code or provide more info so we can checkout
I cannot get access to methods in my Angular Factory? I get "TypeError: Object # has no method 'method1'" error. My angular app looks like this...
myApp.js
var myApp = angular.module('myAngApp', [])
myApp.config(function ($routeProvider, $httpProvider) {
$routeProvider
.when('/list',
{
controller: 'ListController',
templateUrl: 'partials/list.html'
})
.when('/reports/:reportId',
{
controller: 'DetailController',
templateUrl: 'partials/report.html'
})
})
factory.js
myApp.factory('factory1', function(){
var factory = {};
factory.method1 = function() {
console.log('method1');
}
factory.method2 = function() {
console.log('method2');
}
return factory;
});
ListController.js
function ListController($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}
ListController.$inject = ['$scope', '$location', '$http', '$route', '$rootScope', 'factory1'];
try this...
myApp.controller('ListController', [
'$scope',
'$location',
'$http',
'$route',
'$rootScope',
'factory1',
function ($scope, $location, $http, $route, $rootScope, factory1) {
factory1.method1();
}]);
instead of your current function ListController and the $inject statement
jsfiddle http://jsfiddle.net/NuCZz/