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
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
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 )
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]);
});
}
);
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) {
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'])