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));
Related
I'm trying to make an Angular Service that houses common functions.
I bundled the code within my MVC app:
bundles.Add(new ScriptBundle("~/bundles/Angular")
.IncludeDirectory("~/app", "*.js", true));
And I checked in Developer Tools if it actually brought in my Common Folder with Common.js :
I added Common to the App :
var app = angular.module('app',
[
'JobCtrl',
'JobSvc',
'WebsiteCtrl',
'WebsiteSvc',
'myClientCtrl',
'ClientSvc',
'MediaCompanyCtrl',
'MediaCompanySvc',
'PageAlertSvc',
'ui.bootstrap',
'ui.bootstrap.tpls',
'Common'
]
);
and to the Controller:
angular.module('app', ['ui.bootstrap', 'ui.bootstrap.tpls'])
.controller('JobCtrl',
[
'JobService',
'WebsiteService',
'MediaCompanyService',
'ProductService',
'$scope',
'$uibModal',
'PageAlertService',
'Common',
function (JobService, WebsiteService, MediaCompanyService,
ProductService, $scope, $uibModal,PageAlertService, Common)
This is what my Common.js file looks like:
angular.module('app')
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
Whenever it is called within my JobCtrl I get a Error: $injector:unpr
Unknown Provider.
Could anyone see what I may be doing wrong where it won't recognize my Common.js file? When I move Common.js to the Services folder and try calling it within my controller it works, but not when it is in my Common Folder. Makes no sense!
Thanks in advance!
That is simply because you are defining your app..twice!!!!
angular.module('app', []) // this is where you re-define your app
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
should be:
angular.module('app')
.service('Common', function () {
this.heyThere = function ()
{
console.log('Just wanted to say hey there')
};
});
the module function has 2 modes.. with 2 arguments you are setting up your app.. with a single argument you just getting a reference to an existing app (which is already defined before that)
Please be careful when you use the declaration of a module. You are basically reassigning the app module to different instances.
angular.module('app', [dependencies]) //Constructs a module with dependencies
angular.module('app').service(...) //Associates the components (service)
//with the app module.
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 am getting started with AngularJS, and as I understand, I can have different controllers for different sections of my web page. I am having the problem getting it work. I have two sections of my page and corresponding to each one ng-controller - JSFiddle. Only the section that come first works. For example currently, app1 works fine, but when I move it below app2, only app2 works fine. What could be wrong? Much appreciate any explanation regarding why this behavior and any links.
You can have multiple controllers, but you cannot have multiple ng-app directives on the same page. This means you should only have a single ng-app directive in your html that points to a single module that will be used in your application.
You then define this module and define all your controllers in this module:
var app = angular.module('app', []);
app.controller('TextController', function ($scope) {
//Controller Code Here
});
app.controller('ItemController', function ($scope) {
//Controller Code Here
});
If for some reason you want to have controllers in separate modules, you can still do that, and include those modules as dependencies of your main module:
var items = angular.module('items', []);
var text = angular.module('text', []);
var app = angular.module('app', ['items', 'text']);
text.controller('TextController', function ($scope) {
//Controller Code Here
});
items.controller('ItemController', function ($scope) {
//Controller Code Here
});
Generally you don't need to have a module for each controller. Modules are used to group related pieces of functionality together to make it easy to take that and re-use it in another application.
Here are links to some examples:
Single Module : http://jsfiddle.net/36s7q/4/
Multiple Modules: http://jsfiddle.net/36s7q/5/
Notice how in both example there is only a single ng-app on the page.
Take a look at this, I changed a lot around. http://jsfiddle.net/36s7q/6/
No need for two app modules on the page to achieve two controllers, you can have multiple controllers within the same module. I also simplified the syntax. Take a look.
var items = angular
.module('app1', [])
.controller('ItemController', function($scope) {
$scope.items = [ {
title : 'Pencil',
quantity : 8,
price : 4.2
}, {
title : 'Pen',
quantity : 2,
price : 5.2
}, {
title : 'Watch',
quantity : 3,
price : 10.2
} ];
})
.controller('TextController', function($scope) {
$scope.text = {
message : 'Welcome!!'
};
});
Here is how you have multiple controllers:
var app = angular.module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);
app.controller('DemoCtrla', DemoCa)
.controller('DemoCtrlb', DemoCb)
.controller('DemoCtrlc', DemoCc);
function DemoCa($mdConstant) {
// function here
}
function DemoCb($mdConstant) {
// function here
}
function DemoCc($mdConstant) {
// function here
}
I hope it helps ;)
Instead of answering your actual question, i suggest usage of routing.
Be aware: This technique is not needed to solve your issues. However, you may want to know about it for future projects.
If i got you right, all you want to do is using a different controller / view for a specific section of your page.
To achieve this, create a single application module (remember, Angular applications are SPA's). Then, you could define some routes and tell Angular what to use when one of them is demanded:
var app = angular.module('app', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/', {templateUrl: './partials/views/root.html', controller: 'rootCtrl'}}).
when('/section', {templateUrl: './partials/views/section.html', controller: 'sectionCtrl'}}).
otherwise({redirectTo: '/'});
}]);
Further reading: http://docs.angularjs.org/api/ngRoute
Be aware that the latest stable version of Angular requires the ngRoute module in order to use the routeProvider.