I am wondering why do I get different code generated from the rest of the mean app. What I mean exactly is this - when I run yo meanjs:angular-config I get a file that looks like this:
(function() {
'use strict';
// My Module module config
angular
.module('my-module')
.run(menuConfig);
menuConfig.$inject = ['Menus'];
function menuConfig(Menus) {
// Config logic
// ...
}
})();
I know that this is ok, but I am interested why don't I get a code block that looks like in the other mean modules, like this:
'use strict';
// Configuring the Articles module
angular.module('users.admin').run(['Menus',
function (Menus) {
Menus.addSubMenuItem('topbar', 'admin', {
title: 'Manage Users',
state: 'admin.users'
});
}
]);
Why is there a difference? I use version 0.4.2 of meanjs.
How can I generate code like in the second code block I posted? I did see some video tutorials where they use the same console command and the same version of meanjs as I do and they get the "expected" code generated.
Are you watching the MEAN Stack Honolulu Challenge by chance? I'm having compatibility issues with MEAN 0.4.2 and that series myself.
Related
I have a service with a few methods:
function userService($http, API, auth) {
....
}
and then used in my module like:
var app = angular.module('app', ['ngRoute'])
.service('user', userService)
...
All of this is in my app.js file, I want to separate things so its easier to maintain. I'm trying to use the line .service('user', '/services/userService') but its not working any ideas how to i need to reference this?
Thanks.
I think you are creating a new module instead of use yours.
To retrieve an existing module and use it in a separated file, you have to do :
var app = angular.module('app')
.service('user', userService')
// ...
Instead of
var app = angular.module('app', ['ngRoute'])
.service('user', userService')
// ...
Documentation available at https://docs.angularjs.org/guide/module#creation-versus-retrieval
EDIT from #koox00 answer
Don't forgot to load all files related to your module in your markup, in the good order (before load the file containing your module declaration).
as everybody know, Any MVC framework have a frontcontroller, like launch.js in sencha, frontend_dev.php in symfony1, etc..
But as i was going through the book :Angular JS by brad Green, in chapter 7. there it is mentioned that there is no such Main Method, So i doubt then how to handle pre execution functions or pre configuartion/checking. Is there any other ways to handle this.
app.run() is what you're looking for, after your module declaration, you can handle any pre-execution configs there.
app.run(["$rootScope", ....other dependencies
function ($rootScope,....) {
}] );
I guess what you're looking for is the run phase.
In the run phase, all the set up runs, and before of launching any specific controller you can execute configs, add handlers etc.
From the docs:
angular.module('myModule', []).
config(function(injectables) { // provider-injector
// This is an example of config block.
// You can have as many of these as you want.
// You can only inject Providers (not instances)
// into config blocks.
}).
run(function(injectables) { // instance-injector
// This is an example of a run block.
// You can have as many of these as you want.
// You can only inject instances (not Providers)
// into run blocks
});
You can have a look at in the docs here.
This phase runs and adds events according to what you need it for. For example, if you want do do something each time is detected the start of a page change you can do something like:
myapp.run(
function ($rootScope) {
$rootScope.$on('$routeChangeStart', function () {
// Do something when the stateChange starts
});
$rootScope.$on('$routeChangeSuccess', function () {
// Do something else when the state change is successful.
});
}
)
i am trying to add a new Module to my application.
My HTML for index page is
<body ng-app="com.app">
In my app.js
angular.module('mod1', ['ngResource']);
angular.module('mod2', []); //this is module i want to add
var app = angular.module('com.app', ['ngResource','mod1','mod2']);
My Controllers1.js
var Controllers = angular.module('mod1');
Controllers.controller('ctrl1', function($scope,$http) {});
Controllers.controller('ctrl2', function($scope,$http) {}); //function for module 2
when i try to add this ctrl2 to my "controllers1.js" it works , but if i add this in my other js say "controllers2.js", its not working .
My controllers2.js is
'use strict';
var mymodule = angular.module('mod2');
mymodule.controller('ctrl2', function() {
console.debug("Testing...");
});
summary of my question is : when i try to add my ctrl2 function to new module, its not working and on firefox console i am getting error
Error: Argument 'ctrl2' is not a function, got undefined
assertArg#http://localhost:8080/tm-webapp/resources/lib/angular.js:1039
assertArgFn#http://localhost:8080/tm-webapp/resources/lib/angular.js:1050
#http://localhost:8080/tm-webapp/resources/lib/angular.js:4802
update#http://localhost:8080/tm-webapp/resources/lib/angular.js:14198
Scope.prototype.$broadcast#http://localhost:8080/tm-webapp/resources/lib/angular.js:8307
updateRoute/<#http://localhost:8080/tm-webapp/resources/lib/angular.js:7463
qFactory/defer/deferred.promise.then/wrappedCallback#http://localhost:8080/tm-webapp/resources/lib/angular.js:6846
qFactory/defer/deferred.promise.then/wrappedCallback#http://localhost:8080/tm-webapp/resources/lib/angular.js:6846
qFactory/ref/<.then/<#http://localhost:8080/tm-webapp/resources/lib/angular.js:6883
Scope.prototype.$eval#http://localhost:8080/tm-webapp/resources/lib/angular.js:8057
Scope.prototype.$digest#http://localhost:8080/tm-webapp/resources/lib/angular.js:7922
Scope.prototype.$apply#http://localhost:8080/tm-webapp/resources/lib/angular.js:8143
done#http://localhost:8080/tm-webapp/resources/lib/angular.js:9170
completeRequest#http://localhost:8080/tm-webapp/resources/lib/angular.js:9333
createHttpBackend/</xhr.onreadystatechange#http://localhost:8080/tm-webapp/resources/lib/angular.js:9304
I am stuck here for a long, kindly help me i shall be very thankful.
Regards,
Make sure that in your file loader (script tags, requirejs, whatever) Controllers1.js is right next to controllers2.js.
PS: some operating systems / webservers (e.g. the server inside karma on windows) are case sensitive. So try to use same case for your files (either upper or lower).
You can try this plunker http://plnkr.co/edit/tKIPDQ54JDexB7LAJpDR to see if it works in the way you want.
I created an AngularJS app with "yo angular", ran "grunt server --force" and got to the 'Allo, Allo' success screen.
When I added ['ngResource'] as shown below it appears to hang...or at least nothing is displayed in the browser any more.
We're tried adding $resource as a param to function..i.e. tried actually using a resource but no luck. I don't see any errors in the web console. We verified that angular-resource.js is listed in components/angular-resources.
This feels like a dumb newbie error but its got us stuck.
'use strict';
angular.module('a3App', ['ngResource'])
.factory('myService', function () {
var foo = 42;
return {
someMethod: function() {
return foo;
}
};
});
Got the answer (or at least the understanding) from Green & Seshadri's AngularJS book.
The angular.module statement works in two modes: configuration and run. The 'ngResource' statement works fine with configuration:
angular.module('a3App', ['ngResource']).config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
Works
but put that same statement in an angular.module(...).factory statement and it fails/quietly hangs (because .factory is a run rather than configuration statement):
angular.module('a3App', ['ngResource']).factory('myService', function($resource) {
...
This is explained at location 6456 of the Kindle version of the AngularJS book ("Loading and Dependencies" in Chapter 7). It makes sense after the fact (I guess all things do)..but an error message and/or updated documentation would be great.
Brian,
I experienced the same thing. My AngJS app would quietly hang whenever I included ['ngResource'] in a factory.
I fixed this problem by changing this code:
angular.module('a3App', ['ngResource']).factory('myService', function($resource) {
...
Into this:
angular.module('a3App').factory('myService', function($resource) {
...
And my application still worked fine in consuming a json rest api.
Difference between defining a module and it's dependencies, and creating new components in the module.
angular.module('a3App', ['ngResource', 'another.dependency']).config() <-- will work with initial functions like run(), config() but will break if you use it to make a directive/controller/service/etc.
angular.module('a3App').factory('factoryName',function) <--- will work to create the component, doesn't need dependencies again, they were already declared with the module.
I'm using the Sencha Command Line 3 tools with a newly generated Sencha Touch 2 application.
Assuming my app.js file looks like this:
Ext.application({
name: "CA",
event_code: "test123",
launch: function() {
console.log("application launched!");
}
});
My views and object stores depend on generating a URL based on CA.app.event_code equaling "test123";
During development in the browser, everything works fine, CA.app returns the variables I need.
When I compile my application with sencha app build and try to run the minified version in the browser, I get an error like this:
Error evaluating http://localhost:8888/app.js with message: TypeError: Cannot read property 'event_code' of undefined localhost:11
I'm not entirely sure why this is happening or how I can fix it. I am open to any and all ideas or suggestions, any pointers in the right direction will be greatly appreciated.
Ran into the exact same issue. You have no access to the namespaced app within the views... really sucks that they let you in development and not when built. Anyway, I got around it by adding a static helper class and using that all over my app:
In /app/util/Helper.js:
Ext.define('MyApp.util.Helper', {
singleton: true,
alternateClassName: 'Helper',
config: {
foo: "bar",
bat: "baz"
},
staticFunction: function() {
// whatever you need to do...
}
});
Then in your view or controller:
Ext.define('MyApp.view.SomeView', {
...
requires: ['Events.util.Helper'],
...
someViewFunction: function() {
var someValue = Helper.staticFunction();
// and you can use Helper.foo or Helper.bat in here
}
});
For reference, here's some documentation on Sencha Singletons. And one important note: make sure that your Helper singleton is in it's own file! If it's small, you may be inclined to put it at the bottom of your app.js, and things will work at first, and the build process will work, but the code will not. Don't worry, the build process puts all of your JS code in one big, compressed file anyway.