There is no a clear solution for my below question in stackoverflow, i have searched for many but its not suitable
note: am not using GRUNT
Actually am developing a application using Node and Angular,
while using angular-route to route a page from application its working fine, but reloading browser shows me Cannot GET /secure/home
app.js
var myApp = angular.module('Whizzrd', ['ngRoute']).
config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.
when('/secure/home', {
templateUrl: '/pages/static/home.html',
controller: 'homeController'
});
$locationProvider.html5Mode({enabled: true, requireBase: false});
}]);
moving through home.html through application is working fine, but while reloading the page using browser am getting error as
Cannot GET /secure/home
Am stuck with this for more than 2 days, Help will be appreciated really
Related
I want to use angular in my asp.net mvc website .
Every thing works fine in home page (localhost:xxxx) for loading carousel, but when i redirect to admin page(localhost:xxxx/admin), i get below error on browser console
> Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=MollahajiModule&p1=[$injector:nomod] http://errors.angularjs.org/1.5.8/$injector/nomod?p0=MollahajiModule
N/<#http://localhost:25150/Scripts/angular.min.js:6:412
ke/</</<#http://localhost:25150/Scripts/angular.min.js:25:99
b#http://localhost:25150/Scripts/angular.min.js:24:142
ke/</<#http://localhost:25150/Scripts/angular.min.js:24:385
g/<#http://localhost:25150/Scripts/angular.min.js:39:471
q#http://localhost:25150/Scripts/angular.min.js:7:353
g#http://localhost:25150/Scripts/angular.min.js:39:319
cb#http://localhost:25150/Scripts/angular.min.js:43:336
Bc/c#http://localhost:25150/Scripts/angular.min.js:20:390
Bc#http://localhost:25150/Scripts/angular.min.js:21:179
fe#http://localhost:25150/Scripts/angular.min.js:20:1
#http://localhost:25150/Scripts/angular.min.js:317:386
jQuery.Callbacks/fire#http://localhost:25150/Scripts/jquery-1.10.2.js:3062:10
jQuery.Callbacks/self.fireWith#http://localhost:25150/Scripts/jquery-1.10.2.js:3174:7
.ready#http://localhost:25150/Scripts/jquery-1.10.2.js:447:3
completed#http://localhost:25150/Scripts/jquery-1.10.2.js:118:4
I've also tried route, but got no result
var Application = angular.module('AdminModule', ["ngRoute"]);
Application.config(['$routeProvider','$locationProvider',function ($routeProvider, $locationProvider) {
$routeProvider
.when('/admin', {
templateUrl: '/Views/Admin/Index.html',
controller: 'HomeCarouselController'
});
$locationProvider.html5Mode(true);
}]);
Im trying to make an app to learn to work with AngularJS and rails. Only when I try to rout with angular I get this printed in te console "WARNING: Tried to load angular more than once" in an infinite loop.
If followed this tutorial until the problem occurred from there I've searched a lot here on Stackoverflow, but could not find a solution to my problem.
app.js
var app = angular.module('Deadlines', ['ngRoute', 'templates'], function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: 'home.html',
controller: 'HomeCtrl'
}).otherwise( { redirectTo: '/'} );
$locationProvider.html5Mode(true);
});
Warning shows that you have added more than one angular js library. Better to remove any one angular library.
I have solved my issue through using AngularUI Router for angular. I found out that this problem was not occurring when I was trying to recreate the issue with just HTML and Angular. So it has something to do with the combination of rails and Angular. I can't explain why AngularUI Router is the solution for my problem cause I'm still a noob, but it works and I can continue learning to build apps.
app.js
angular.module('Deadlines', ['ui.router', 'templates'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: 'home.html',
controller: 'HomeCtrl',
})
$urlRouterProvider.otherwise('/');
}])
.config(["$locationProvider", function($locationProvider) {
$locationProvider.html5Mode(true);
}]);
Here is my current app.js for people facing the same problems
I am building my website based on MEAN stack and I am having trouble with angular routing on mobile browsers for which I am using client side routing with ngRoute.
The site works fine in every possible desktop browser, even the mobile design (it has a different menu than the desktop version), but on mobile browsers I have to click about 10 times before the menu responds in both versions (desktop and mobile - depends on the resolution of the browser), that goes for every link inside the website. I have tried googling but have not found anyone with similar issues.
Can anyone point me in the direction of where do I start troubleshooting this? I am using ngAnimate for ng-view animations and some css transitions for the menu borders.
The development version of the website can be found here: http://meanapp1-boilerplatesand.rhcloud.com
Excuse the foreign language, the content isn't the issue here anyway.
Routes code:
var app = angular.module('myApp', [
'ngRoute',
'angular-carousel',
'ngTouch',
'ngAnimate',
'ngResource',
'myApp.domov',
'myApp.onas',
'myApp.fotogalerija',
'myApp.fotogalerija.single',
'myApp.novice',
'myApp.novice.single',
'myApp.kontakt',
'myApp.storitve',
'myApp.version',
'myApp.admin',
'myApp.meni',
'duScroll'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/domov'});
}]);
And then for every module declared I have more or less the same code:
'use strict';
angular.module('myApp.novice', ['ngRoute', 'ngResource', 'myApp.novice.single'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/novice', {
templateUrl: 'novice/novice.html',
controller: 'noviceCtrl'
});
}])
I have declared modules that aren't acessible from the main menu as submodules of menu item modules. The routing code:
'use strict';
angular.module('myApp.fotogalerija.single', ['ngRoute', 'ngResource', 'angular-carousel'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/fotogalerija/:item/single', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
$routeProvider.when('/fotogalerija/:item/single/:index', {
templateUrl: 'fotogalerija/single/single.html',
controller: 'singleCtrl'
});
}])
In my Angular app, I'm trying to render partials that load into the index page when a user clicks a link. It worked fine before with the following code:
//app.js in Angular
angular.module('myApp', [
'ngSanitize',
'ngRoute',
...
]).
config(['$routeProvider', '$locationProvider', '$sceDelegateProvider', function($routeProvider, $locationProvider, $sceDelegateProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainController'});
$routeProvider.when('/File/:fileID', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/view1'});
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'https://www.url.com/**']);
$locationProvider.html5Mode(true);
}]);
But when I add Express, it doesn't work:
var express = require("express");
var logfmt = require("logfmt");
var app = express();
app.use(logfmt.requestLogger());
app.use(express.static(__dirname + '/app'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));
app.get('*', function(req, res) {
res.sendfile('./app/index.html');
});
This works fine if I just want to display the index page. When I add the following code though, it displays the plain HTML (of the partial), but without the CSS or Javascript.
app.get('/partials/currentFile.html', function(req, res) {
res.render('./app/partials/currentFile.html');
});
How do I go about rendering a partial with Express in a way that works with Angular?
I've tried looking at the Express api for get(), render and sendfile, but they weren't that helpful in my situation. Other users have asked a similar question on here before, but they usually involve another file that Express routes to and I'm wondering if I can do it without adding any extra files since it's already an issue with adding just a file to include Express.
The currentFile.html doesn't load any CSS or Javascript itself. Before I added Express, it was a partial that was loaded in index.html, which loaded all the extras.
Any help is appreciated. Thank you
I didn't fix the problem directly, but I worked around it. The problem was that I wanted to render a partial onto the index page. The overarching goal of the app is a single-page application, so in the end, it's just one page that matters.
It would have been nice to have different partials to render for testing, but alas nobody seems to know either what I'm asking or I'm complicating the issue. Either way, I've found a way around it by just getting rid of all the other partials and just redirecting all URL requests to the single page app.
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MainVideoController'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.when('/file', {templateUrl: 'partials/currentFile.html', controller: 'FileController', controllerAs: 'file'});
$routeProvider.otherwise({redirectTo: '/file'});
...
Note that the partials view1 and view2 DO NOT work when trying to visit domain.com/view1 or /view2.
I'm having troubles using the ui-router plugin of AngularJS:
angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
I then get this error at startup:
Unknown provider: $stateProvider
I've included the javascripts in this order:
<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>
What could be the issue ?
[EDIT]
I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?
Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.
The following piece of code should do the job. At least in my case, so let me know if it works or not.
angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.
You just need to include ui-router module as dependency.
like following
angular
.module('myApp', ["ui.router"])
.config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
...
}]);
Including the angular-ui v0.0.2 will fix the problem.