var myapp = angular.module('myapp',['ngRoute','ui.bootstrap']);
var myapp = angular.module('myapp', ['infinite-scroll']);
I want to use the infinite-scroll http://binarymuse.github.io/ngInfiniteScroll/documentation.html but it seems like I'm doing it the wrong way. How to include the module?
Add it to the original list instead of trying to declare a new module
var myapp = angular.module('myapp',['ngRoute','ui.bootstrap', 'infinite-scroll']);
Related
I am beginning to work on an AngularJS app, with a single route, /login. Here is the code for the Controller that handles that route.
angular = require('angular');
// require('../resources/loginResource');
var di = ['$scope'];
var controller = function LoginCtrl($scope) {
$scope.myArray = [
"foo",
"bar",
"baz"
];
};
angular.module('myApp', [])
.controller('LoginCtrl', di.concat(controller) );
When the second line in the file, the reference to loginResource, is commented, the page /login appears just fine. But when I uncomment it, the page renders blank. No console errors, nothing in my terminal output.
Here is the loginResource file:
angular = require('angular');
require('angular-resource');
var app = angular.module('myApp', ['ngResource']);
var di = ['$resource'];
var myResource = function Foobar($resource) {
return $resource('http://mockbin.org/bin/c7bb5923-18ec-4e2f-9189-df8fb80b606b');
};
app.factory('Foobar', di.concat(myResource));
I am using gulp and Browserify.
This seems to be the proper way to inject a Service that uses $service. If so, why is the page rendering blank?
The problem will be the repeated definition of the myApp module. In your first snippet, you have:
angular.module('myApp', [])
and in your second, you have:
var app = angular.module('myApp', ['ngResource']);
You need to use a different name for the module in the second snippet and you need to include that name in the configuration of the app module.
Change the first snippet to something like this:
angular = require('angular');
require('../resources/loginResource');
...
angular.module('myApp', ['loginResource']) ...
and change the second to something like this (it's probably a good idea to rename the app variable, too - as it's not the app module):
angular = require('angular');
require('angular-resource');
var mod = angular.module('loginResource', ['ngResource']);
...
mod.factory('Foobar', di.concat(myResource));
https://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js
The above link defined external js file i don't know the injector to angular-1.0.0rc9.js so the my app is not run in browser
var myApp = angular.module('myApp', ['what injector:module is define here']);
please help me
You don't need to inject any dependencies to start your app. However you should add dependencies when you need them.
(function () {
'use strict';
var myApp = angular.module('myApp');
})();
Let's say you need the ui.bootstrap dependency, you can modify your code to look like this.
(function () {
'use strict';
var myApp = angular.module('myApp', ['ui.bootstrap']);
})();
I have an angular module which I want to have a dependency injected into it conditionally. i.e.
var myapp = angular.module('myapp', [
'ngRoute',
'myappcontroller',
'ngGrid' // I want to include ngGrid only if I am running a debug version of myapp
]);
Is there any way to do that?
You can, but with a bit of extra work.
The second parameter is an array so nothing prevents you from doing this:
var dev = ['foo', 'bar'];
var prod = ['foo'];
var deps = dev; //or prod
angular.module('foo', []);
angular.module('bar', []);
angular.module('myApp', deps);
Im trying to separate my Angular controllers into different files. Right now each one appears like this.
AddPropertyController.js
angular.module('myApp.controllers.addproperty', [])
.controller(...);
SearchController
angular.module('myApp.controllers.search', [])
.controller(...);
Now for each one of these I had to include them in the Angular myApp. via:
angular.module('myApp', [
'myApp.controllers.search',
'myApp.controllers.addproperty'
])
my question is, is there a way to just include them all at once instead of adding them individually? My first attempt was to name each module the same, angular.module('myApp.controllers',...) then just include myApp.controllers in the App. But that didn't seem to work... I guess Im asking is what is the best way to have separated controller files but in all in one module. Thanks for the help!
Check out the angularjs docs for info on controllers and adding them to app level modules...
For example for your code:
var myApp = angular.module('myApp',[]);
myApp.controller('SearchController', ['$scope', function($scope) {
$scope.search = 'Hola!';
}]);
myApp.controller('AddPropertiesController', ['$scope', function($scope) {
$scope.props = [];
}]);
You're basically attaching each controller to the myApp instance, so the app is aware of the controllers.
I would organize them like this:
MyController1.js
var MyController1 = ['$scope', function($scope) {
}];
MyController2.js
var MyController2 = ['$scope', function($scope) {
}];
MyModule.js
var app = angular.module('MyModule',[]);
app.controller({
MyController1: MyController1,
MyController2: MyController2,
etc
});
This is the similar to how the Angular source code is itself organized:
AngularPublic.js
ng Directives
I want to follow angularjs recommendation (http://docs.angularjs.org/guide/module):
While the example above is simple, it will not scale to large
applications. Instead we recommend that you break your application to
multiple modules like this:
A service module, for service declaration A directive module, for
directive declaration A filter module, for filter declaration And an
application level module which depends on the above modules, and which
has initialization code.
So I've created services.js file that only contains:
window.myservices = angular.module('services', []);
And then I added a few services where each service file starts with:
window.myservices.factory('service1', function() {
....
});
I made the same for filters.js and directives.js.
In my app.js file I made:
window.App = angular.module('app', ['services', 'filters', 'directives']).
// run \ config \ whatever
How can I do it without making variables on window?
There's no need for globals at all:
// Define your services
angular.module('services', [])
.factory('service1', function(){})
.factory('service2', function(){});
// Define you main app module and specify the dependencies
angular.module('MyApp', ['services']);
As Stewie said, you can use angular.modue('service',[]);
However you only need to do this in the first loaded file, like so:
file1.js
var mod = angular.module('service',['dependancy']);
file2.js
var mod = angular.module('service');
index.html
<script src="/scripts/file1.js"></script>
<script src="/scripts/file2.js"></script>
Another option is to use namespaces...
file1.js
var mod = angular.module('service.part1',[]);
file2.js
var mod = angular.module('service.part2',[]);
main.js
var mod = angular.moduel('service', ['service.part1','service.part2']);
EDIT (plunker):
http://plnkr.co/edit/i75A5CQeSptQjaxvR8qi?p=preview