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
Related
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?
I am following a video tutorial on AngularJS. On the part related to $routeProvider, I got an error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
and no content is displayed. Everything works however on instructor demo.
I noticed that when I substitute my angular libraries:
angular.min.js (v1.2.26)
angular-route.min.js (v1.3.11)
with instructor's older libraries:
angular.min.js (v1.2.9)
angular-route.min.js (v1.2.10)
everything works perfect.
I understand there must have been some updates to the way $routeProvider behaves with newer versions of AngularJS, so I would definitely prefer to follow these. Could anyone help me adapt the current code so that it works with most recent libraries?
my app.js:
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
and my controllers.js:
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
I'm new to Angular and cannot figure out how to get a route working inside of phonegap. Here is my Angular code:
var app = angular.module('app', [
'ngCookies',
'ngResource',
'ngSanitize',
'ngRoute'
])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/views/main.html',
controller: 'mainControl'
})
$routeProvider.when('/test' , {
templateUrl: 'app/views/test.html',
controller: 'testControl'
})
$routeProvider.otherwise({
redirectTo: '/'
});
});
app.controller('mainControl' , function(){
})
app.controller('testControl' , function(){
})
I'm trying to access '/test' with this link inside of my main.html:
<span>Click <a href='/test'>here</a> to go to the test page<span>
When I click the link inside of ripple I'm getting a 404 in the console for localhost:4400/test/
Like I said I'm new to Angular so from what I can tell both routeProviders match up but I can't get the page to load when clicked through the link.
Help is always appreciated.
I think you need a hashtag before the slash.
<span>Click <a href='#/test'>here</a> to go to the test page<span>
Hope this solves this problem.
I'm trying to implement routing into a empty Angular project but the routing doesn't seem to react to the different urls.
index.html, index.html#/, index.html#/audience just seems to load the index page and the only console output is "routing".
I've been testing this in Chrome and Firefox on Ubuntu 13.10 and Angular version 1.2.7
app.js
var App = angular.module('analyticsApp', [
'ngRoute',
'analyticsControllers',
]);
App.config(['$routeProvider', function($routeProvider) {
console.log("routing");
$routeProvider.when("/audience", {
templateUrl: 'partials/audience.html',
controller: 'AudienceCtrl'
}).
otherwise ({
redirectTo: '/audience'
});
}]);
controllers/audience_controller.js
var analyticsControllers = angular.module('analyticsControllers', []);
analyticsControllers.controller('AudienceCtrl', ['$scope', '$http', function($scope, $http){
console.log("audienceCtrl");
}]);
<div ng-view></div>
in index.html was required to make the routing work as intended.
I have two moudules:
var app = angular.module('app', ["homeModule"])...
angular.module("homeModule", [])...
and if in web config property "compilation debug="true".." everything works fine.
But when I build the project in release and "compilation debug="false".."
BundleCollection collects all JS files in one I have problem.
In log console i see error
Error: Unknown provider: n from homeModule
My "app" module can not find and connect "homeModule".
What am I doing wrong? How do I properly connect the "homeModule" module ?
I think you have problem with AngularJs and minification in general. When defining dependencies you need to use array notation, for example:
angular.module("app", ["homeModule"])
.controller("UsersController", ["$scope", "usersRepository", function($scope, usersRepository) {
// ...
}]);
or use https://github.com/btford/grunt-ngmin which makes conversion for you.
I found problem in homeModule.config
Worked code:
var app = angular.module('app', ["homeModule"]);
app.config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
angular.module("homeModule", [])
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.when('/', { templateUrl: 'ClientApp/Home/Index.html' });
$routeProvider.when('/home', { templateUrl: 'ClientApp/Home/Index.html' });
}])