I have this code :
var app = angular.module("malocFeApp",['leaflet-directive']);
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
It prevent the template to show up.
When I remove the requires the template show up:
var app = angular.module("malocFeApp");
app.controller('MainCtrl',[ "$scope", function($scope) { }]);
Why did the requires prevent the module to work correctly?
Ensure you have the angular leaflet.js script referenced in your HTML
Make sure it is referenced after angular.js?
Check your JavaScript console output (F12 in your browser) for errors regarding dependency injection errors
Related
I like to use Popover in my AngularJS application and have included ui-bootstrap for this, but I get an injection error:
Error: [$injector:unpr] Unknown provider: ui.bootstrapProvider <- ui.bootstrap
In my index.html
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.4.js"></script>
In my controller class:
angular
.module('app')
.controller('TeamsController', TeamsController);
TeamsController.$inject = ['Flash', '$scope', 'ui.bootstrap'];
function TeamsController(Flash, $scope, $modal)
{
//Code here
}
I cant really figure out how to do this correctly.
You have to include it as a dependency to your app:
angular.module('myModule', ['ui.bootstrap']);
More info on the Angular UI page.
Update
Working plunker. Note that I have removed the Flash dependency because I don't know what it is, you must add it yourself back in the script.
I am new to angularJs. I am confused which one is best way to create a controller for ng-app="mainApp". In programming other programming languages that I had worked on suggest to keep relative data together. But in angularJs it's considered best practice to have new module for controllers when we can define controller over main app module. If we create controller on mainApp it will keep controller and bind which is what we want in other languages.
var myapp = angular.module("mainApp", []);
myapp.controller("testController", function($scope)
{
$scope.value = "test";
})
//OR
angular.module("mainApp", ["moduleController"]);
angular.module("moduleController", []).controller("testController", function($scope){
$scope.value = "test";
})
For production environment which one should be used.??
Option 1:
var myapp = angular.module("mainApp",[]);
myapp.controller("testController",function($scope)
{
$scope.value="test";
})
Option 2:
angular.module("mainApp", ["moduleController"]);
angular.module("moduleController",[]).controller("testController",function($scope){
$scope.value="test";
})
Option 2 is better because this will allow you to write your controllers in separate files. As a result your code will be more readable. It'll also help you if you want to reuse your controllers in other AngularJS projects.
For example, you can write the following code in one file e.g app.js:
angular.module('mainApp',['ngRoute', 'appController']);
And you can write the controller in another file e.g controllers.js:
var appController= angular.module('appController', []);
appController.controller('testController', ['$scope',
function($scope) {
$scope.value="test";
}
]);
Now, you can reuse the controllers in another project by just adding the controllers.js file in the project and adding dependency to appController in the app.js file.
Neither, none of them will run in production environment where all script will be minified. Angular's injector subsystem is able to find and resolve $scope, $location, $etc and provide them to the component as requested.
myapp.controller("testController",function($scope)
{
$scope.value="test";
})
However, upon minification, the code above will end up looking something like:
a.controller("testController",function(b)
{
b.value="test";
})
which would cause the dependency injection to fail and result in a runtime error.
You will have to use it as below:
var myapp=angular.module("mainApp",[]);
myapp.controller("testController", ['$scope',function($scope)
{
$scope.value="test";
}]);
In this case, the controller function is initialized inside of an array after a list of each dependency as string literals. This ensure dependency injection is properly maintained, even through minification or uglification.
I have this global set up for my angular App module:
var App = angular.module('App', [], function ($interpolateProvider) {
//$interpolateProvider.startSymbol('<%');
//$interpolateProvider.endSymbol('%>');
});
I include it in all pages with angular stuff.
I then have a controller loaded on a page that requires a service called 'angularFileUpload':
App.controller('FileUploadController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
If i place that service inside the module array, it works fine. Is there a way of just attaching it to this controller instead... this means i do not have to load the script files for every page using this module regardless of if the controllers require the angularfileUpload service or not.
Edit: regarding the last comment
If i declare:
var App = angular.module('App');
How do i then add that service to the module?
This is an ng-animate noob question. I looked at the example at angularjs.org and copied the html and css into my project. I added ngAnimate to the dependencies of my app. But it's not working. Upon (un)checking, the correct div is displayed, but no animation.
I tried adding 'ngAnimate' to the dependencies of my Controller, but then I get this error: http://errors.angularjs.org/1.2.11/$injector/unpr?p0=ngAnimateProvider%20%3C-%20ngAnimate
i notice that the example app has ng-app="ngAnimate" in the body tag, I thought adding ngAnimate to my dependencies would do the same.
Can anyone help?
here is the fiddle : enter link description here (unfortunatley angularjs not working)
var app = angular.module('my', [
'ngAnimate',
'my.controllers'
]);
var controllers = app.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
$scope.checked = true;
});
upgrading from angularjs 1.2.11 to 1.3.0-beta7 did the trick.
I was following the angular docs and other links in order to create a "component" with angular inside a rails-based project.
The problem is that I can't correctly initialize the app, and instead I got two identical errors
Uncaught Error: No module: testApp0
Uncaught Error: No module: testApp0
In the following jsfiddle I try to show you my point http://jsfiddle.net/d8Lyu/
I'm pretty new in angular and the official documentation isn't very helpful
You are almost here! Just remember angular is modular and every module need to be declared with an angular.module('my_module_name', ['my_modules_dependency']).
Just refactor your code like that :
angular.module( //this is your app module
'testApp0',
['testApp0.controllers'] //your app need your controller as a dependency to works
);
angular.module( //this is your controller module
'testApp0.controllers',
[]
).controller('sliderCtrl', ['$scope', function($scope) {
$scope.greeting = "hellow" //you pass a gretting variable to your template
}
])
An other thing : you declare a gretting variable in your controller but acces it with user.hellow in your template. Just put {{ gretting }}.
One last thing, in the
frameworks and extensions
of fiddle change 'onLoad' to 'in body', you don't want your angular app to be ready before the DOM.
If you plan to use angular, look at : angular-app. The tutorial app can't be trusted for serious angular developement.
Use this jsfiddle as a reference: http://jsfiddle.net/joshdmiller/HB7LU/
You need to add an external resource, change settings in the 'fiddle options' section and the 'frameworks and extensions' section.
Once everything is setup you can create your angular in the javascript pane likeso:
var myApp = angular.module('myApp',[]);
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});
function MyCtrl($scope) {
$scope.name = 'Superhero';
}