Well, I'm not able to get a controller to work in a simple example which code looks like:
app.js:
(function() {
'use strict';
// Define AngularJS application
var myApp = angular.module('myApp', [
'ngRoute'
]);
// Set application routes
myApp.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$routeProvider
.when('/registration', {
templateUrl: 'views/registration.html',
controller: 'registrationController'
})
.otherwise({
redirectTo: '/'
});
}]);
})();
registration.js:
(function() {
'use strict';
myApp.controller('registrationController', [
'$scope',
'$routeParams',
'$rootScope',
'$location',
function(
$scope,
$routeParams,
$rootScope,
$location
){
}
]);
})();
no clue why but it throws an error
registration.js:4 Uncaught ReferenceError: myApp is not defined
In your registration.js
(function() {
'use strict';
angular
.module('myApp').controller('registrationController', [
'$scope',
'$routeParams',
'$rootScope',
'$location',
function(
$scope,
$routeParams,
$rootScope,
$location
){
}
]);
})();
And the error is pretty much self explanatory. myApp is not defined in registration.js file. That's why you're getting that error
Related
I'm new in electron and trying to load new page from controller on button click but it does not load page neither gives any error.
this is my controller code
(function () {
'use strict';
angular.module('app')
.controller('appCtrl', [
'$scope',
'$location',
'$window',
'$http',
'$rootScope',
function ($scope, $location, $window, $http, $rootScope) {
$scope.fun = function () {
$location.url('./admin/Logout.html');
};
}
])
}
)();
I don't what I'm doing wrong but I'm totally stuck over here. So any kind of help will be appreciated.
I'm writing routing logic using ngRoute of angular JS. The following is my code.
index.js
(function() {
'use strict';
function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
$routeProvider.otherwise({redirectTo: '/404'});
$httpProvider.defaults.withCredentials = false;
$httpProvider.defaults.headers.common['content-type'] = "application/json";
}
angular
.module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
)
.config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();
app.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/components/landingpage/landingpage.html',
controller: 'appController'
});
}
function appController($scope, $rootScope, $location) {
$scope.submitLogin = function() {
alert("Successfully loggedIn");
};
}
angular
.module('pacman')
.controller('appController', ['$scope', '$rootScope', '$location', appController])
.config(['$routeProvider', config]);
})();
notFound.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/404', {
templateUrl: 'app/components/notFound/404page.html',
controller: 'notFoundController'
});
}
function notFoundController($scope, $rootScope, $location) {
debugger;
}
angular
.module('pacman')
.controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
.config(['$routeProvider', config]);
})();
My code is a simple app. I'm trying to load different controllers based on routes. However at the time of loading the app, in the last controller's '$routeProvider' it throws an error
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have no clue how to figure out the problem. Any leads would be appreciated.
The following is my library bundle order.
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'
Kindly help.
Issue is in your index.js where you define the run method on your angular app.
angular
.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
The last argument in the array passed to run should be a function but you forgot to pass a function. Change your run to add some implementation like below or remove the run if you don't see any use for it.
angular.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies',
function($rootScope,$location,$modalStack,$cookies){
// some statements here
}]);
Angular JS file declaration must come before the jquery in your index.html
'node_modules/angular/angular.js',
'node_modules/jquery/dist/jquery.js',
I am trying to read a JSON data from a file using angular factory and service. But Angular can't see my defined service. Here is my factory:
//jsonService.js
angular.module('jsonService', ['ngResource'])
.factory('JsonService', function($resource) {
alert($resource)
return $resource('example.json',{}, {
getData: {method:'GET', isArray: false}
});
});
And my controller:
//app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version',
'jsonService'
]).config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]).
controller('mainController', ['JsonService', function($scope, JsonService){
JsonService.getData(function(data) {
console.log("Test");
$scope.length = data.length;
})}]);
And I get:
"Error: JsonService is undefined"
You're injecting 'JsonService' as the first parameter of your function, but you are using the JsonService as the 2nd parameter of your function.
Should be ['JsonService', '$scope', function($scope, JsonService){ or if $scope not needed then ['JsonService', function(JsonService){
This line in app.js should look like
controller('mainController', ['$scope','JsonService', function($scope, JsonService){
<script>
var app= angular.module('myApp', ['ngRoute', 'ngResource']);
app.factory('Greeter', ['$resource',function($resource){
return $resource(
'http://123.com/processor-url.php',{
},{
query: {
method:'GET',
/*params: { myvar: myvarActual },*/
isArray:true
}
}
);
}]);
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
alert($routeParams.myvar);
Greeter.query(function(data) {
$scope.output = data.myvar;
});
}]);
app.controller('homeController', ['$scope', function($scope){
}])
/*Final Config After Loading Everything*/
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/appointments/:myvar', {templateUrl: 'appointments.html', controller: 'appointmentController'});
$routeProvider.when('/home', {templateUrl: 'home.html', controller: 'homeController'});
$routeProvider.otherwise({redirectTo: '/home'});
}]);
</script>
In the above code, seems the controler is not even recognize myvar that was suppose to be included in the routeProvider's myvar. As the alert will show undefined, instead of the actually value of myvar (i.e. .../appointments/1066 ... if so I expect $routeParams.myvar = 1066, and alert($routeParams.myvar) should be 1066
$routeParams is missing from the dependency declaration so currently it's looking for myvar on Greeter which doesn't exist...
app
.controller('appointmentController', ['$scope', 'Greeter',function($scope,$routeParams,Greeter){
Should be...
app
.controller('appointmentController', ['$scope', '$routeParams', 'Greeter', function($scope, $routeParams, Greeter){
Here is the current (Working) way i have my angular app.
app.js
require('angular');
require('angular-ui-router');
var listStoresCtrl = require('./controllers/store/listStoresCtrl');
var createStoreCtrl = require('./controllers/store/createStoreCtrl.js');
var storeDetailsCtrl = require('./controllers/store/storeDetailsCtrl.js');
var listDepartmentsCtrl = require('./controllers/dept/listDepartmentsCtrl');
var createDepartmentCtrl = require('./controllers/dept/createDepartmentCtrl.js');
//-- init angular js
var ngApp = angular.module('ngApp', ['ui.router'], function($interpolateProvider){
//-- as the output conflicts with blade lets alter the defaults
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
}).config(['$stateProvider','$logProvider','$urlRouterProvider', function ($stateProvider, $logProvider,$urlRouterProvider) {
//-- enable logging
$logProvider.debugEnabled(true);
}]);
ngApp.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl]);
ngApp.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl]);
ngApp.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
ngApp.controller('listDepartmentsCtrl', ['$scope', 'Department', '$log', listDepartmentsCtrl]);
ngApp.controller('createDepartmentCtrl', ['$scope', '$log', 'Department', '$rootScope', '$timeout','ManagerService', createDepartmentCtrl]);
//-- stick it all together and kick it off
angular.bootstrap(document, ['ngApp']);
BUT i would like to restructure this so that my Store ctrls etc and Department ctrls are within their own module.
EG: storeCtrls.js
angular.module('storeCtrls', [])
.controller('listStoresCtrl', ['$scope', 'Store', '$log', listStoresCtrl])
.controller('createStoreCtrl', ['$scope', '$log', 'Store', '$rootScope', '$timeout','ManagerService', createStoreCtrl])
.controller('storeDetailsCtrl', ['$scope', '$log', '$rootScope', 'Store', storeDetailsCtrl]);
Then in the app.js file call them in like so.
require('./controllers/storeCtrls');
angular.module('ngApp', ['storeCtrls'], function($interpolateProvider){...}
But for some reason this does not work I am get getting an error of Uncaught object.
Bit of relevant history on this:
I am using Gulp and Browserify to do my JS.
My listStoresCtrl for example are using the
module.exports = function(scope, Store, log){...}
method to return them.
UPDATE
i seem to have sorted the Uncaught object, as i was missing the ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
so it should be
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...
Seems the main issue was i was not injecting some items that i simply removed and forgot to re-add.
I simply must of copied over this injection ['ui.router'] with the call to
angular.module('ngApp', ['storeCtrls']...
where i should have been adding as well below:
angular.module('ngApp', ['ui.router', 'storeCtrls']..
Now to get the rest to link up...