Facing some strange with ui-router angularjs. I am configuring an single page application using these frameworks.
Here is my code
function initWmappConfig($stateProvider, $locationProvider, $compileProvider) {
$locationProvider.html5Mode(true);
$stateProvider.
state('login', { url: '/', templateUrl: '/Views/login', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register', controller: 'login-controller', controllerAs: 'vm' });
$stateProvider.state('otherwise', {url: '/'});
$compileProvider.debugInfoEnabled(false);
}
If i am using this above configuration i am facing this war
WARNING: Tried to load angular more than once
but on other hand if i simple change
$locationProvider.html5Mode(false);
then everything seems to work just fine...
Please let me know why this is happening.
Thanks
It's because you didn't mention the .html extension in the templateUrl
state('login', { url: '/', templateUrl: '/Views/login.html', controller: 'login-controller', controllerAs: 'vm' })
.state('register', { url: '/register', templateUrl: '/Views/Register.html', controller: 'login-controller', controllerAs: 'vm' });
Also for otherwise, you need to use $urlRouterProvider
$urlRouterProvider.otherwise('/');
I was getting this error.
The reason behind this is the use of jQuery.
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular.js" type="text/javascript"></script>
<script src="/public/vendor/angular/angular-route.js" type="text/javascript"></script>
I removed the following and warning disappeared:
<script src="http://code.jquery.com/jquery-2.1.3.min.js" type="text/javascript"></script>
Related
I am trying to capture a route to be something like
www.mysite.com/#name=ted&location=ca
I am using stateprovider and I setup as follow:
$stateProvider
.state('home', {
url: '/#name',
controller: function () {
alert('here')
do stuff...
}
})
but for some reason, alert never trigger.
Can someone help me about it? Thanks a lot!
To get params via query string you can use try:
$stateProvider
.state('home', {
url: '/?name&location',
controller: function () {
alert('here')
do stuff...
}
})
# will be there if HTML5 mode is disabled.
var app= angular.module('appName', []);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/home', {
templateUrl: 'templates/home.html',
controller: 'AddOrderController'
}).
when('/contact', {
templateUrl: 'templates/contact.html',
controller: 'ShowOrdersController'
}).
otherwise({
redirectTo: '/home'
});
}]);
Try This Is Example Of Navigation Using With route Providers .
When using ui.router, all routes need a template, include that in your state, remove the # sign from the URL and it should work
So I'm trying to use angular routing in my application. The problem is that the route "/" does not get initialized automatically. So I first go to "/" and the main content of the page is empty (the template is not loaded at all), I click the link to /settings and settings are loaded, then I click a link to "/" and this time the template is initialized correctly. So how do I make the thing initialized at the beginning?
Here's my routing configuration:
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
I tried calling $location.url("/profile") from a controller and it did help, but the url has to be changed and I would rather keep the "/"
use otherwise({ redirectTo: "/" })
Update : here how it should be
$routeProvider
.when('/', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/profile', {
templateUrl: '/profile.html',
controller: 'ProfileController',
}).when('/settings', {
templateUrl: '/settings.html',
controller: 'SettingsController'
}).otherwise({ redirectTo: '/' });
I am trying to use html5Mode for urls in AngularJS.
This code runs fine:
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
}
]);
But this code gives me the error url is undefined
.config(["$routeProvider", "$locationProvider",
function($routeProvider, $locationProvider){
$routeProvider.when("/editor", {
templateUrl: "pages/editor/index.html"
})
.when("/docs", {
templateUrl: "pages/docs/index.html"
}).otherwise({
templateUrl: "pages/home/index.html"
});
$locationProvider.html5Mode(true);
}
]);
Could the issue be that I have instead of
What could be the source of this?
I just had the same problem and I just figured out how to solve this. Well my errors were:
I hadn't injected "$locationProvider" I was trying to call the "html5Mode" without referencing the "$locationProvider" at the begining of the function, now I have this:
app.config(['$routeProvider','$locationProvider',
function($routeProvider,$locationProvider) {
$routeProvider
.when("/", {
templateUrl: "Views/home/home.html",
controller: "HomeController"
})
.otherwise({ redirectTo: '/'});
$locationProvider.html5Mode(true);}]);
I had the wrong, I had: " href="/" "
but I'm running all the app with a local server with Wampp so the base path for my project is "/NAME_OF_THE_PROJECT/" like this:
<base href="/SEQUOIA/">
With this two corrections I solved all the errors, as I see, you have your base without the last '/', maybe your app is searching "www.localhost.com/staticCONTENT" instead of ".../static/CONTENT".
Ah! I almost forget, I have my .htaccess just the same as shown here and here
I am setting up a scaffold for an app with angular and angular-ui-router. I have it working however it seems to be adding a hash into my url (I'm running dev on localhost) localhost:9000/#/test. When I land on the main page it's just localhost:9000 and it still serves the main view content. I would like to get rid of the hash if possible.
So here is my setup:
In my index.html in the body I just have my nav and then the ui-view under that:
<div class="row">
<ul class="nav navbar-nav">
<li><a ui-sref="index">Home</a></li>
<li><a ui-sref="test">Test</a></li>
</ul>
</div>
<div ui-view=""></div>
and in my app.js I just have:
angular
.module('playApp', [
'ui.router'
])
.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
});
So when I land, it's fine, but when I start using the nav I have set up, it adds the hashes to the url, would prefer not to have them if possible. Thanks!
Include $locationProvider and do $locationProvider.html5Mode(true); :
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
I also have an otherwise in there as well, so that if it can't find a specified route, it will just default back:
angular.module('playApp', ['ui.router'])
.config(function($stateProvider, $locationProvider, $urlRouterProvider) {
$stateProvider.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
Inject $locationProvider into your config and set html5mode to true:
angular.module('playApp', [
'ui.router'
])
.config(function($stateProvider, $locationProvider ) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('test', {
url: '/test',
templateUrl: 'views/test.html',
controller: 'testCtrl'
});
$locationProvider.html5Mode(true);
});
Make sure you adjust your .htaccess to handle this (rewriting back to root).
There is an alternative to html5Mode. But it has its drawbacks.
When defining ui-router states, the url option is not required. From that documentation:
You might create some child states without URLs, if it doesn’t make sense to bookmark those child states. The state machine transitions between url-less states as usual, but does not update the url when complete. You still get all the other benefits of a state transition such as parameters, resolve, and lifecycle hooks.
If you don't need to provide a URL for a state so that users can bookmark those states, you can omit the url option. The URL won't change.
i am having a problem and a question
my cliend side uses:
<div ng-view></div>
and the following scripts:
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<script src="js/filters.js"></script>
my routProvider was:
angular.module('myApp', []).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
$routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
which worked fine.
i can't figure out why this implemention doesn't work, i saw it used many times before:
var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider) {
$routeProvider.
when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
}).
when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
}).
otherwise( {redirecTo: '/view1'});
});
another question is:
why in the first example there is '$routeProvider' injection before the function?
as i understand the function($routProvider) should do this job.
thanks.
Your code works just fine (plnkr), but you misspelled redirectTo so the initial redirect to /view1 didn't work.
With regard to explicitly injecting $routeProvider: using the explicit version of injection prevents issues with variable renaming when you minify your JS code for production use. For instance, without being explicit, your code might be minified into something like this:
a.config(function(b) { b.when('/view1', ...) });
Since Angular depends the name of the argument to inject the correct provider, you can explicitly name it as a string (which won't get minified):
a.config([ '$routeProvider', function(b) { ... } ]);
That way, Angular knows the first argument should be $routeProvider.
You are super close. You do need to include the $routeprovider. This should work for you.
angular.module('myApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
}).
when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
}).
otherwise({
redirectTo: '/view1'
});
}]);
This should work!
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.when('/view1', {
controller: 'MyCtrl1',
templateUrl: 'partials/partial1.html'
});
$routeProvider.when('/view2', {
controller: 'MyCtrl2',
templateUrl: 'partials/partial2.html'
});
$routeProvider.otherwise({
redirectTo: '/view1'
});
});