$routeProvider
.when('/default', {
templateUrl: 'HTML/login.html',
controller : 'funct2'
}).when('/adminMenu/:username', {
templateUrl: 'HTML/adminMenu.html',
controller : 'admin'
}).otherwise({
redirectTo : '/default'
});
When i try to use the controller adminMenu i get a no adminMenu defined even though its defined with in the js files linked to adminMenu.html.
When going to the individual adminMenu.html page it loads, however when specifying the controller in routeProvider it never loads. Any ideas?
if you defined your controller like this:
function MyCtrl($scope) {
}
You will have to specify your controller like this (without the quotes):
.when('/default', {
templateUrl: 'myCtrl.html',
controller : MyCtrl
})
Related
If we edit the URL forcefully the web page shows the same content with different URL.
For example http://www.example.com/# and http://www.example.com/#/abc serves same content.
Wants to Redirect edited URL on Home page every time show correct path in URL.
.state('system.confirmation', {
url: '/confirmation',
templateUrl: 'tpls/views/system/confirmation/confirmation.html',
controller: 'ConfirmationController',
controllerAs:'confirmationController',
}
What you're looking for is the otherswise() function. Try adding this in your config function:
$urlRouterProvider.otherwise('/')
This will make sure that all uncaught routes will be redirected to your base URL.
$rootScope.$on('$routeChangeStart', function (event, next, last) {
console.log(event, next, last)// get all info, about current controller
$scope.someFunction();
});
You can do everything with this, before change any routes, this function will call, there you can check for something you are talking about.
try this
App.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/index', {
templateUrl : 'views/site/index.html',
controller : 'indexController'
})
// route for the about page
.when('/about', {
templateUrl : 'views/site/about.html',
controller : 'aboutController'
})
.when('/404', {
templateUrl : 'views/site/404.html',
controller : '404Controller'
})
.when('/signup', {
templateUrl : 'views/site/signup.html',
controller : 'signupController'
})
.when('/forgotPass', {
templateUrl : 'views/site/forgotPassword.html',
controller : 'forgotPassController'
})
.when('/login', {
templateUrl : 'views/site/login.html',
controller : 'loginController'
}).otherwise({
redirectTo: '/404'
});;
});
App.controller('404Controller',['$scope', function($scope) {
$scope.message = 'Page not found 404.';
}]);
i'm investigating if i can have what the title says.
Here's my thought.
Let's assume that i've got this routes:
.when('/', {
templateUrl : 'partials/homepage.html',
})
.when('/test', {
templateUrl : 'partials/test.html',
})
.when('/page/:pageID', {
templateUrl : 'partials/page.html',
})
.when('/page/single/:pageID', {
templateUrl : 'partials/page-single.html',
})
Until now i had the opportunity to add the templateUrl as also the controller details in the route and everything was working just fine.
Now the app is changed and there is only one controller with all the information needed and must remain one controller. And the routes will be something like that:
.when('/:templateName/:pageID', {
controller: 'myCtrl'
})
Can i set from the controller the template id by getting the templateName parameter? And if so how about the last route example /page/single/:pageID? How can i know that there is a second option in route?
I can take the templateName parameter and see it changing with the $routeChangeSuccess method but i cannot find any way to set the template on the fly.
Any ideas?
One solution could be the following one:
angular.module('myapp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/:templateName/:pageId', {
templateUrl: function(urlattr){
return '/pages/' + urlattr.templateName + '.html';
},
controller: 'YourCtrl'
});
}
]);
From the AngularJs 1.3 Documentation:
templateUrl – {string|function()} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
Array.<Object> - route parameters extracted from the current $location.path() by applying the current route
I would move your singleton logic from your controller to a service. Since you didn't provide much code below is an example to give you an idea how it could work.
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'partials/homepage.html',
controller: 'SingleController'
})
.when('/test', {
templateUrl: 'partials/test.html',
controller: 'SingleController'
})
.when('/page/:pageId', {
templateUrl: 'partials/page.html',
controller: 'SingleController'
});
});
app.provider('appState', function() {
this.$get = [function() {
return {
data: {}
};
}];
});
app.controller('SingleController', function ($scope, appState) {
$scope.data = appState.data;
});
But if it must be a singleton controller you actually could use the ng-controller directive before your ng-view directive so it becomes a $rootScope like scope for all your views. After that just add empty function wrappers in your $routeProvider for the controllers.
I'm developping an ionic application and when using angular for login my controller is called twice,
I've looked through all the others similar questions but didn't find a solution .
The problem is even when I remove the ng-controller="LoginCtrl as lgnCtrl"
I get my controller called once but without two-way databinding.
here is my route file :
$stateProvider
.state('login', {
url: "/login",
views: {
'main': {
templateUrl: "app/user/loginView.html",
controller: "LoginCtrl",
controllerAs: "lgnCtrl"
}
}
})
$urlRouterProvider.otherwise('/login');
here is my controller
angular.module('starter.controllers')
.controller('LoginCtrl', LoginCtrl);
function LoginCtrl($state, $storage, $translate, $ionicPopup, LoginService, messageService) {
var lgnCtrl = this;
console.log("user dash 1zz");
return lgnCtrl;
}
and here is my views:
loginView.html :
<ion-view view-title="loginView" id="signinBlk">
<ion-content>
<div class="list list col span_1_of_2 " ng-controller="LoginCtrl as lgnCtrl">
</div>
</ion-content>
</ion-view>
index.html:
<body ng-app="starter">
<ion-nav-view name="main"></ion-nav-view>
</body>
if you already define your controller in route you dont need to define controller in html template remove the ng-controller attribute with value form html template then run it will run just once
Instead of having this
ng-controller="LoginCtrl as lgnCtrl"
in html, we can have this in the controller when the route is defined with a controller, for example in the controller, it will go like this
$routeProvider
.when("/", { templateUrl: "views/abc.html", controller: "LoginCtrl as lgnCtrl", caseInsensitiveMatch: true });
it worked like a charm
the functions in the controller are only called once.
I have a route like this:
$routeProvider.when('/test/item/:item', {
templateUrl: '/test/test.html'
, controller: 'TestController'
});
Now I want to load different templateUrl depending on different :item value, How do I do it in angularJS?
for example:
$routeProvider.when('/test/item/:1', {
templateUrl: '/test/test1.html'
, controller: 'TestController'
});
$routeProvider.when('/test/item/:2', {
templateUrl: '/test/test2.html'
, controller: 'TestController'
});
Thanks in advance.
templateUrl can be a function as well and you get the first argument will be route params:
So you can do something like this:-
$routeProvider.when('/test/item/:item', {
templateUrl: function(param){
return '/test/test' + param.name + '.html'
/*if(param.name === 'somevalue'){
return someurl;
}
return someotherurl;*/
}
, controller: 'TestController'
});
templateUrl – {string=|function()=} – path or function that returns a path to an html template that should be used by ngView.
If templateUrl is a function, it will be called with the following parameters:
{Array.} - route parameters extracted from the current $location.path() by applying the current route
I'd like to load a view with template/controller configured in a ui-router state, but the controller doesn't seem to get loaded, no matter what I try, without any error messages.
module App {
var dependencies = [
"ui.router",
Controllers
]
function configuration($stateProvider: ng.ui.IStateProvider) {
$stateProvider
.state("test", {
url: "/test",
views: {
"": { templateUrl: "parentView.html" },
"testPartial#" : {
templateUrl: "partial.html",
controller: <--- see below
...
}
...
}
What I tried:
controller: Controllers.TestController
controller: App.Controllers.TestController
controller: "App.Controllers.TestController"
controller: "App.Controllers.ITestController" (interface)
However, if I declare ng-controller="App.Controllers.TestController as vm" on my template, everything works flawlessly.
Given what works on ng-controller, controller: "App.Controllers.TestController" is guaranteed to work.
The isse is with the as vm portion being missing. You can overcome that by putting the controller on the scope: https://youtube.com/watch?v=WdtVn_8K17E&hd=1