angularjs $routeProvider - route not found - angularjs

I am using angularjs with requirejs. I am running into a problem where my routes are not being routed properly. It's constantly routing to /. If I change /post to /:post it hits my post route.
// module/post.js
define([], function () {
'use strict';
var app = angular.module('myApp.post', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.when('/post', {
controller: 'PostController',
template: "<div>{{page}}</div>"
}
);
}
]);
return app;
});
// main.js
require.config({
baseUrl: '/static/js',
paths: {
angular: 'vendor/angular/angular',
jquery: 'vendor/jquery/jquery',
_: 'vendor/underscore/underscore'
},
shim: {
angular: {
exports: angular
}
}
});
require([
'module/post'
], function() {
'use strict';
var app = angular.module('myApp', [
'myApp.post'
])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.otherwise({
redirectTo: '/'
});
}
]);
$(function(){
angular.bootstrap(document, ['myApp']);
$('html').addClass('ng-app: myApp');
});
});

Dumb mistake on my part. I'll leave this question opened in case someone runs into this problem.
I did not have html5 mode on
var app = angular.module('myApp.post', [])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/post', {
controller: 'PostController',
template: "<div>{{page}}</div>"
}
);
$locationProvider.html5Mode(true);
}
]);
otherwise my urls would map with hashbang
localhost/#post instead of /post

Related

Angularjs Ionic controller error

I am working with IONIC Framework (Angularjs)
I am receiving below error,
463788 error Error: [ng:areq] http://errors.angularjs.org/1.4.3/ng/areq?p0=PaymentCtrl&p1=not%20a%20function%2C%20got%20undefined
at Error (native)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:6:416
at Sb (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:18)
at Qa (http://localhost:8100/lib/ionic/js/angular/angular.min.js:22:105)
at http://localhost:8100/lib/ionic/js/angular/angular.min.js:79:497
at I.appendViewElement (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:4463)
at Object.O.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:17590)
at Object.O.init (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:16:16825)
at I.render (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3419)
at I.register (http://localhost:8100/lib/ionic/js/ionic-angular.min.js:17:3150)
Here is my code for controller.
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
console.log('Payment controller ');
var PaymentCtrl = function ($scope, PaymentSvc,$state, $ionicLoading) {
/*$scope.phoneNumberVerification = function() { $state,$ionicPopup,
console.log('PhoneNumber controller added1 ');
$ionicLoading.hide();
$state.go('tab.eateries');
};*/
// When button is clicked, the popup will be shown...
};
return PaymentCtrl;
});
Serveics.js
define(['ionic', 'ionicAngular', 'angular',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular) {
'use strict';
//console.log('service modules');
var PaymentSvc = function(){
console.log('serverices call');//var svc = this;
}
return PaymentSvc;
});
// });*/
payment.js
define(['ionic', 'ionicAngular', 'angular',
'./modules/payment/controllers/paymentctrl',
'./modules/payment/services/services',
'ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter'],
function (ionic, ionicAngular, angular,
paymentCtrl,
paymentSvc) {
'use strict';
console.log('payment.js modules');
var payment = angular.module('payment', ['ionic'])
.controller('PaymentCtrl', paymentCtrl)
.service('PaymentSvc',paymentSvc);
return payment;
});
No need to inject ['angular','ngRoute', 'angularAnimate', 'angularSanitize', 'uiRouter']. Ionic automatically inject angular decencies when you inject ['ionic']
Just write your controller directly
angular.module('starter', ['ionic']).controller('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
//starter is the app name come from ng-app="starter"
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
I advise you to organize your javascript project files to in 3 files:
app.js which contains
angular.module('starter', ['ionic', 'starter.controllers','starter.services'])..config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
}).state('app.home', {
url: '/home',
views: {
'tab-home': {
templateUrl: 'templates/home.html',
controller : 'HomeCtrl'
}
}
});
$urlRouterProvider.otherwise('/app/home');
});
controller.js which contains your controllers
angular.module('starter.controllers', []).controller('AppCtrl', function('PayCtrl',function ($scope,$state,$ionicLoading,PaymentSvc){
$ionicLoading.show();
$scope.phoneNumberVerification = function(){
console.log('PhoneNumber controller added1');
$ionicLoading.hide();
$state.go('tab.eateries');
};
});
service.js which contains you connections to server
angular.module('starter.services', []).factory('PaymentSvc',function($http,$q){
});
it is an injection error. for example, if you inject ['a','b','c'] you must have it in your function in the same order and amount: function(a,b,c). in your case, you have more parameters in the injection than the parameters in your controller function.

How to load controller in angular js using require js

I am trying to load a controller so that my view will display. Actually I write my controller .Route or config also .But I am not able to load my controller and route file how to load controller using require.js so that my login.html page is display?
Here is my Plunker:
http://plnkr.co/edit/DlI7CikKCL1cW5XGepGF?p=preview
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
}
});
route.js
/*global define, require */
define(['app'], function (app) {
'use strict';
app.config(['$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: "/login",
templateUrl: "login.html",
controller: 'LoginCtrl'
})
$urlRouterProvider.otherwise("/login");
}]);
});
Any guess how to load view?
You just need to do:
main.js
requirejs.config({
paths: {
ionic:'http://code.ionicframework.com/1.0.0-beta.1/js/ionic.bundle.min',
},
shim: {
ionic : {exports : 'ionic'}
},callback: function () {
'use strict';
require([
'angular',
'route',
'app'
], function (angular) {
// init app
angular.bootstrap(document, ['app']);
});
}
});
app.js
define(['ionic',
'./LoginCtrl',],
function (angular) {
'use strict';
var app = angular.module('app', [
'ionic','app.controllers']);
return app;
});
LoginCtrl.js
/*global define, console */
define(['angular'], function (ng) {
'use strict';
return ng.module('app.controllers', ['$scope','$state'
,function ctrl($scope, $state) {
$scope.login = function () {
alert("Login is clicked")
};
}]);
});
You can follow the tips here - https://www.startersquad.com/blog/angularjs-requirejs/

