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)
Related
The error listed in the title is driving me crazy. Why is angular so picky? What is wrong with my syntax? I'm trying to define a controller & sub controller, with a route.
plunker is here
// Declare app level module which depends on filters, and services
var mmm = angular.module('mdp',['ngRoute', 'mmm.controllers']);
mmm.config(['$routeProvider','$locationProvider','$compileProvider','$httpProvider', function($routeProvider, $locationProvider,$compileProvider,$httpProvider) {
$routeProvider
.when('/', {
redirectTo: '/commission',
controller: 'mmmController'
})
.when('/commission', {
templateUrl: 'form.html',
controller: 'commCtlr'
})
.otherwise({
redirectTo: '/commission'
});
$compileProvider.debugInfoEnabled(false);
$httpProvider.useApplyAsync(true);
}])
angular.module('mmm.controllers',[]);
var mmmControllers = angular.module('mmm.controllers');
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log"],function ($scope,$rootScope, $http,$location,$route,$log) {
});
mdpControllers.controller('commCtlr',["$scope"], function($scope) {
});
You had wrong controller registration, ] was in wrong place.
mmmControllers.controller('mmmController', ["$scope","$rootScope","$http","$location","$route","$log",
function ($scope,$rootScope, $http,$location,$route,$log) {
}]);
mdpControllers.controller('commCtlr',["$scope",
function($scope) {
}]);
I want to have on the URL of my application like this:
http://localhost:9000/#/?id=XYZ
I don't found how to configure this on angularjs app module
My implementation is like that:
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
but It doesn't work.
You do not have to specify
it will be like
angular.module('APP', ['ngRoute'])
.config(function ($routeProvider) {
$routeProvider.when("/", {
templateUrl: "views/sign/sign.html",
controller: "SignCtrl"
});
// $locationProvider.html5Mode(true);
});
and in your SingCtrl.
when you write $routeParam than you will have objects of params which are passed as a query parameter.
so you will get $routePara.id if you pass like ?id=anything
Do not have to worry if you want to catch the query param like ?id=abs&name=test
You can add a "url" attribute to your $routeProvider object.
Something like:
$routeProvider.when("/?id="+":id", {
templateUrl: "views/sign/sign.html",
url: 'the Url you want to use',
controller: "SignCtrl"
});
PS.: I suggest you to use ui-router instead of ngRoute. Check it out later.
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?
Sorry if this isn't a particulary enlightening question, but I am at a loss as to why I can't get angularjs to run on my page.
I've stripped it down to the following jsfiddle: http://jsfiddle.net/Inigo/CvWE5/1/
Here is my code:
var app = angular.module('iwd-cms', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/', {
controller: 'TourManager'
}).
otherwise({
redirectTo: '/dashboard'
});
}]);
app.controller('TourManager', function($scope){
alert('hello world');
});
As according to an issue on AngularJS's github repo, you must include a template to match up with your controller:
$routeProvider.
when('/', {
templateUrl: 'TourManager.html',
controller: 'TourManager'
}).
See issue 1838 issue on their github repo: https://github.com/angular/angular.js/issues/1838
It seems to be an ongoing issue; please look for alternative code solutions at the Url.
I tried to make the 'getting started' tutorial from Angular JS, but I have a problem when setting the route of a link: the controller of that route does not get called when the user clicks on the link.
Here is my code:
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}
]);
function PhoneDetailCtrl($scope, $routeParams, $http) {
$scope.phoneId = $routeParams.phoneId;
$scope.total = 4;
$http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) {
$scope.phone = data;
});
}
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
What angularjs version did you use? I follow the tutorial too, and it use angular-1.0.0rc7.js and if I look up in the app.js file, it use template rather than templateUrl:
$routeProvider.when('/phones', {
template: 'partials/phone-list.html',
controller: PhoneListCtrl
});
so by looking your code, you might want to use angular-1.0.3.js or prior version above the RC
This should work but you need to be sure the link is inside the DOM element which is the root of your app; ie (ng-app='my-app').
It's hard to tell without seeing the page markup.
The problem was solved by the asker:
I fixed the problem - actually I had the HTML of the next step of this tutorial and it was messing up with the app, mainly because it had binding with attribute that did not exist in the model yet.