I get: Error: w is not a function
scripts/app.js
var app = angular.module('app', [
'homepageControllers',
'ngRoute'
]);
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/home-page.html',
controller: 'homePageCtrl'
}).
otherwise({
redirectTo: '/homepage'
});
}]);
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', function ($scope, $http) {
console.log("controller loaded");
});
views/home-page.html
<div>
Work ffs!
</div>
index.html
<div ng-view></div>
I'm new to angular and followed this tutorial step-by-step. Google doesn't have the answer, ideas anyone?
This seems like a minifying issue. You should force dependency injections mapping :
Transform this :
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', function ($scope, $http) {
console.log("controller loaded");
});
to this :
scripts/controllers/homepageController.js
var homepageControllers = angular.module('homepageControllers', []);
homepageControllers.controller('homePageCtrl', ['$scope', '$http', function ($scope, $http) {
console.log("controller loaded");
}]);
Related
I have a link as follows:
view
And a div that's going to load Home.html as below:
<div class="col-md-8">
<ng-view></ng-view>
</div>
My angular config is:
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider) {
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
.controller("BlogController", function ($scope, $http) {
$http.get("/Home/GetBlogEntries")
.then(function (response) {
$scope.data = response.data;
});
$scope.removeBlogEntry = function (index) {
$scope.data.Data.splice(index, 1);
};
})
.controller("HomeController", function ($scope, $http) {
});
Before I click the link, the URL is showing http://localhost:58679/#/Home and after I click it, the address bar goes to http://localhost:58679/#!#%2FHome
Basically nothing happens and my home.html doesn't get rendered where it is supposed to.
Include $locationProvider.hashPrefix(''); in your config.
myApp = angular.module("myApp", ["ngRoute"])
.config(function ($routeProvider,$locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/Home", {
templateUrl: "Templates/Home.html",
controller: "HomeController"
})
})
This is app.states.js:
angular.module('fuelComparatorApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/404');
$urlRouterProvider.when('', '/');
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/components/home/views/home.view.html',
controller: "homeController",
controllerAs: 'ctrl'
})
.state('404', {
url: '/404',
templateUrl: 'app/shared/404.html'
});
}]);
And this is home.services.js:
(function () {
'use strict';
angular.module('fuelComparatorApp.homeServices', []).service('sayHelloService', sayHelloService);
sayHelloService.$inject = ['$http', '$q'];
function sayHelloService() {
function sayHi() {
console.log("hi from home service");
}
}
})();
home.controller.js
(function () {
'use strict';
angular.module('fuelComparatorApp').controller('homeController', homeController);
homeController.$inject = ["$scope", "$http", "$window", "$q", "sayHelloService"];
function homeController($scope, $http, $window, $q, sayHelloService) {
const vm = this;
vm.fuelComparatorService = sayHelloService;
sayHelloService;
return vm;
}
})();
Inside the index.html there is the usual ng-app="fuelComparatorApp" and home.view.html which utilises ng-controller="homeController" directive.
There are no errors, just the index.html doesn't show a anything from home.view.html as if I missed something somewhere.
Turned out this was missing from the index.html
<div ui-view></div>
This is specific to ui-router.
I got some problem when I'm trying to use an Angular service in the controlleur of my application.
When I'm trying to use function of my service in my controlleur, my console throw me an error :/
var app = angular.module('app', ['ngRoute'])
app.config(['$routeProvider',
function ($routeProvider) {
$routeProvider
.when('/login', {
controlleur: 'login',
templateUrl: 'modules/login/login.html'
})
.otherwise({
redirectTo: '/login'
});
}]);
app.service('coreServices', [function () {
this.helloConsole = function () {
console.log("console services");
};
}]);
app.controller('loginController', ['$scope', '$http', '$rootScope', '$location', 'coreServices', LoginController]);
function LoginController($scope, $http, $rootScope, coreServices) {
var vm = this;
vm.helloConsole = coreServices.helloConsole;
vm.helloConsole();
}
angular.js:13708 TypeError: vm.helloConsole is not a function
at new LoginController
I link you this fiddle to show you how I do: https://jsfiddle.net/h8yaxLap/2/
The error throwed is:
angular.js:13708 TypeError: vm.helloConsole is not a function
at new LoginController
Well in your example angular will map $location to coreService in the injected parameters in the function. So I would go for
app.controller('loginController', ['$scope', '$http', '$rootScope', '$location', 'coreServices', LoginController]);
function LoginController($scope, $http, $rootScope, $location, coreServices)
Change service function to return object
app.service('coreServices', function () {
return {
helloConsole: function () {
console.log("console services");
}
};
});
You missed $location parameter for the controller
function LoginController($scope, $http, $rootScope,$location, coreServices)
This is my first attempt to use the Angularjs and I'm trying to create a service and use it inside a controller:
var appTest = angular.module("appTest", ["ngRoute"]);
var appTestControllers = angular.module('appTestControllers', []);
appTest.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'partials/home.html',
controller: 'HomeCtrl'
});
$locationProvider.html5Mode(false);
}
]);
appTest.factory("booksApi", function($http){
var _getBooks = function() {
return $http.get('http://localhost/editora-voo/website/books.json');
};
return{
getBooks: _getBooks
};
});
appTest.controller('HomeCtrl', ['$scope', '$http', function($scope, $http, booksApi) {
booksApi.getBooks().success(function(data) {
$scope.books = data;
});
}]);
But it is returning an error: Cannot read property 'getBooks' of undefined
You missed to add booksApi depnedency inside your controller dependency array, You should add it first and then use that inside the function of controller.
Controller
appTest.controller('HomeCtrl', ['$scope', '$http', 'booksApi', //<--missed dependency here
function($scope, $http, booksApi) {
booksApi.getBooks().then(function(response) {
$scope.books = response.data;
});
}]);
Plunkr Here
I am trying to expose restful web service using angularjs ngResource using java as my backend everything seems to be correct but don't know What is wrong with my code
nothing gets displayed in browser help me with this
service.js
'use strict';
var employeeServices = angular.module('myApp.services',['ngResource']);
employeeServices.factory('Employees',['$resource',function ($resource){
return $resource('my service link', {},{
query:{method:'GET',isArray:true}
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Myctrl1',['$scope','Employees',function ($scope ,Employees){
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2',[function (){
}]);
app.js
'use strict';
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1',{templateUrl:'partials/partials.html',controller:'Myctrl1'});
$routeProvider.when('/view2',{templateUrl:'partials/partials1.html',controller:'Myctrl2'});
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
If you want to use service of one module in another module you have to inject it.
service.js
'use strict';
var employeeServices = angular.module('myApp.services', ['ngResource']);
employeeServices.factory('Employees', ['$resource', function ($resource) {
return $resource('my service link', {}, {
query: { method: 'GET', isArray: true }
});
}]);
Controller.js
'use strict';
angular.module('myApp.controllers', ['myApp.services']).
controller('Myctrl1', ['$scope', 'Employees', function ($scope, Employees) {
$scope.allemployees = Employees.query();
}]).
controller('Myctrl2', [function () {
}]);
app.js
'use strict';`enter code here`
angular.module("myApp", [
'ngRoute',
'myApp.controllers',
'myApp.services'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/view1', { templateUrl: 'partials/partials.html', controller: 'Myctrl1' });
$routeProvider.when('/view2', { templateUrl: 'partials/partials1.html', controller: 'Myctrl2' });
$routeProvider.otherwise({ redirectTo: '/view1' });
}]);
try this