I'm stuck with routeProvider. my links keep opening a new page instead of loading the template in the view.
My code is the following
raceApp.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/createchallenge', {
templateUrl: 'raceApp/createChallenge_view.php',
controller: 'createChallenge'
})
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
.otherwise({
redirectTo: '/'
});
}]);
My HTML looks like
<base href="/runkinlocal/wp-content/themes/wordpress-bootstrap-master/" />
<a class="menu-item select-runner0" href="#/createChallenge">
<a class="menu-item select-runner0" href="#/findchallenge">
When the page loads, the initial template is loaded, but then when I click on one of the links, a new page loads instead of loading the template in the view
( the page looks like http://test.com:8888/runkinlocal/wp-content/themes/wordpress-bootstrap-master/#/createChallenge)
I am working with Wordpress.
I'm looking forward to your help!
Working Example
plnkr
Suggestions
1. Your hrefs should not have #/
Create |
Find
2. Otherwise doesn't need redirectTo
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html'
})
.when('/createChallenge', {
templateUrl: 'create.php',
controller: 'CreateChallengeController'
})
.when('/findChallenge', {
templateUrl: 'find.php',
controller: 'FindChallengeController'
})
.otherwise("/");
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
3. Extra comma after last .when()
You have:
.when('/findchallenge', {
templateUrl: 'raceApp/findChallenge_view.php',
//controller: 'findChallenge'
})
The controller is commented out but there is still a comma.
4. You might need to configure html5
(see script.js in the plnkr)
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
5. You can add the base href like so
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
Relevant Resources
I suggest checking these out:
$routeProvider docs
$route example
Let me know if that works!
Related
I am using $stateprovider to navigate between pages I had given $state.go('view1') to go to view1.html:
config(['$qProvider','$stateProvider','$locationProvider', '$routeProvider', function($qProvider,$stateProvider,$locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$stateProvider
.state('index', {
url: '/',
templateUrl: 'index.html'
})
.state('view1', {
url: '/view1',
templateUrl: 'view1/view1.html',
controller:'View1Ctrl'
})
.state('view2', {
url: '/view2',
templateUrl: 'view2/view2.html'
});
$routeProvider.otherwise({redirectTo: '/'});
$qProvider.errorOnUnhandledRejections(false);
}])
Function using $state:
controller("appcontroller",['$scope','$state','$stateParams',function($scope,$state,$stateParams,$rootScope){
$scope.login = function()
{
$state.go('view1');
}
}]);
Here view1.html is loading but it's showing above index.html.
As you are using Anguar ui-router. You must have kept in index.html. So your view1.html will be replaced there only. Other code in index.html will be untouched by your angular code.
<p> Here is me </p>
<ui-view></ui-view>
Now, if you change the route. "Here is me" will be always there.
Hope this was the issue what i understood.
While developing some SPA AngularJS Application I define the rooting with $routeProvider. Everythings works fine, but I get tired with clicking through the whole application to see particular changes I've done anytime I republish the application to the server. Is there a possibility to change this behaviour? I mean, when I hit refresh on my browser or use some tools for automatical refreshing (like LiveReload Server) is there a way to tell angularJS to not to navigate to the default page?
Regarding to the comments below, here is the routing content.
Below is the MainRoutingContent
'use strict'
angular.module('MainModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'webapp/modules/authentication/views/login.html',
hideMenus: true
})
.when('/register', {
controller: 'RegistrationController',
templateUrl: 'webapp/modules/registration/views/register.html'
})
.when('/', {
controller: 'HomeController',
templateUrl: 'webapp/modules/home/views/home.html'
})
.otherwise({ redirectTo: '/login' });
}]);
The single html page has the ng-view defined:
<div>
<div ng-view></div>
</div>
And some additional for the RegistrationModule:
angular.module('RegistrationModule')
.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/register/user', {
controller: 'UserRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-user.html'
})
.when('/register/company', {
controller: 'CompanyRegistrationController',
templateUrl: 'webapp/modules/registration/views/register-company.html'
});
}]);
Ok, I got it. I defined some run block in the main module of my application with the redirection to the /login page. Here is the code:
angular.module("app", [...])
.run(['$location',
function ($location) {
$location.path('/login');
}])
If someone will get such an issue with refreshing the page in the future, please look for some run block defined in your code.
Header contents=>main menu name is service and its submenu's are abc,def,pqr. This is in index.html
And service.html have 3 separate div's one shows contains of abc,two shows contains of def and three shows contains of pqr.
There is angularjs route call from index.html when I click header menu (i.e.service=>abc or def or pqr) then it should show its particular div other will not be shown.
Use the menu items as parameters passed in the url and then use a an ng-switch or ng-show to show the selected content.
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/'
})
...
.when('/menu/:item', {
templateUrl: 'index.html',
controller: 'indexController'
})
in controler, inject $routeParams:
app.controller('indexController', function($scope, $routeParams) {
$scope.menuItem = $routeParams.item;
});
in index:
<div ng-show='menuItem == "abc">abc</div>
<div ng-show='menuItem == "def">def</div>
<div ng-show='menuItem == "pqr">pqr</div>
Added benefit, you do not have to create new routes to create new menus with content in the index.html
downside, gets crowded in index.html
put ng-view tag in index.html
download angular route and inject this dependency into your app.
put routing code like
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
redirectTo : '/user'
})
.when('/register', {
templateUrl: 'client_assets/views/register.html',
controller: 'registerController'
})
.when('/login', {
templateUrl: 'client_assets/views/log_in.html',
controller: 'logInController'
})
})
Now according to the route decide html template and controller you want to add.
Needs some guidance with respect to migrating my ngRoute configuration to a ui.router configuration. Currently I have one main template (index.html) and it has an ng-view where all views are injected. My current ngRoute config is as follows:
app.config(function ($routeProvider) {
$routeProvider
.when('/login', {
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.when('/contact', {
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.when('/notification', {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
})
.otherwise({
redirectTo: '/login'
});
I now want to define a second place in index.html where I can inject some view content - not a nested view, but rather another ng-view (or ui-view in ui-router terminology). The original ng-view section is the default one (currently just for /login and /contact), and the new one is just for specific routes (currently just '/notification' but maybe others in the future). Lets call the new ui-view 'notification-view'.
I've gone through much of the ui-router documentation and still am unsure of how to migrate the above to the new ui.router config. Can someone get me started or point me toward some decent examples?
Update:
Ok, here is where I am. I've adding some states and a new ui-view to my index.html page. See below:
<div class="container">
<div id="header"></div>
<div data-ui-view></div>
<div data-ui-view="notification-view"></div>
</div>
My routing is now:
app.config(function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url: '/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url: '/notification',
views: {
"notification-view": {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
});
});
This seems to work ok for the most part. When the url /notification is triggered, the app is routed to the NotificationCtrl and renders ui-view content into the notification-view. However the only problem is that the ui content in the main (unnamed) ui-view is lost. I would like whatever is already rendered in the main ui-view to be untouched, and only target the notification-view. Is this possible? Does it have to instead be a nested-view?
When using ui.router, you should think in terms of states rather than routes. So instead of the $routeProvider you instead inject $stateProvider, plan out various states and work from there . So from your example above, we convert it to:
app.config(function ($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('contact', {
url:'/contact',
templateUrl: 'app/views/contact.html',
controller: 'ContactCtrl'
})
.state('notification', {
url:'/notification',
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
});
}
There's alot of methods for adding a "sub-view" to uirouter, one method is by adding a child state.
$stateProvider
.state('login', {
url:'/login',
templateUrl: 'app/views/login.html',
controller: 'LoginCtrl'
})
.state('login.error', {
url:'/login',
templateUrl: 'app/views/login-error-subview.html',
controller: 'LoginErrorCtrl'
})
Also as $stateProvider doesnt provide a default state handler, you will also need to inject in $urlRouterProvider. This is a provider that also comes with ui-router that is tasked with the responsibility of watching $location for changes.
The thing with ui-router is that you won't see a huge difference compared to the built-in route provider and ease of use it brings until you start using sub-states and stacked-states.
In your example above, ui.router wouldnt know what templte to use tor the ui-view and thus leaves it empty. You can give it a template and thus becomes:
...
.state('notification', {
url: '/notification',
views: {
'':{
templateUrl: 'app/views/notification-main.html',
controller: ''
}
'notification-view': {
templateUrl: 'app/views/notification.html',
controller: 'NotificationCtrl'
}
}
...
But from what I'm getting you want the login and contact to have the notification in it. So ideally you'd create a notification child state for each, as right now there is now way to declare wildcard or multiple parents for a child-state. Hopefully when v1.0 comes out there'll be support for this use-case already.
Below is a link from the docs that will get you upto speed:
https://github.com/angular-ui/ui-router/wiki/URL-Routing
https://github.com/angular-ui/ui-router/wiki/Nested-States-%26-Nested-Views
I am a newbie, trying to understand routing, I read the documentation and i injected ngRoute module, but still when i am trying to click on Employee Name its not showing any thing, i have wasted lot of time on this, but no luck. Can some one help.
No errors in the console.
Code:
Plunker
app.js
var app = angular.module('demoApp', ['ngRoute']);
app.config(function ($routeProvider) {
$routeProvider
.when('/employeedetail/:empid',
{
controller: 'empDetailController',
templateUrl: '/employeedetail.html'
})
.otherwise({ redirectTo: '/index.html' });
});
The $routeProvider have to be used in conjection with the ng-view directive.
In index.html, replace the employee list template with ng-view, and also remove the controller like this:
<body>
<h2>AngularJS Demo</h2>
<div ng-view></div>
</body>
Put the employee list template as a separate html file e.g. employeelist.html.
Then config the $routeProvider to render the employee list template and its controller by default:
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'employeeController',
templateUrl: 'employeelist.html'
})
.when('/employeedetail/:empid', {
controller: 'empDetailController',
templateUrl: 'employeedetail.html'
})
.otherwise({
redirectTo: '/'
});
})
Example Plunker: http://plnkr.co/edit/mQIaJqZeOal77Z2RxG8z?p=preview
I think your problem come from the fact you don't use :
the ng-view attribute