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.
Related
in index.html
<script src="lib/angular.min.js"></script>
<script src="lib/angular-route.min.js"></script>
controller
angular.module("testCtrl",[]).controller('TestController', ["$scope", function($scope) {
$scope.Myname = "my first route";
}]);
app.js
var app = angular.module('testApp',["ngRoute", "testCtrl"]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when("/",{
templateUrl: "Views/main.html"
})
.when("/details",{
templateUrl: "Views/details.html",
controller : TestController
})
.otherwise({
redirectTo : "/"
});
}]);
my homepage loads fine but with some reason /details show error like --- No webpage was found for the web address: http://127.0.0.1:8080/details
I am new to angular and I am learning. I am not able to understand whats wrong ..do we have any tools to debug route error? I am using angular 1.5.8 version for now.
server console - "GET /details" Error (404): "Not found"
The issue is that TestController isn't defined in app.js. You should use the controller name as a string, like so.
.when("/details",{
templateUrl: "Views/details.html",
controller : "TestController"
})
See this plunk for a working example.
https://plnkr.co/edit/xi20MmchJY6TO1SG2o0d?p=preview
I think you have omitted the dependency on ngRoute:
angular.module('testCtrl', ['ngRoute'])...
Are you referencing ng-app in your HTML as well (can't see your HTML code)
Presumably you have included your scripts in the HTML page too?
I started my first angular application, and am running into an issue where my "home" module isn't working because of a dependency issue. I don't see any dependency missing that I would need. I am using $stateProvider, and $urlProvider, but I am injecting that into the configuration for the home module, so I'm not sure where the problem would lie ?
Config.$inject = ["$stateProvider", "$urlRouterProvider"];
angular.module('home', []).config(Config)
function Config($stateProvider, $urlRouterProvider){
$stateProvider
.state('home', {
url: '/login',
templateUrl: './views/login.html'
})
}
angular.module('home').controller('loginCtrl', function($scope){
$scope.helloWorld = function(){
console.log("This works!")
}
})
The consoled error:
[$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=home&p1=Error%3A%20…
Since "$stateProvider" and "$urlRouterProvider" providers are not part of the core AngularJS module, you need to inject modules, that have this provides into your home module definition. As far as I know, $stateProvider is from ui router module, so
angular.module('home', ['ui.router']).
...
Keep in mind that you also need to include this Javascript in your HTML file. It is in the angular-ui-router file
<script src="js/angular-ui-router.min.js"></script>
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 got the routing working for all my links but one and don't understant what happens.
I include dependency to ui-router :
var app = angular.module('CMT', ['ui.router', 'angularCharts', 'uiSwitch']);
configure a new state :
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider){
$stateProvider.state('writeareview', {
url: '/#/writeareview',
templateUrl: 'partials/writeareview.html',
controller: 'writeAReviewController'
});
Declare the controller :
app.controller('writeAReviewController', ['$scope', function ($scope){
}]);
And my template is located in the folder "partials" with following code :
<div ng-controller="writeAReviewController"></div>
My link in index.html :
<li ng-class="getClass('/writeareview')">Donner un avis</li>
Any help would be much appreciated.
The routing url shouldn't have a hash in it... that is done internally.
Change:
url: '/#/writeareview'
To
url: '/writeareview'
And change the href to only include hash with no leading /:
<a href="#/writeareview">
Or use
ui-sref="writeareview"
Also you will be invoking 2 instances of your controller when you include the controller in routing and in ng-controller. Remove the ng-controller duplicate
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