angular sub module route

I have a:
main module : kp
sub module : kp.venue
I want kp.venue to have it's own "route" definitions (for all paths relative to that module).
This is what I am trying to achieve in the code bellow.
Can anyone explain me why it doesn't work?
I followed the technique presented in this post: https://stackoverflow.com/a/15301427/971008
(function () {
'use strict';
angular.module('kp.venue', [])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider
.when("/venue", {
template : "<p>This is the venue module</p>",
controller: "VenueCtrl"
});
}
])
.controller('VenueCtrl', ['$scope',
function($scope){
console.log("VenueController");
}
]);
angular.module('kp', ['ngRoute', 'ngAnimate', 'kp.venue'])
.config(['$locationProvider', '$routeProvider',
function($locationProvider, $routeProvider) {
$locationProvider.html5Mode({enabled:true, requireBase:false});
$routeProvider
.when("/", {
template: "<p>main app</p>",
controller: "MainController"
})
.otherwise({
redirectTo: '/'
});
}
]);
//Load controller
angular.module('kp')
.controller('MainController', ['$scope',
function($scope) {
$scope.test = "Testing...";
}
]);
}());
Note that I have already tried to move "kp.venue" bellow the definition of "kp" module to be sure that it was not a problem related to things not being loaded in the right order.

Submodules' routes not loaded if different file

