Using my local host, i was worked my angular app. i moved this app to my dev environment, where i am working now.
But after i move to dev my router not working. i guess i need to do some configuration to work that. But i tried up to changing my routes but nothing works.
my new dev app url : http://azvsp14devapp01:123/_layouts/15/cpmd/public/ - in the public folder my index.html nested.
here is my app.js :
(function () {
"user strict";
angular.module("tcpApp", ["ngRoute","ngResource", "ngAnimate"])
.run(['$route', function ($route) {
$route.reload();
}])
.config(function ($routeProvider, $locationProvider) {
// $locationProvider.html5Mode(true);
$routeProvider
.when ("123/_layouts/15/cpmd/public/", { //trying for equalient of `/`
templateUrl : "views/login/login.html",
controller : "loginController",
className : "body-login"
});
$routeProvider
.when ("/lock", {
templateUrl : "views/lock/lockScreen.html",
controller : "lockScreenController",
className : "body-lockScreen"
});
$routeProvider
.when ("/home", {
templateUrl : "views/home/home.html",
controller : "homeController",
className : "body-home"
});
$routeProvider
.when ("/projectSummary/:id", {
templateUrl : "views/projectSummary/projectSummary.html",
controller : "projectSummaryController",
className : "body-projectSummary"
});
$routeProvider
.when ("/projectDetails", {
templateUrl : "views/projectDetails/projectDetails.html",
controller : "projectDetailsController",
className : "body-projectDetails"
});
$routeProvider
.otherwise ({
redirectTo:'123/_layouts/15/cpmd/public/'
});
})
})();
Change
"123/_layouts/15/cpmd/public/"
to
"/"
In both when and otherwise.
This because router place with index.html treats as root.
Related
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');
}])
Currently I am able to add routing mechanism in AngularJs with the following code :
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'login'
});
});
What I need is an url in the format like /app/:appname which should fetch template called /template/:appname.html. I know that the appname can be accessed from controller using :
$routeParams.appname;
But how can I render template based on that parameter ?
You could do this:
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/app/:appname', {
templateUrl : '/templates/app-template.html',
controller : 'AppCtrl',
resolve: {
appPath: function ($route) {
return $route.current.params.appname;
}
}
})
});
in AppCtrl,
App.controller('AppCtrl', AppCtrl);
AppCtrl.$inject = [
'$scope'
'appPath'
];
function AppCtrl($scope, appPath) {
$scope.template = appPath + '.html';
}
in app-template.html, use ng-include as such
<div ng-include src="template"></div>
Hope this helps.
templateUrl can be use as function which returns a url.
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/:appname',{
templateUrl: function(params){
return "templates/"+params.appname +".html"
},
controller: 'Ctrl'
});
});
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.
How can I specify multiple providers to AngularJS?
Right now I'm doing it in 2 places, but this doesn't seem to work:
var myApp = angular.module("myApp", ['ngRoute']);
// configure our routes
myApp.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'
});
});
myApp.config(function($interpolateProvider){
$interpolateProvider.startSymbol('((').endSymbol('))');
}
);
Use a single function reference:
myApp.config(foo)
which injects each provider:
function foo($routeProvider, $interpolateProvider)
{
/* interpolateProvider configuration */
$interpolateProvider.startSymbol('((').endSymbol('))');
/* routeProvider configuration */
$routeProvider
.when('/', {
templateUrl : 'pages/home.html',
controller : 'mainController'
})
.when('/about', {
templateUrl : 'pages/about.html',
controller : 'aboutController'
})
.when('/contact', {
templateUrl : 'pages/contact.html',
controller : 'contactController'
});
}
/* module creation */
var myApp = angular.module("myApp",[]);
/* provider binding */
myApp.config(foo);
/* Manual bootstrapping */
angular.bootstrap(document, ['myApp']);
/* $inject Property Annotation */
foo.$inject['$routeProvider', '$interpolateProvider'];
Providers are essentially objects that are used to create and configure instances of AngularJS artefacts. Hence, in order to register a lazy controller, you would use the $controllerProvider. Similarly, To register a directive, you would use the $compileProvider, to register filters you would use the $filterProvider, and to register other services, you would use the $provide service.
References
AngularJS: Configuration Blocks
AngularJS: Inject Property Annotation