Angular ngResource still not recognising $resource - javascript

My app has this line at the top, like most angular apps. I assume here it's pulling in ngRoute and ngResource
var myApp = angular.module('myApp', ['ngRoute', 'ui.bootstrap', 'ngResource']);
how ever I create a service below:
myApp.factory('NewsService', function($resource) {
return $resource('/api/news/:id', {id: '#id'}, {update: {method: 'PUT'}})
})
and in my console I get this message:
Error: [$injector:unpr] Unknown provider: $resourceProvider <- $resource <- NewsService
In my angular folder I have all the js files associated with angular, from angular-animate.js through to angular-touch.js including obviously angular-resource.js, I'm wondering why it is complaining, or what I can do to narrow down to the specific error.
I'm not using the min files at the moment because the errors aren't verbose enough.
In my controllers I just do this:
function newsCreateController($scope, NewsService) {}

You need to make sure you include the appropriate angular files, and application files in your index.html, eg:
<!-- angular related files -->
<script src="/lib/angular/angular.js"></script>
<script src="/lib/angular-resource/angular-resource.js"></script>
<!-- application related files -->
<script src="/apps/myapp/services/newsservice.js"></script>
<script src="/apps/myapp/app.js"></script>
Obviously this is an example, and depends on your file structure.
Once everything is included, you need to make sure your modules are setup correctly, and injected accordingly.

Related

Angular 6 Module - angular not defined

im very new to Angular and i started a test Project with Angular Cli.
All works fine but i have installed a 3.rd Party Module (angular-ui-carousel).
Now i get following error:
Uncaught ReferenceError: angular is not defined
at Module../node_modules/angular-ui-carousel/dist/ui-carousel.js (ui-carousel.js:21)
ui.carousel.js (only the first rows..)
'use strict';
(function (angular) {
// Create all modules and define dependencies to make sure they exist
// and are loaded in the correct order to satisfy dependency injection
// before all nested files are concatenated by Gulp
// Config
angular.module('ui.carousel.config', []).value('ui.carousel.config', {
debug: true
});
// Modules
angular.module('ui.carousel.providers', []);
angular.module('ui.carousel.controllers', []);
angular.module('ui.carousel.directives', []);
angular.module('ui.carousel', ['ui.carousel.config', 'ui.carousel.directives', 'ui.carousel.controllers', 'ui.carousel.providers']);
})(angular); //error points here
'use strict';
is there any workaround to run this module in Angular 6?
You're confusing Angular and AngularJS.
angular. references are applicable to AngularJS(AngularJS 1.x)
And Angular(Angular 2+) don't have angular. references.
angular-ui-carousel is a library for AngularJS and NOT Angular
Please consider using some other library that is meant for Angular, like ng-simple-slideshow

Foundation for apps: Creating separate files for angularjs controllers, services etc

I just got started with Foundation for Apps, but I was having trouble adding my angular controllers in a separate folder and using them.
I have this current structure in my assets' js folder:
js/
app.js //this has all the controllers etc. by chaining
but I want it to be
js/
app.js
controllers/
home.controller.js
main.controller.js
I don't want to keep a single large js file developed by chaining my controllers, services etc. I want a more modular structure as specified.
When I changed it to the modular structure, I got following three errors:
1. 'HomeCtrl' not defined.
2. Uncaught SyntaxError: Unexpected token < at the 1st line of home.controller.js
3. Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:8079/assets/js/home.controller.js". at the point where I am including 'home.controller.js' in index.html
Here's my template:
---
name: home
url: /
controller: HomeCtrl
---
<div class="grid-container">
<h1>Welcome to Foundation for Apps!</h1>
<p class="lead">This is version <strong>1.1 Weisshorn</strong>.</p>
</div>
home.controller.js:
app.controller('HomeCtrl', ['$scope', function($scope) {
$scope.temp = 'hello';
}]);
app.js:
var app = angular.module('application', [
'ui.router',
'ngAnimate',
'foundation',
'foundation.dynamicRouting',
'foundation.dynamicRouting.animations'
])
.config(config)
.run(run)
;
config.$inject = ['$urlRouterProvider', '$locationProvider'];
function config($urlProvider, $locationProvider) {
$urlProvider.otherwise('/');
$locationProvider.html5Mode({
enabled:false,
requireBase: false
});
}
function run() {
FastClick.attach(document.body);
}
To solve this I tried adding my controller reference in gulpfile.js by referring this
I also referred this but I still cannot get it to work. Any idea what I am doing wrong?
Inside gulpfile.js check this line. You'll see that only client/assets/js/app.js is used when coupling your minimized file. You need to make it copy all your controller's .js files too :
// These files are for your app's JavaScript
appJS: [
'client/assets/js/app.js',
'./client/assets/js/controllers/*.js',
]
You can also use an angular module to hold all your controllers & services then injecting it to your app module. This is how I'm using it here and this is how it is also done in this great ready to use Fork : https://github.com/CreativityKills/foundation-apps-template
Note: remember to restart gulp after each modify of its config file and check if your code has been well included in the built JS file ( by default is /build/assets/js/app.js )

Angular unable to instantiate module when loaded using RequireJS

