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
Related
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 have the following angular configuration in the file index.js:
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry',
templateUrl: 'app/views/entry/entry.html',
controller: 'EntryPageController'
})
$urlRouterProvider.otherwise('/entry');
}])
.controller('EntryPageController', ['$scope', '$state', function ($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}])
I'm trying to move the controller definition (which works in the example above) into its own file, as follows:
// file name entry-ctrl.js
(function () {
'use strict';
angular.module('ionicApp', ['ionic'])
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
})
();
In index.html I've referenced the file as
<script src="app/views/entry/entry-ctrl.js"></script>
Unfortunately, I can't get the application to behave correctly. When I use the original code, the page appears as I expect. But when I use the code in the entry-ctrl.js file, nothing appears.
Is there something else I need to do to use the code in the entry-ctrl.js file?
For the record, this is my entry.html:
<ion-view title="{{navTitle}}" class="bubble-background">
<ion-content has-header="true" padding="true">
<h1>I'm working!</h1>
<a class="button button-positive" ng-click="signIn()" ui-sref="main.home">Sign In</a>
</ion-content>
</ion-view>
It's seems that you declared your angular app twice, once in index.js and in entry-ctrl.js.
I would change it to this:
index.js
angular.module('ionicApp', ['ionic'])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('entry', {
url: '/entry',
templateUrl: 'app/views/entry/entry.html',
controller: 'EntryPageController'
})
$urlRouterProvider.otherwise('/entry');
}])
entry-ctrl.js
(function () {
'use strict';
angular.module('ionicApp')
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
})();
in angular, you declare your app with an array of dependencies:
angular.module('ionicApp', ['ionic'])
and you reference it only by name:
angular.module('ionicApp')
Would it be possible that your Controller definition has to be above your module definition ?
(function () {
'use strict';
// First, define your Controller
function EntryPageController($scope, $state) {
$scope.navTitle = 'Entry Page';
$scope.signIn = function () {
$state.go('main.home');
}
}
// Then call it in your module
angular.module('ionicApp', ['ionic'])
.controller('EntryPageController', ['$scope', '$state', EntryPageController]);
})(this);
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 can't figure out why the module is failing to load on ngRoute. I have angular and angular-route scripts loading from cdn but I'm still getting the error Error: $injector:modulerr
Module Error
<!--Angular-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.min.js"></script>
<script src="app/index.js"></script>
<script src="app/components/blog/blogControllers.js"></script>
// index.js
'use strict';
var pdizzApp = angular.module('pdizzApp', [
'ngRoute',
'blogControllers'
]);
pdizzApp.config(['$routeProvider'], function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
})
});
//blogControllers.js
'use strict';
var blogControllers = angular.module('blogControllers', []);
blogControllers.controller('BlogListController', ['$scope', '$http',
function ($scope, $http) {
$http.get('/api/blog/post').success(function (data) {
$scope.posts = data._embedded.post;
});
$scope.toDate = function(date) {
return new Date(Date.parse(date));
}
}]);
Your config block should look as follows, i.e. the method needs to be declared inside the array that you pass to the config method:
pdizzApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
});
}]);
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");
}]);