Having real issues wrapping my head around an issue I'm having with Angular. I'm trying to set up a multi-page app with routing. My app.js looks a little something like this:
var app = angular.module('app', ['angularLocalStorage', 'ngRoute', 'ngResource', 'authControllers', 'authServices', 'eventControllers', 'eventServices']);
app.config(['$routeProvider', '$httpProvider',
function($routeProvider, $httpProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/events.html',
controller: 'EventListController'
}).
otherwise({
redirectTo: '/'
});
...
I'm attempting to make my module - app depend on eventControllers, but I'm getting the following error:
Error: [$injector:modulerr] http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=app&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.3.15%2F%24injector%2Fmodulerr%3Fp0%3DeventControllers%26p1
This leads me to believe that it can't load eventController module for whatever reason.
My controllers.js looks a little something like this:
(function () {
var authControllers = angular.module('authControllers', []);
var eventControllers = angular.module('eventControllers', []);
eventControllers.config(function($stateProvider) {
$stateProvider.state('events', { // state for showing all events
url: '/events',
templateUrl: 'partials/events/list.html',
controller: 'EventListController'
}).state('viewMovie', { //state for showing single event
url: '/events/:id/view',
templateUrl: 'partials/events/single.html',
controller: 'EventViewController'
}).state('newMovie', { //state for adding a new event
url: '/events/new',
templateUrl: 'partials/events/create.html',
controller: 'EventCreateController'
}).state('editMovie', { //state for updating a event
url: '/events/:id/edit',
templateUrl: 'partials/events/edit.html',
controller: 'EventEditController'
});
}).run(function($state) {
$state.go('events'); //make a transition to events state when app starts
});
I'm sure the answer is very simple, and I'm missing something basic, but I'd really appreciate any pointers.
The eventControllers module is only declared inside the controllers.js, could this be an issue?
Related
I'm developing an web app using AngularJS with uiRouter. I developed my route configuration as follows:
(function () {
'use strict';
var module = angular.module('app', ['ngMaterial', 'ui.router']);
function Config($urlRouterProvider, $stateProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider.state('Home', {
url: '/',
templateUrl: 'Partials/homeview.html',
controller: 'homeCtrl'
}).state('Table', {
url: '/tableview',
templateUrl: 'Partials/tableview.html',
controller: 'tableCtrl'
}).state('List', {
url: '/listview',
templateUrl: 'Partials/listview.html',
controller: 'listCtrl'
}).state('New', {
url: '/new',
templateUrl: 'Partials/new.html',
controller: 'newCtrl'
}).state('Edit', {
url: '/edit/:index',
templateUrl: 'Partials/edit.html',
controller: 'editCtrl'
});
}
Config.$inject = ["$urlRouterProvider", "$stateProvider"];
module.config(Config);
}());
The thing in some controller passed to the view the code is duplicated, so I would like to know if there is a way to pass 2 controllers to the view at the same time or if there is a way to create a separate file with that specific part of the duplicated controller and pass it as Dependency Injection in the desired controllers.
You can't have two controllers linked to a uiRouter route. But you could certainly make a service or factory that includes your universal functionality. (See angular.service vs angular.factory for more research.)
var app = angular.module('app',[])
app.service('myFunctions',function() {
this.addNumbers = function(a,b) {
// calculate some stuff
return a+b;
}
}
app.controller('myController',function(myFunctions){
myFunctions.addNumbers(2,2); // 4
})
I work on AngularJS project.
Here is module definition:
(function () {
"use strict";
var myApp = angular.module("DIMManagement", ["ngResource", "ngRoute"])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/DIM/Home', { templateUrl: '/app/DIM/DIMView.html', controller: 'DIMController' });
$routeProvider.when('/DIM/Log', { templateUrl: '/app/Log/DIMLogView.html', controller: 'DIMLogController' });
$routeProvider.otherwise ->?
$locationProvider.html5Mode(true);
});
}());
I want to use otherwise method of $routeProvider any idea how can I use it?
The intellisense of dose not give option to select otherwise method.
Just set the property as normal:
$routeProvider.otherwise({ redirectTo: '/' });
Depending on your IDE, I wouldn't really count on the intellisense for the most accurate help (just my opinion tho)
I'm working on a little Angular example project, using something like this
angular.module('myApp', [
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider
.when('/view1', {
templateUrl: 'view1',
controller: 'Ctrl1'
})
.when('/view1', {
templateUrl: 'view2',
controller: 'Ctrl2'
})
.otherwise({ redirectTo: '/view1'});
});
Now I would like to add a button sending a simple GET "/setDatabaseFlag". No template loading, no new controller. I realized that every call to localhost (my base url for the test) runs through the routeProvider. So I tried to find something like
.when('/setDatabaseFlag', {
$http.get('/setDatabaseFlag');
})
I found an example using
.when('/setDatabaseFlag', {
action: doSomething
})
but $http is not available here. Also "action" seems undocumented.
I guess there must be another approach. Thanks for any hint!
I have the following in my app.js file:
// Declare app level module which depends on filters, and services
var APP = angular.module('DiagsDashboard', ['ngRoute', 'DiagsDashboard.filters',
'DiagsDashboard.services', 'DiagsDashboard.directives', 'DiagsDashboard.controllers']);
APP.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
$routeProvider
.when('/', { templateUrl: '/views/shared/Error.html' })
.when('/Error', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard', { templateUrl: '/views/shared/Error.html' })
.when('/Diagsdashboard/Error', { templateUrl: '/views/shared/Error.html' })
.otherwise({ templateUrl: '/views/shared/Error.html' });
});
But when I browse to:
- /localhost/#
- /localhost/#/DiagsDashboard/
- /localhost/#/DiagsDashboard/Error
- /localhost/#/error
The whole page re-loads and everything refreshes.
I've copied this code from a project where it works and I have angular-route.js included.
This is an MVC application located within IIS as a sub-application at /localhost/DiagsDashboard.
The issue was simply I hadn't give ng-app a name in the markup. I'd read that it is possible to use ng-app without a name but obviously that isn't the case.
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route