Here is my code:
var app = angular.module('todoApp', ['ui.router', 'ngResource', 'ui.bootstrap']);
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider
.state('home', {
url: "/",
templateUrl: '/templates/index.html',
})
.state('signup', {
url: "/signup",
templateUrl: '',
})
}
]);
module.exports = app;
When i'm running in in browser, it show me an error:
ReferenceError: module is not defined
What i'm doing wrong ? How to properly define module ?
The console error message a few lines below the module is not defined gives a hint where the problem is:
Module 'ui.router' is not available! You either misspelled the module name or forgot to load it.
Check if you have included the file containing ui.router into your page (i.e. HTML template) so that Angular can load it.
Add the references to ui-router and bootstrap to make it work.
here is the working app
Related
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>
I'm using AngularJS 1.3 on a large single page app and I'm trying to split up my routes file.
I'm following the advice from the following question and have run into problems finding my new module
How might I move AngularJS Routes into separate file
My routes-work-desc.js.coffee is
angular
.module('workDesc')
.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$stateProvider
.state "work_descs",
parent: "default"
url: "/work_descs"
views:
"":
controller: "WorkDescsController"
templateUrl: "/assets/work_descs/index.html.erb"
]
My routes.js.coffee file is
angular
.module('paisApp', ['workDesc'])
.config ['$stateProvider', '$urlRouterProvider', ($stateProvider, $urlRouterProvider) ->
$urlRouterProvider
.otherwise("/")
$stateProvider
.state "default",
abstract: true # Parent route/template
views:
"":
controller: "ApplicationController"
templateUrl: "/assets/layouts/default.html.erb"
]
The error I get is
Error: [$injector:nomod] Module 'workDesc' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.20/$injector/nomod?p0=workDesc
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
I need some help. I am new with angular.
I want to go to another state in another folder from current folder.
For example :
I have two different folder , A and B. They have config.ui-routing
But the problem is , how to $state.go to Folder A when i declared the $state.go in folder B.
Here is my code:
//UI routing config in folder B
$stateProvider
.state('login',{
url:"/login",
views:{
"main":{templateUrl: prefixPath+"login.html"}
},
resolve: loadSequence('loginController')
})
while my controller location folder is in folder A.
Here is my controller code:
// state in folder A Controller
$state.go('login');
The errors said:
Error: Could not login' from state
Can you guys help me ?
This very often happens if we declare two modules without creating dependency.
There is a broken example
The login module in login.js:
var app = angular
.module('MyLoginPart', [
'ui.router'
])
.config(['$stateProvider',
function ($stateProvider) {
// States
$stateProvider
.state('login', {
url: "/login",
templateUrl: 'tpl.html',
})
}
])
And this is the main module (used as ng-app)
var app = angular
.module('MyApp', [
// missing dependency on above
'ui.router'
])
when we navigate to the 'login' state, we get:
Error: Could not resolve 'login' from state ''
There is a fixed, working example, where we declare dependency:
var app = angular
.module('MyApp', [
'MyLoginPart',
'ui.router'
])
And this is working:
<a ui-sref="login">
i do not have any idea, actually i do not understand Sir Radin's answer, so i try to make the hardcode,
window.location.href = '../admin/login';
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.