When I follow the direct link /blog/3 on localhost everything works fine.
After publishing to webserver the page constantly reloads and I get 'warning: tried to load angular more than once' in Chrome console.
var app = angular.module("myApp",
[
'ngAnimate',
'ngRoute',
'LocalStorageModule',
'slickCarousel',
'noindex-svg',
'svg-use'
// 'ui.router'
]
);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
controller: "mainController",
templateUrl: "/app/views/dashboard/main.html"
});
$routeProvider.when("/blog/:name", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-details.html"
});
$routeProvider.when("/blog", {
controller: "blogController",
templateUrl: "/app/views/blog/blog-list.html"
});
if (window.history && window.history.pushState) {
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
});
I am using asp.net web api 2 and Azure app.
Why does it happen only on the webserver?
Related
I am using angular js routing using $routeProvider but when I reload the page I get error message like "Cannot GET /home". My code is as follows
.when("/", {
templateUrl: "views/login/login.html",
controller: "LoginController as loginCtrl"
})
.when("/home", {
templateUrl: "views/home/home_template.html",
controller: "HomeController as homeCtrl"
});
when I reload page from home then I get this error message . Also I want to keep this login outside routing so what practice should I follow
Try this
var app = angular.module('app', [
'ngRoute'
]);
window.routes =
{
'/': {
templateUrl: 'app/visitor/visitor.html',
anonymous: true
},
'/index': {
templateUrl: 'app/visitor/visitor.html',
caseInsensitiveMatch: true,
anonymous: true
},
'/lu/:mt?/:tab?/:id?': {
templateUrl: 'app/user/user.html',
caseInsensitiveMatch: true,
anonymous: false
}
};
app.config(function ($routeProvider, $locationProvider) {
for (var path in window.routes) {
$routeProvider.when(path, window.routes[path]);
}
$routeProvider.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
});
I'm using adal.js with ui-router and believe I have everything configured correctly. Unfortunately, when adding requireADLogin to my states, nothing happens and I get the error Failed to load template: ./dashboard.html (HTTP status: undefined undefined)
Auth module
angular
.module('components.auth',
[
'ui.router',
'AdalAngular'
])
.config(['$httpProvider', 'adalAuthenticationServiceProvider', function($httpProvider, adalProvider) {
adalProvider.init({
instance: 'https://login.microsoftonline.com/',
...
// these are components that can be loaded such as nav without needing authentication
anonymousEndpoints: ['./root.html', './app.html', './app-nav.html', './app-sidebar.html']
},
$httpProvider);
}]);
Dashboard module
var dashboard = {
bindings: {
//
},
templateUrl: './dashboard.html',
controller: 'DashboardController'
};
angular
.module('components.dashboard')
.component('dashboard', dashboard)
.config(['$stateProvider', 'adalAuthenticationServiceProvider', function ($stateProvider, adalProvider) {
$stateProvider
.state('dashboard', {
parent: 'app',
url: '/dashboard',
component: 'dashboard',
requireADLogin: true,
resolve: {
}
});
}]);
According to chrome debug tools, the application never even attempts to be redirected to an auth portal:
I am using angular router for routing my app and I want to use the html5mode.
Routing is working fine, but when a refresh my page (on he browser), I get a 404 error.
Here is my routing code snipet
angular.module ('app', ['ngRoute', 'home', 'login', 'admin'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'app/components/home/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: 'app/components/login/login.html',
controller: 'loginController'
})
.when('/outils-de-gestion', {
templateUrl: 'app/components/admin/admin.html',
controller: 'adminController'
})
$locationProvider.html5Mode(true);
}])
.controller ('appController', ['$scope', function ($scope){
}])
What am I doing wrong ? Has anyone an idea about that ?
This solution works for angularJs.
index.html => Add in head tag.if your application is in folder then you need to add folders like:
config.js => add $locationProvider in function param and the code below:
app.config(function($routeProvider,$locationProvider)
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
and your href should like ng-href="home" i.e. do not use #or !
thats it .
I have an AngularJS app that works fine in the browser when served by 'grunt serve'. However, trying to run the app as a Chrome extensions fails. The initial page (the '/' route) displays, but when I press a link to '/#/products/add' I get a 'Webpage not found' error.
No webpage was found for the web address: chrome-extension://acekeiblhdhhbgoagmeegclohfncadjg/#/products/add
Error code: ERR_FILE_NOT_FOUND
Why does the first route work, but the second route fails?
My manifest is bare bones currently, but I've tried various permissions (but the fact that the root route is working makes me think that other routes should work).
{
"manifest_version": 2,
"name": "My app",
"description": "Does stuff",
"version": "1.0",
"permissions": [
"<all_urls>"
],
"browser_action": {
"default_icon": "app/images/icon.png",
"default_popup": "app/index.html"
}
}
The app.js file looks like this:
'use strict';
angular.module('myApp', [
'ngResource',
'ngSanitize',
'ngRoute',
'ngStorage'
])
.config(function ($routeProvider) {
$routeProvider.
when('/products', {
templateUrl: 'views/product_pages/product_list.html',
controller: 'ProductListCtrl'
}).
when('/products/add', {
templateUrl: 'views/product_pages/product_add.html',
controller: 'ProductAddCtrl'
}).
when('/products/:productId', {
templateUrl: 'views/product_pages/product_edit.html',
controller: 'ProductEditCtrl'
}).
otherwise({
redirectTo: '/products'
});
})
.run(function () {
// removed for brevity
});
And the product add controller reads as follows:
.controller('ProductAddCtrl', ['$scope', '$location', 'productPageCollection',
function ($scope, $location, productPageCollection) {
$scope.showError = function(ngModelController, error) {
return ngModelController.$error[error];
};
$scope.processForm = function() {
productPageCollection.add({ 'name' : $scope.product.name });
$location.path('/products');
};
}])
Any ideas?
Your link should point to #/products/add, not /#/products/add. The second option attempts to navigate to the root folder of your extension.
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route