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
Related
I am having problems with the ui-sref directive (rarely) when deploying to Heroku. The application is working properly locally. I am using angular 1.6.8, ui-router 1.0 and I cannot figure out how to solve the issue.
My config.js file looks like this:
materialAdmin
.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function ($stateProvider, $urlRouterProvider, $locationProvider) {
$urlRouterProvider.otherwise("/login");
$stateProvider
.state('not-authorised', {
url: '/not-authorised',
templateUrl: '404.html'
})
//------------------------------
// LOGIN
//------------------------------
.state('login', {
url: '/login',
templateUrl: 'views/login.html'
})
...
$locationProvider
.html5Mode(false)
.hashPrefix('');
}]);
EDIT: I am able to reproduce it locally if I run grunt build in production mode. I am a bit lost right now, but suspecting about the minification of the files.
This are the errors I am getting on the console:
dashboard should be a defined route if you are going to use it with ui-sref=""
I am relative new to angular and tried to create a new webapp with a yeoman generator. All good but then I try to add a new route,
angular
.module('App', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/reset', {
templateUrl: 'views/test.html',
controller: 'TestCtrl',
controllerAs: 'test'
})
});
However when I try to access the route like:
http://localhost:8081/#/reset
It keeps getting replaced with:
http://localhost:8081/#!#%2Freset
Take a look at this answer and see if it solves your problem. It looks like you may need to add $locationProvider.hashPrefix(''); to the route config.
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
I've got a very simple web application using Meteor and Angular. I'm trying to use iron router for server api routes and angular ui router for client side. I've set up my code to allow iron-router to place the ui-view into all routes and then have angular ui-router take over from there.
The problem is a race condition. No matter what I do, where I place my source files, iron-router will ALWAYS execute it's block after ui-router. I've followed many answers from SO about this but for some reason my implementation isn't working. Below is the code for my app.
Routes file:
Router.route('/(.*)', function(){
console.log('iron router');
this.render('app');
});
angular.module('my_app').config(
function($urlRouterProvider, $stateProvider, $locationProvider){
console.log('ui router');
$locationProvider.html5Mode(true);
$stateProvider
.state('home', {
url: '/',
templateUrl: 'client/views/home.ng.html',
controller: 'HomeCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'client/views/test.ng.html',
controller: 'TestCtrl'
})
;
$urlRouterProvider.otherwise('/');
});
The meteor template:
<template name="app">
<div ui-view></div>
</template>
The console.log output is always:
ui router
iron router
What am I missing?!?!?!????
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.