I have a project that I want to link views together from different controllers so my controllers are
Dashboard and Board
and my views are
Dashboard
Index (Main view with ng-app and ng-view)
Test page
Board
BoardIndex (A view I want loaded into /Dashboard/Index's ng-view)
In my main.js file I have:
angular.module('App', ['ngRoute', 'ngResource']);
angular.module('App').config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Dash',
title: 'Dashboard'
})
.when('/PageOne', {
templateUrl: 'PageOne',
title: 'Page One'
})
.when('/Board', {
templateUrl: 'Board',
title: 'Board'
})
.when('/Messenger', {
templateUrl: 'Messenger/Messenger',
title: 'Messenger'
})
.otherwise({redirectTo: '/'})
});
and my link to messenger looks like this: /Dashboard/#/Messenger
The link above will hit the Messenger controller ActionResult that routes to the BoardIndex view, but it doesn't actually show like I expect it to which would be the url being: URL/Dashboard/#/Messenger with the content of BoardIndex showing. Instead it goes to URL/Messenger with a blank page.
I need some help wiring this up.
Thanks!
here I have defined a name of the controller as dashboard and board . please verify the controller's name from your controllers. this might help you. let me know if you are expecting something else
angular.module('app')
.config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
$stateProvider
.state('dash',{
url : '/',
templateUrl : 'dash',
controller : 'dashboard'
})
.state('pageOne',{
url : '/pageOne',
templateUrl : 'pageOne',
controller : 'dashboard'
})
.state('board',{
url : '/board',
templateUrl : 'board',
controller : 'board'
})
.state('messenger',{
url : '/Messenger',
templateUrl : 'Messenger/Messenger',
controller : 'dashboard'
})
$urlRouterProvider.otherwise('dash');
}])
Related
I have an app.config with UI-Router. It has a login page with it's controller, recoverLogin and I want to put a template with footer, header and more stuff with new states that could be loaded into the template (in an especificplace).
My module is:
var app = angular.module("app", [
"ui.router",
"pascalprecht.translate"
]);
My routes are;
app.config(function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("login", {
url: "/login",
templateUrl: "views/accessControl/login.html",
controller: "loginCtrl"
});
$stateProvider
.state("recoverLogin", {
url: "/recoverLogin",
templateUrl: "views/accessControl/recoverLogin.html",
controller: "recoverLoginCtrl"
});
$stateProvider
.state("template", {
url: "/template",
templateUrl: "views/templates/template.html",
controller: "templateCtrl"
})
.state("template.dashboard", {
url: "/dashboard",
templateUrl: "views/dashboard/dashboard.html",
controller: "dashboardCtrl"
})
$urlRouterProvider.otherwise("login");
})
I have in my index <ui-view></ui-view> for the place of the loadings and another <ui-view></ui-view> in template.html int he place where I want to load more stuff like dashboard.html, but this doesn't works. it loads dashboard.html without the template created in template.html. I have founded lot of documentation that doesn´t works for me. Any Idea?
Here there are a plunker example of the idea: https://plnkr.co/edit/ZsGZjDKOBTIXFpPtXasN?p=preview
There is updated plunker and working plunker.
The template of the mainTemplate state is now lookin like this:
place for main:
<div ui-view="main"></div>
place for other:
<div ui-view="other"></div>
so it has two (could be more) places for more stuff. And this is the state redefined:
.state("mainTemplate.dashboard", {
name: "main",
url: "/dashboard",
views: {
'main' : {
templateUrl: "dashboard.html",
controller: "dashboardCtrl"
},
'other' : {
template: "<h2>other view</h2>",
}
}
});
What we can see is views : {} object being used to defined multiple content for more targets. Read about that more details here:
Angular UI Router - Nested States with multiple layouts
Nested states or views for layout with leftbar in ui-router?
play or observe the changes here
In this sample what I need is that in plnkr.co/edit/5FVrydtTPWqYMhhLj03e?p=preview, when I click the Contact Numbers button, It will redirect to the Contact Numbers page in the Contacts.
Im using Angular JS and I hope someone can help me.
scotchApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
});
Credits to https://scotch.io/tutorials/angular-routing-using-ui-router for I am forking their example
Your code shows a ng-route example but the link you provide is a ui-router example. ($routeProvider vs $stateProvider).
If you would be using the $stateProvider from angular-ui-router to define the states you'll be using throughout your application it would probabably be more like the following:
$stateProvider.state('home', {
controller: 'mainController',
url: '/',
templateUrl: 'pages/home.html'
});
$stateProvider.state('about', {
controller: 'aboutController',
url: '/about',
templateUrl: 'pages/about.html'
});
$stateProvider.state('contact', {
controller: 'contactController',
url: '/contact',
templateUrl: 'pages/contact.html'
});
You see that a definition of a state uses a string to identify itself with: e.g. :'home', 'contact' etc. You can use the $state service from ui-router and use the \[go(to, params, options)\] method to transition between states in combination with this identifier.
Convenience method for transitioning to a new state. $state.go calls
$state.transitionTo internally but automatically sets options to {
location: true, inherit: true, relative: $state.$current, notify: true
}. This allows you to easily use an absolute or relative to path and
specify only the parameters you'd like to update (while letting
unspecified parameters inherit from the currently active ancestor
states).
All you need to do is to couple this to the click event of you button in your maincontroller. That is: inject $state into your mainController and couple an ng-click within your button to a function that executes $state.go().
<button type="submit" ng-click="$state.go('contact')">Contact Numbers</button>
My AngularJS redirects look like this:
// create the module and name it asApp
var asApp = angular.module('asApp', ['ngRoute']);
// configure our routes
asApp.config(['$routeProvider', '$httpProvider', '$locationProvider', function($routeProvider, $httpProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
title: 'Home of PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/home.html',
controller : 'mainController'
})
// route for the about page
.when('/about', {
title: 'About PeppyBurro – Radical Spanish learning tips and tricks for the adventurous learner',
templateUrl : 'pages/about.html',
controller : 'mainController'
})
// route for the 404 page not found error
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
}]);
What I need is for the script to route me to 404.html when an undefined slug is entered in the URL. So if the user enters mysite.com/#/about, it should show him the about.html page. This bit works fine. But when the user enters, say, mysite.com/#/abc, it should show him the 404.html page as I have defined in my .otherwise and .when('/notfound') directives. But although the .when('/notfound') bit is working, the .otherwise bit isn't. Is there something I'm missing?
I think you should modify same as:
.otherwise({
redirectTo: '/notfound'
}
Reference here
.when and .otherwise are two different things.
.when defines a route
.otherwise sets the default route when a route hasn't been created.
$routeProvider.otherwise source code
You have two options.
Take out the route path
$routeProvider
// ... other routes
.otherwise({
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
or define the 404 route using .when and pass the route path into .otherwise.
$routeProvider
// ... other routes
.when('/notfound', {
title: 'Page not found',
templateUrl : 'pages/404.html',
controller : 'mainController'
})
.otherwise('/notfound');
Hope this helps!
Let me know if you have any questions.
EDIT
// As of Angular 1.3
.otherwise('/notfound')
// is short hand for
.otherwise({redirectUrl: '/notfound'})
You can use redirectTo:
.otherwise({
redirectTo: '/notfound'
});
I am currently working on an Angular app and facing some issues with URLs.
Problem:
My application has the main page which has multiple sections and all sections fetch data from backend. There is an animated scroller on each section, e.g. If I am at section1 and select Section3, it scrolls me to Section3 in a nice animated way. I have few pages which also are fetched from backend but totally changes the view. This is the hierarchy of views:
Page1:
Section1, Section2, Section3, Section4, Section5 (Will be visible in whole application aka HEADER)
Section5:
Link1, Link2 (Each link is totally a separate view)
If I am on Link1 and click any of the Section, it appends # to the URL relatively and doesn't redirect me to the actual section.
Question(s):
I do not want to use # anywhere at all, how can I get rid of it?
I do not want to remove animation from my home page.
If I am on some other view and click on any section (HEADER), it should take me to that particular position, how can I achieve this?
This is my routes.js file:
var webApp = angular.module('webApp', ['ngRoute','ngSanitize']);
webApp.config(function($routeProvider, $locationProvider) {
if(window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
$routeProvider
.when('/', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
//section2
.when('/section2', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section3', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section4', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section5', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section7', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/section8', {
templateUrl : 'application/header.jsp',
controller : 'homeController'
})
.when('/Link1', {
templateUrl : 'application/link1.jsp',
controller : 'link1Controller'
})
.when('/Link2', {
templateUrl : 'application/link2.jsp',
controller : 'link2Controller'
})
.when('/Link3', {
templateUrl : 'application/link3.jsp',
controller : 'link3Controller'
});
});
Any help will be greatly appreciated or if anything is missing or required, please do let me know.
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.