I'm using AngularJS with RequireJS and ui-router, with the Play Framework 2.3 (and the WebJars stuff).
main.js
(function () {
'use strict';
requirejs.config({
// Packages = top-level folders; loads a contained file named 'main.js"
packages: ['dashboard'],
paths: {
'angular': ['../lib/angularjs/angular'],
'angular-ui-router': ['../lib/angular-ui-router']
},
shim: {
'angular': {
exports: 'angular'
},
'angular-ui-router': {
deps: ['angular'],
exports: 'angular'
}
}
});
require(['angular', 'angular-ui-router', './app'],
function (angular) {
var mod = angular.module('app', ['ui.router']);
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
});
}]);
angular.bootstrap(document, ['app']);
});
})();
app.js
define(['angular', 'dashboard'], function(angular) {
'use strict';
return angular.module('app', ['app.dashboard']);
});
dashboard/main.js
define(['angular', './routes'], function(angular) {
'use strict';
return angular.module('app.dashboard', ['dashboard.routes']);
});
dashboard/routes.js
define(['angular'], function(angular) {
'use strict';
var mod = angular.module('dashboard.routes', []);
console.log("Enter the routes.js"); // DOES WORK
mod.config(['$stateProvider', function($stateProvider) {
console.log("Enter the config file in routes.js"); // DOESN'T WORK, NEVER REACH THAT POINT
$stateProvider.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
}]);
return mod;
});
The states defined in my submodules are not loaded, but if I'm putting them in the main main.js, it does work :
mod.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function ($stateProvider, $locationProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/app/profile');
$stateProvider.state('profile', {
abstract: true,
url: '/app/profile',
templateUrl: '/views/app/content',
controller: 'AppController'
})
.state('profile.dashboard', {
url: '',
templateUrl: '/views/app/dashboard'
});
;
}]);
So this is really a problem about loading with RequireJS, but I can't figure out what's wrong..
Any ideas ? Thanks

Angularjs MVC application, I cannot figure out why I'm getting an Unknown provider: $routeProvider <- $route

I'm working on an application that is using angularjs routing. I've added ngRoute as a dependancy, I have confirmed that the angular-route.js file is being loaded. I still get an unknown provider error $routeProvided <- $route.
What am I missing?
I have three files for my app, they are loaded in the order displayed below.
My application.js file
(function () {
'use strict';
var app = angular.module('MyApp', [
// Angular modules
'ngAnimate', // animations
'ngRoute', // routing
]);
app.run(['$route', '$rootScope', '$q', 'routemediator',
function ($route, $rootScope, $q, routemediator) {
routemediator.setRoutingHandlers();
}]);
})();
my route config file
(function () {
'use strict';
var app = angular.module('MyApp');
// Configure Toastr
toastr.options.timeOut = 4000;
toastr.options.positionClass = 'toast-bottom-right';
var events = {
controllerActivateSuccess: 'controller.activateSuccess',
spinnerToggle: 'spinner.toggle'
};
var config = {
appErrorPrefix: '[Error] ', //Configure the exceptionHandler decorator
docTitle: 'error: ',
events: events,
version: '1.0.0'
};
app.value('config', config);
app.config(['$logProvider', function ($logProvider) {
// turn debugging off/on (no info or warn)
if ($logProvider.debugEnabled) {
$logProvider.debugEnabled(true);
}
}]);
app.config(['commonConfigProvider', function (cfg) {
cfg.config.controllerActivateSuccessEvent = config.events.controllerActivateSuccess;
cfg.config.spinnerToggleEvent = config.events.spinnerToggle;
}]);
})();
My config file
(function () {
'use strict';
var app = angular.module('MyApp');
// Collect the routes
app.constant('routes', getRoutes());
// Configure the routes and route resolvers
app.config(['$routeProvider', 'routes', routeConfigurator]);
function routeConfigurator($routeProvider, routes) {
alert('in route config');
routes.forEach(function (r) {
$routeProvider.when(r.url, r.config);
});
$routeProvider.otherwise({ redirectTo: '/Home.html' });
}
// Define the routes
function getRoutes() {
return [
{
url: '/',
config: {
title: 'Home',
templateUrl: '/App/views/Home.html',
controller: 'HomeController',
controllerAs: 'vm',
settings: {
nav: 1,
content: '<i class="fa fa-dashboard"></i> Home'
}
}
}
];
}
})();
If you're using a recent verison of Angular (1.2+), you need to download and include the ngRoute file in addition to angular.js, which doesn't include all these side providers anymore.

Resources