There is something really weird going on when I'm using RequireJS with AngularJS. I managed to load all my angular dependencies through RequireJS. I can see those scripts downloaded when I open up the Sources pane in Chrome's developer tool. But Angular keeps throwing an error in the console that it failed to instantiate the module:
Uncaught Error: [$injector:modulerr] Failed to instantiate module MyTestApp due to:
Error: [$injector:nomod] Module 'MyTestApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure...<omitted>...0)
It seems like Angular, when loaded with RequireJS, cannot bind with the ng-app tag in the HTML page. I'm not sure if this is the case but it seems like so to me because when I import angular.min.js manually into the HTML page, it all works fine.
Did I do anything wrong when using RequireJS with Angular? How should I use the two together? Here's how my code look:
index.html
<!doctype html>
<html lang="en" ng-app="MyTestApp">
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<link rel="stylesheet" href="css/style.css"/>
<script data-main="main" src="js/require.js"></script>
</head>
<body>
<div ng-controller="TestController">{{helloMessage}}</div>
</body>
</html>
main.js
require.config({
baseUrl: "scripts/app",
shim: {
"angular": {
exports: "angular"
},
"angular.route": {
deps: ["angular"]
},
"bootstrapper": {
deps: ["angular", "angular.route"]
},
},
paths: {
"angular": "../angular",
"angular.route": "../angular-route",
"bootstrapper": "bootstrapper"
}
});
require(["angular", "angular.route", "bootstrapper"],
(angular, ngRoute, bootstrapper) => {
bootstrapper.start();
}
);
bootstrapper.js
function run() {
app = angular.module("MyTestApp", ["ngRoute"]);
app.controller("TestController", TestController);
console.log(app); //Prints object to console correctly, ie, angular was loaded.
}
Here is how I would do it (DEMO).
In main.js, require angular, your app and maybe a controllers.js and other files:
require(['angular', 'app'], function (app) {
angular.element(document).ready(function () {
angular.bootstrap(document, ['MyTestApp']);
});
});
In app.js, require angular and angular route:
define(['angular', 'angular.route'], function() {
var app = angular.module("MyTestApp", ["ngRoute"]);
return app;
});
This is manual bootstraping and therefore does not need the ng-app tag at all.
I'm currently working on a pretty big application with angular and requirejs and I prefer to load the "big" libraries that are used by the whole app anyway independently from requirejs.
So I load one big file which includes angular, angular-route, requirejs, main.js in the beginning. Or if it makes sense to use a CDN version, load it from there. On the other hand I load every controller, directive, filter and service on request. I currently have 50+ controllers which allready makes a difference in initial load time.
But that all depends on the size of your app.
First you does not need to get a variable from the load of "angular.route". The module will be directly loaded in angular.
I think you should also wait for the dom ready event and also make a requirejs app module that will be in charge of loading all app dependencies:
app/app.js:
define([
"angular",
"angular-route",
"app/controllers",
"app/directives",
[...]
], function(angular){
var app = angular.module('app', [
"ngRoute",
"app.controllers",
"app.directives",
[...]
])
.config([function(){
// app configuration goes here
}]);
return app;
})
main.js
require(["angular", "app/app"],
function (angular, app){
angular.element(document).ready(function() {
angular.bootstrap(document, [app.name]);
});
}
);

Angular $resource: Unknown Provider error, loading dependancies and angular elements

Been doing rails for about a year but this is my first real angular app. So far I've been mostly piecing things together from tutorials, but I'm having troubles. I've searched through other SO questions, but I haven't found a scenario like this.
I'm getting the following error when I load the page. I believe it has to do with how I'm requiring modules / injecting dependancies. Any illumination here is greatly appreciated!
Error: [$injector:unpr] Unknown provider: ReleaseProvider <- Release
my main app - mighty.js:
var mightyReal = angular.module('mightyReal', ['ngResource']);
mightyReal.factory ('Release', ['Resource', function($resource) {
return $resource('/api/releases/all');
}]);
my controller - releaseController.js:
angular.module('mightyReal').controller('releaseController', [ '$scope', 'Release', function($scope, Release){
$scope.releases = Release.query();
}]);
my order of loading js scripts - index.erb:
<script src="js/angular.js"></script>
<script src="js/resource.js"></script>
<script src="js/mighty.js"></script> <!-- main app -->
<script src="js/auth.js"></script>
<script src="js/releaseController.js"></script>
and my sinatra API route - index.rb
get '/api/releases/all' do
content_type :json
Release.all.to_json
end
I think you need to change this:
mightyReal.factory ('Release', ['Resource', function($resource) {
to this:
mightyReal.factory ('Release', ['$resource', function($resource) {

Unknown provider: $resourceProvider <- $resource with AngularJS

I have declared the following in app.js
angular.module('adminApp', ['ngGrid','ngResource']);
in data.js
angular.module('adminApp', [])
.factory('testAccountService', function ($http) {
var TestAccount = {
in GridCtrl.js
angular.module('adminApp',[])
.controller('GridCtrl', function ($scope, $http, $resource, testAccountService) {
$scope.selectedTestAccount = null;
I am loading my scripts like this:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-resource.min.js"></script>
<script src="~/App/admin/services/Data.js"></script>
<script src="~/App/admin/controllers/GridCtrl.js"></script>
When I run this it gives me an error saying:
Error: Unknown provider: $resourceProvider <- $resource
at Error (<anonymous>)
at http://127.0.0.1:81/Scripts/angular.js:2682:15
at Object.getService [as get] (http://127.0.0.1:81/Scripts/angular.js:2810:39)
at http://127.0.0.1:81/Scripts/angular.js:2687:45
Is there something wrong with the way I am doing this. I am confused about how to set up the service but I can't see what's wrong:
$resource is not part of AngularJS Core.
You have to include: angular-resource.js.
From the docs:
To use $resource make sure you have included the angular-resource.js that comes in Angular package. You can also find this file on Google CDN, bower as well as at code.angularjs.org.
In your data.js and GridCtrl.js, you need to remove the [] from the angular.module('adminApp', []) call.
Like so: angular.module('adminApp')
Also, make sure your app.js is loaded first.
you would also need to include angular resource module definition 'ngResource' on your module defintion angular.module('adminApp', ['ngResource'])

Categories