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
Related
I have a problem with migrating from ngroute to ui.router:
using ngroute i have couple angular files:
module.js
angular.module('betTogether', ['ngRoute']);
route.js
angular.module('betTogether').config(['$routeProvider',
function (
$routeProvider
) {
$routeProvider.
when('/descriptionBets', {
templateUrl: 'descriptionBets',
controller: 'descriptionBetsCtrl'
}).
when('/normalBets', {
templateUrl: 'normal',
controller: 'normalBetsCtrl'
}).
when('/addBet', {
templateUrl: 'addBet',
controller: 'addBetCtrl'
}).
otherwise({
redirectTo: '/descriptionBets'
});
}]);
normalBets.js
angular.module('betTogether').controller('normalBetsCtrl', [
'$scope','$http',
function($scope,$http){
$scope.typeBetsImages = [{link: "images/basketball.png", title:"basketball"},
{link: "images/tenis.png", title: "tenis"},
{link: "images/volleyball.png", title: "volleyball"},
{link: "images/football.png", title:"football"}
];
$http.get("/normalBets").success(function(data){
$scope.normalBets = data;
});
}]);
...and rest of controllers. And everything works ok.
Now i want to migrate to ui-router. so i change module.js and route.js like that:
module.js
angular.module('betTogether', ['ui.router']);
route.js
angular.module('betTogether').config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
// For any unmatched url, send to /business
$urlRouterProvider.otherwise("/descriptionBets")
$stateProvider
.state('descriptionBets', {//State demonstrating Nested views
url: "/descriptionBets",
templateUrl: "descriptionBets",
controller: "descriptionBetsCtrl"
})
.state('normalBets', {//nested state [products is the nested state of business state]
url: "/normalBets",
templateUrl: "normal",
controller: "normalBetsCtrl"
})
.state('addBet', {//nested state [services is the nested state of business state]
url: "/addBet",
templateUrl: "addBet",
controller: "addBetCtrl"
});
}]);
and it doesnt work. i have error:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.10/$injector/nomod?p0=betTogether angular.min.js:6:417
... and it is for 1st line of each controllers.
Someone could help me?
PS: sorry for my english, hope You understand all.
Check the order of your <script> imports in your index.html. The likelihood is that you've included the ui-router module after your betTogether module whereas it should come before it because betTogether depends on ui.router.
So I am using ui-view to route me to a partial.
//route.provider.js
(function() {
'use strict';
angular
.module('app')
.provider('RouteService', RouteService);
RouteService.$inject = ['$stateProvider', '$urlRouterProvider'];
function RouteService ($stateProvider, $urlRouterProvider) {
var service = {};
this.$get = function() { return service; };
this.initialize = function() {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'viewModel'
})
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'login/login.view.html',
controllerAs: 'viewModel'
})
//TODO Impliment the following partial pages...
.state('gensim', {
url: '/gensim',
templateUrl: 'general-simulation/simulation.view.html',
controller: 'TabsController',
controllerAs: 'tabs'
})
<...more routes...>
}
}
})();
The issue I am having is once it routes to
// general-simulation/simulation.view.html
I'd like it to use a custom directive to insert more html into the page.
Inside simulation.view.html I have this.
<div class="container">
<div class="row center">
<div class="col-xs-12">
<h1>General Simulation</h1>
<gs-tabs><h1>TEST!!!!</h1></gs-tabs>
</div>
</div>
</div>
The directive is constructed in
// tabs.directives.js
(function(){
'use strict';
angular
.module('app')
.directive('gsTabs', gsTabs);
function gsTabs () {
return {
restrict: "E",
templateURL: 'tabs.view.html'
};
}
})();
Finally, my tabs.view.html looks like this.
<h1>YOU HAVE ENTERED TABS PARTIAL</h1>
When I navigate to the page that displays simulation.view all I can see is:
General Simulation
TEST!!!!
So what am I doing wrong here. I checked for camelCasing and the page is not showing in errors. Any help would be greatly appreciated!
Update:
I viewed the network calls in chrome's dev tools.
simulation.view.html is being loaded but tabs.view.html isn't.
Request URL:http://sdc-stagt01/AngularJS/general-simulation/simulation.view.html
Request Method:GET
Status Code:200 OK
Remote Address:10.19.8.96:80
The file substructure is:
/general-simulation/tabs/tabs.controller.js
/general-simulation/tabs/tabs.directives.js
/general-simulation/tabs/tabs.view.html
/general-simulation/simulation.view.html
putting comment as answer
change templateURL to templateUrl
So entre's comment was a big help. That got chrome dev to start spitting out errors.
charlietfl Was on the right track with mentioning my file structure as well. I needed to change my directive to look like this:
templateUrl: 'general-simulation/tabs/tabs.view.html'
Thank you!
You have a typo here. templateUrl not templateURL
function gsTabs () {
return {
restrict: "E",
templateURL: 'tabs.view.html' // change this to templateUrl
};
}
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 have the following Angular Module, Routes and Controllers inside my index.js file. Nothing complex. So far I load this one javascript file into my Index.html file and everything work fine so far as I have the ng-app & ng-view in the Index.html file. Simple enough
// /ng-modules/render-index.js
angular
.module("homeIndex", ["ngRoute"])
.config(config)
.controller("homeController", homeController)
.controller("aboutController", aboutController);
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/ng-templates/homeView.html",
controller: "homeController",
controllerAs: "vm"
})
.when("/about", {
templateUrl: "/ng-templates/aboutView.html",
controller: "aboutController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
};
function homeController() {
var vm = this;
vm.title = "Home Page";
};
function aboutController() {
var vm = this;
vm.title = "About Us";
};
Now I understand that to break this apart at this point in time would be silly because if this was all I was using angular for, why not just keep it all in one javascript file. Understood, But I want to know how to separate these things properly at this level so that I have a basic understanding.
Here is what I want to do. I want to separate the two controllers (homeController & aboutController) to their own files. I also want to know what to do with the routes. DO they get moved into their own javascript file, do they stay in the index.js file? I want to assume that these two controllers will eventually do something complex and therefore I am separating them now.
QUESTION:
Using the (Controller as syntax) How exactly do I do this and what does the index.js file look like and the two home.js and about.js files look like when they have been separated?
What I have tried:
I have tried to put each controller into their own file and inject them into the index.js file
angular
.module("homeIndex", ["ngRoute", "homeController", "aboutController])
I had left the routing inside that file. FOr some reason I was either using the wrong syntax or doing it wrong.
What you tried don't work because you are trying to load controllers as module dependency.
You can split the files like this and add all of them in your index.html
// index.js
angular
.module("homeIndex", ["ngRoute"]);
//route.js
angular
.module("homeIndex")
.config(config);
function config($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "/ng-templates/homeView.html",
controller: "homeController",
controllerAs: "vm"
})
.when("/about", {
templateUrl: "/ng-templates/aboutView.html",
controller: "aboutController",
controllerAs: "vm"
})
.otherwise({ redirectTo: "/" });
};
// homeController.js
angular
.module("homeIndex")
.controller("homeController", homeController)
function homeController() {
var vm = this;
vm.title = "Home Page";
};
// aboutController.js
angular
.module("homeIndex")
.controller("aboutController", aboutController);
function aboutController() {
var vm = this;
vm.title = "About Us";
};
I am trying to do what was essentially answered here Unable to open bootstrap modal window as a route
Yet my solution just will not work. I get an error
Error: [$injector:unpr] Unknown provider: $modalProvider <- $modal
My app has the ui.bootstrap module injected - here is my application config
var app = angular.module('app', ['ui.router', 'ui.bootstrap','ui.bootstrap.tpls', 'app.filters', 'app.services', 'app.directives', 'app.controllers'])
// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
controller: 'HomeCtrl'
})
.state('transactions', {
url: '/transactions',
templateUrl: '/views/transactions',
controller: 'TransactionsCtrl'
})
.state('login', {
url: "/login",
templateUrl: '/views/login',
controller: 'LoginCtrl'
})
.state('otherwise', {
url: '*path',
templateUrl: '/views/404',
controller: 'Error404Ctrl'
});
$locationProvider.html5Mode(true);
}])
I have reduced my controller to the following:
appControllers.controller('LoginCtrl', ['$scope', '$modal', function($scope, $modal) {
$modal.open({templateUrl:'modal.html'});
}]);
Ultimately, what I am hoping to achieve is when login is required not actually GO to the login page, but bring up a dialog.
I have also tried using the onEnter function in the ui-router state method. Couldn't get this working either.
Any ideas?
UPDATE
Ok - so as it turns out, having both ui-bootstrap.js AND ui-bootstrap-tpls breaks this - After reading the docs I thought you needed the templates to work WITH the ui-bootstrap. though it seems all the plunkers only load in the ..tpls file - once I removed the ui-bootstrap file my modal works...Am i blind? or doesn't it not really say which one you need in the docs on github? -
Now i just need to figure out how to prevent my url from actually going to /login, rather than just show the modal :)
update 2
Ok, so by calling $state.go('login') in a service does this for me.
Hi I had a hard time getting through the similar problem.
However, I was able to resolve it.
This is what you would probably need.
app.config(function($stateProvider) {
$stateProvider.state("managerState", {
url: "/ManagerRecord",
controller: "myController",
templateUrl: 'index.html'
})
.state("employeeState", {
url: "empRecords",
parent: "managerState",
params: {
empId: 0
},
onEnter: [
"$modal",
function($modal) {
$modal.open({
controller: "EmpDetailsController",
controllerAs: "empDetails",
templateUrl: 'empDetails.html',
size: 'sm'
}).result.finally(function() {
$stateProvider.go('^');
});
}
]
});
});
Click here for plunker. Hope it helps.
I'm working on something similar and this is my solution.
HTML code
<a ui-sref="home.modal({path: 'login'})" class="btn btn-default" ng-click="openModal()">Login</a>
State configuration
$stateProvider
// assuming we want to open the modal on home page
.state('home', {
url: '/',
templateUrl: '/views/index',
controller: 'HomeCtrl'
})
// create a nested state
.state('home.modal', {
url: ':path/'
});
Home controller
//... other code
$scope.openModal = function(){
$modal.open({
templateUrl: 'path/to/page.html',
resolve: {
newPath: function(){
return 'home'
},
oldPath: function(){
return 'home.modal'
}
},
controller: 'ModalInstanceController'
});
};
//... other code
Finally, the modal instance controller.
This controller synchronizes the modal events (open/close) with URL path changes.
angular.module("app").controller('ModalInstanceController', function($scope, $modalInstance, $state, newPath, oldPath) {
$modalInstance.opened.then(function(){
$state.go(newPath);
});
$modalInstance.result.then(null,function(){
$state.go(oldPath);
});
$scope.$on('$stateChangeSuccess', function () {
if($state.current.name != newPath){
$modalInstance.dismiss('cancel')
}
});
});
You may create a state with the same templateUrl and controller as your page where you want to show the modal, adding params object to it
$stateProvider
.state('root.start-page', {
url: '/',
templateUrl: 'App/src/pages/start-page/start-page.html',
controller: 'StartPageCtrl'
})
.state('root.login', {
url: '/login',
templateUrl: 'App/src/pages/start-page/start-page.html',
controller: 'StartPageCtrl',
params: {
openLoginModal: true
}
})
And in controller of the page, use this parameter to open the modal
.controller("StartPageCtrl", function($scope, $stateParams) {
if ($stateParams.openLoginModal) {
$scope.openLoginModal();
}
I found a handy hint to get this working. There are probably caveats, but it works for me. You can pass a result still but I have no need for one.
Using finally instead of the then promise resolve sorted this for me. I also had to store the previous state on rootScope so we knew what to go back to.
Save previous state to $rootScope
$rootScope.previousState = 'home';
$rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams){
$rootScope.previousState = from.name;
})
State using onEnter
$stateProvider.state('contact', {
url: '/contact',
onEnter: function ($state, $modal, $rootScope){
$modal.open({
templateUrl: 'views/contact.html',
controller: 'ContactCtrl'
}).result.finally(function(){
$state.go($rootScope.previousState);
})
}
});