<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){
Related
Please see my plunkr here
https://plnkr.co/edit/hk7Z0jMwOfoUwJZ98F7a?p=preview
In my app.js I have two controllers and a routeprovider with a resolve for TestController
var app = angular.module('app', ['ngRoute']);
app.controller('DefaultController', ['$scope', function($scope){
$scope.welcome = "Hello World";
}]);
app.controller('TestController', ['$scope', 'context', '$routeParams', function($scope, context, $routeParams){
$scope.text = "TestController loaded!"
}]);
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(){return 'test';}
}
})
}])
In my html, I have an ng-include which should also load test.html in the default view
<body ng-controller="DefaultController">
<h1>{{welcome}}</h1>
<div ng-include="'test.html'" ng-controller='TestController'></div>
</body>
I cannot take the resolve out of the routeProvider as I still need it to when the user goes to '../test'
Is there any way I can resolve contextProvider from the ng-include?
or is there better ways to do this?
Any help would be greatly appreciated.
Create a factory/service and use that:
app.factory('fooResolver', function() {
return {
resolveMe: function() {
return 'test';
}
}
});
Now, use this in your router config:
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider){
$routeProvider.
when('/test1',{
templateUrl: 'test1.html',
controller: 'TestController',
resolve: {
context: function(fooResolver) {
return fooResolver.resolveMe();
}
}
})
}])
And do the same in your controller:
app.controller('TestController', ['$scope', 'fooResolver', '$routeParams', function($scope, fooResolver, $routeParams){
$scope.text = "TestController loaded!"
var context = fooResolver.resolveMe();
}]);
I am getting the 'Controller is not a function error in my application.
From what I have read the most common issue is that it the controller file is not referenced in the html page - this is not the case for me.
I do not get the error when I have included the controller in the same file as declaring the module, but when I am using seperate files for each controller.
Here is my folder structure:
app.js:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'assets/controllers/mainController.js'
});
});
mainController.js
var myApp = angular.module('myApp');
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "test";
}]);
I have also read that when you declare a module, the array braces [] create a new module so I took them out of the module in mainController.js.
It works if I do this:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'mainController.js'
});
});
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "hi";
}]);
I have referenced the controller like this in my index.html in the head section:
<script src="assets/scripts/js/app.js"></script>
<script src="assets/controllers/mainController.js"></script>
When you are having controller in another file no need to give path of the controller there which you have given in your config
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
//Remove this
//controller: 'assets/controllers/mainController.js'
//and then try this
controller: 'mainController'
});
});
Are you using IIFE? If not you should not assign angular module
var myApp = angular.module('myApp'); on your mainController.js as it overwrite your myApp variable since it is treated as globe variable.
If you want to apply IIFE your code should be:
app.js
(function () {
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'assets/views/mainView.html',
controller: 'mainController'
});
});
})();
mainController.js
(function () {
var myApp = angular.module('myApp');
myApp.controller('mainController', ['$scope', function($scope){
$scope.name = "test";
}]);
})();
I'm trying to get a query value from my url using angular's routeParams.
I've included angular-route in my html page:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-route.min.js"></script>
Included Ng-Route in my app:
var app = angular.module('app', [
'ngRoute',
'reportController'
]);
And set up my controller as following:
var reportController = angular.module('reportController', []);
reportController.controller('CandidateCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
console.log(JSON.stringify($routeParams, null, 4));
$scope.person = $routeParams.person;
}]);
When I access the following URL, however, routeParams is an empty object: {}.
http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
What am I doing wrong?
Edit:
I've configure the possible route - my routeParams object is still coming up null. I've tried:
famaApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/report:person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
}]);
and
when('/report?person', {templateUrl: 'Report.html', controller: 'CandidateCtrl'});
Rather then accessing like
http://localhost:8080/report?person=afe75cc7-fa61-41b3-871d-119691cbe5ad
try to access it like
http://localhost:8080/#/report/afe75cc7-fa61-41b3-871d-119691cbe5ad
you will get the guid in $route.Params
You have to set your routes to receive the arguments you want with $routeProvider..
Example:
app.config(['$routeProvider', '$locationProvider' function ($routeProvider, $locationProvider) {
$routeProvider
.when('/',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.when('/:person',
{
templateUrl: 'someHtmlUrl',
controller: 'someController',
controllerAs: 'someCtrl',
caseInsensitiveMatch: true
})
.otherwise(
{
templateUrl: 'someHtmlUrl'
});
$locationProvider.html5Mode(true); //Use html5Mode so your angular routes don't have #/route
}]);
Then you can just do
http://localhost:8080/afe75cc7-fa61-41b3-871d-119691cbe5a
And the $routeProvider will call your html and your controller as you can see with the .when('/:person'.. and then you can try and access your $routeParams and you will have your person there, $routeParams.person.
I have an ApplicationController on the body tag. Inside this controller I am setting the username on a response from the server. Somehow the username variable is only available within the HomeController, which is currently not implemented.
index.html
<body ng-controller="ApplicationController">
Welcome {{username}}.
<div ng-view></div>
</body>
home.html
<div>You are logged in as {{username}}.</div>
Javascript
angular.module('APP', [
'ngRoute',
'APP.services',
'APP.controllers',
'APP.auth'
])
.config(function($routeProvider, $httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
$routeProvider.when("/", {
templateUrl: "/static/partials/home.html",
controller: "HomeController"
});
return $routeProvider.otherwise({
redirectTo: "/"
});
}
);
angular.module("APP.controllers", ['ui.bootstrap.modal'])
.controller("HomeController", function($scope, $rootScope) {
})
.controller('ApplicationController', function($scope, $rootScope, USER_ROLES,
AUTH_EVENTS, AuthService, $modal,
UserService) {
$scope.username = null;
$scope.setCurrentUser = function(user) {
$scope.username = user.username;
}
$rootScope.$on(AUTH_EVENTS.loginSuccess, function(event) {
UserService.get().then($scope.setCurrentUser);
});
});
Generated output
<body>
Welcome
<div>You are logged in as AceUser</div>
</body>
Update 1
If I select the ApplicationController element and then run angular.element($0).scope() I can see the scope and the username available. But still it is not output in the document.
Update 2
The index.html was being generated with Django. Django was processing the template variable and not sending it as output. The solution was to wrap the variable with the {% verbatim %} tag. I will leave this up here for anyone who also has this problem.
Not quite sure why it works in the HomeController. I put together a working Plunk for you to compare your code with.
angular.module('APP', [
'ngRoute',
'APP.controllers'
])
.config(function($routeProvider, $httpProvider) {
$routeProvider.when("/", {
templateUrl: "home.html",
controller: "HomeController"
});
return $routeProvider.otherwise({
redirectTo: "/"
});
});
angular.module("APP.controllers", [])
.controller("HomeController", function($scope, $rootScope) {})
.controller('ApplicationController', function($scope, $rootScope) {
$scope.username = null;
$scope.setCurrentUser = function(user) {
$scope.username = user.username;
}
$scope.setCurrentUser({username: 'bob'});
});
I'm having problems finding the solution to TypeError: undefined is not a function in my code.
I have the following app.js:
var app = angular.module('test', ['ngRoute', 'test.services', 'test.directives', 'test.controllers']);
app.config(function ($routeProvider, $httpProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/q/:q', {
templateUrl: '/templates/productlist.html',
controller: 'ProductCtrl'
}).
otherwise({
redirectTo: '/q'
});
});
Then I have a controller
var controllers = angular.module('test.controllers', []);
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope, ProductFactory, $routeParams) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);
And a factory
var services = angular.module('test.services', ['ngResource']);
var baseUrl = 'http://localhost\\:8080';
services.factory('ProductFactory', function ($resource) {
return $resource(baseUrl + '/test/smart/:query', {}, {
query: { method: 'GET', isArray: true }
})
});
This code results on load in the above mentioned TypeError on the line $scope.products = ProductFactory.query({query: $scope.query}); in my controller.
Further, when debugging my code I see that $routeParams.q is null or undefined.
What I want is that in my controller the $scope.products variable becomes an array with the result of the query.
What am I doing wrong?
Please try with correct function arguments,
controllers.controller('ProductCtrl', ['$scope', '$routeParams', 'ProductFactory',
function ($scope /*ProductFactory*/, $routeParams, ProductFactory) {
$scope.query = $routeParams.q;
$scope.products = ProductFactory.query({query: $scope.query});
}]);