I tried to migrate my Angular app from using ngRoute to uiRoute. Everything works fine except the controllers. They simple don't load like they did with ngRoute and I don't get why. As I see it from uiRoute it should work like with ngRoute but it doesn't. There is no exception thrown. I also don't find any example for a similar configuration like mine although it's very simple. I home somebody can tell me where my controller is hiding.
http://plnkr.co/edit/VGyi3AxgslgpvwBCTkXI?p=preview
So as for ngRoute the controller should be accessible through 'homepage' but it looks like it's just empty :(
;(function(angular) {
'use strict';
angular
.module('MainRouter', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html'
}
},
controller: 'HomepageCtrl',
controllerAs: 'homepage'
});
}]);
})(angular);
When you use views option inside the state definition, then ui-router engine doesn't look for templateUrl & controller defined in state level, basically you need to provide controller & templateUrl value from the namedView definition only. In your case you should add controller in mainView definition object.
Code
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('home', {
url: '',
views: {
"mainView": {
templateUrl: 'home.html',
controller: 'HomepageCtrl',
controllerAs: 'homepage'
}
},
});
}]);
Demo Plunkr
Related
I'm triyng to build simple applications on Angular and Django rest framework.
I have a next root app:
app.js
angular
.module('sharePhotoApp', [
'ngRoute',
'sharePhotoApp.controllers',
'sharePhotoApp.services'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/',
controller: 'PostListController'
})
.when('/:username', {
templateUrl: '/user/',
controller: 'UserDetailController'
})
.otherwise({
redirectTo: '/'
});
}]);
And the next controller:
angular
.module('sharePhotoApp.controllers')
.controller('UserDetailController', UserDetailController)
UserDetailController.$inject = ['$scope','$routeParams','userService'];
function UserDetailController($scope, $routeParams, userService){
alert($routeParams.username);
$scope.user = userService.get({ username: $routeParams.username });
}
I tried to follow the next URL in browser: http://127.0.0.1:8000/user/#/admin
I suppose in this case should triggered route with username parameter.
But I've gotten undefined.
Could anyone explain where I done mistake?
"Note that the $routeParams are only updated after a route change
completes successfully. This means that you cannot rely on
$routeParams being correct in route resolve functions. Instead you can
use $route.current.params to access the new route's parameters."
https://docs.angularjs.org/api/ngRoute/service/$routeParams
Have you also installed ngRoute module?
As the description says, the route is not finished in your controller, so the params are also undefined.
$scope.$on('$routeChangeSuccess', function() {
// $routeParams should be populated here
});
should do the work.
router working within my Angular JS app. My code is:
Script:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
HTML:
<div ui-view></div>
app.js:
var myApp = angular.module('myApp', ['ui-router','mainControl','ui.bootstrap', 'ngSanitize']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/splash');
//
// Now set up the states
$stateProvider
.state('splash', {
url: '/splash',
templateUrl: 'partials/splash2.html',
controller: 'MainControl'
})
.state('advice', {
url: '/advice',
templateUrl: 'partials/advice.html',
controller: 'MainControl'
})
.state('main', {
url: '/main',
templateUrl: 'partials/main.html',
controller: 'MainControl'
})
});
I was has successfully integrated ngRoute into my project, but for some reason the routing was not working in Safari and IE, So this is why I am now trying to integrate the UI-router into my project so that I can successfully get the routing working within my Application.
Any help would be appreciated.
You are having typo, module name should be ui.router instead of ui-router while creating myApp module for your app.
Besides ui.router, you should add the js file for ngSanitize (<script src="angular-sanitize.js">)
I created a project using Yeoman (angular-fullstack). And now I would like to know how the change/set the main view to login.html. So normally when you start the application you first get the main view where you can chose to login or register. What I want is when the application start the page starts direct on the login.html
in your app.js file located at client\app\app.js, in the angular config add the following:
$stateProvider
.run(function ($state) {
$state.go('login');
});
So it should look like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.otherwise('/');
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
$stateProvider
.run(function ($state) {
$state.go('login');
});
})
I realize this has been out here for a while and you likely already have a good solution, but I was recently looking at this myself and see a couple options.
One, inside app.js you could add the following code snippet under $urlRouterProvider:
.when('/', '/login')
Making your full method be something like:
.config(function ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider) {
$urlRouterProvider
.when('/', '/login')
$locationProvider.html5Mode(true);
$httpProvider.interceptors.push('authInterceptor');
})
This would force anyone going to your base page url directly to login, unless they provide the full route to another page. However, if you intend to still use the main.html, you will then need to go into client/app/main/main.js and change the default route to:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
So main is reachable by appending /main to the url.
Which brings me to option 2: Go into the main.js file and switch it's url to '/main' and go into login.js and switch it's url to '/'. Then anyone navigating to your base page automatically goes to the login screen but the url is viewed as just your domain without any sub page.
So client/app/main/main.js becomes:
.state('main', {
url: '/main',
templateUrl: 'app/main/main.html',
controller: 'MainCtrl'
});
And client/app/account/account.js now contains:
.state('login', {
url: '/',
templateUrl: 'app/account/login/login.html',
controller: 'LoginCtrl'
})
I'm struggling a bit with having submodules in an Angular 1.3.9 app. I've got a (non-working, sorry) preview at http://plnkr.co/edit/XBfTPAGRRe0CWJgjGJzc?p=preview and I think it's freaking out, in part, because I'm using Restangular.
I have the following:
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
;
angular
.module('estimate.project', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider'
, function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('project', {
url: "/project/{id:int}",
abstract: true,
templateUrl: '/app/templates/project.html',
controller: "ProjectController as project",
resolve: { // stuff }
})
.state('project.overview', {
url: "",
templateUrl: "/app/templates/overview.html"
})
// ...
;
}])
.controller('ProjectController', ['$scope', 'ProjectService', 'myProject'
, function($scope, ProjectService, myProject) {
console.log('i made it!');
}]);
And in my template, which is served from the estimate module, I have:
<li><a ui-sref="project.overview({ id: 1 })">One</a></li>
The URL resolves correctly on the page, but clicking on it does nothing. It doesn't even throw any console errors - it just sits there. My gut tells me it has to do with how I'm referring to the controllers and/or the routes, and if they need to be prefixed or modified to work with a submodule. Any ideas on how to get it to load properly?
If this post is too scatterbrained, let me know and I'll try to clean it up.
I updated your plunker here and would say, that the most important change is - referencing sub-module in the main module:
Instead of this:
angular
.module('estimate', ['ui.router', 'restangular'])
...
angular
.module('estimate.project', ['ui.router'])
...
We have to use this, i.e. reference sub module in a parent module
angular
.module('estimate', ['ui.router', 'restangular', 'estimate.project'])
...
angular
.module('estimate.project', ['ui.router'])
...
With some few other small adjustments, that should be the way. Check it working here
so I want to load a templateUrl or, invoke $stateProvider on an action other than user input, like onEnter or onload, or just right away at the beginning of the app, but I can't seem to figure it out. Basically I have a simple nav, when clicked they load a partial which shows below the nav etc. I want to show an inital partial as soon as the app is invoked or loaded. below is a sample of my routing:
app.config(function($stateProvider, $urlRouterProvider){
$stateProvider
.state('page1', {
url: "/page1",
templateUrl: "partials/pag1.html"
})
.state('page1.stuff', {
url: "/page1stuff",
templateUrl: "partials/page1.stuff.html",
controller: someController
})
.state('page2', {
url: "/page2",
templateUrl: "partials/page2.html"
})
any help would be greatly appreciated.
If I understand you correctly you just need a default state
.state('home', {
url: '',
templateUrl: 'partials/home.html'
}