I'm starting learning angularJS and find out yeoman is quite useful. But some how the controller/service/model generated by yeoman is not good for minifying later. Because due to what I see through the generated template (service in this case ) we have to inject the service implicitly.
But if we want to minify later, it's recommended to inject explicitly using $inject.
So my question is : Is it correct that what I understand ? If it's not then what is the correct way to inject with generated template from yeoman.
Otherwise, we shouldn't use generated template from yeoman at the moment if we want to do minify later, right ?
Thanks
so yeoman gives you something like this when generating a service
testApp.factory('Thing', function(dep1, dep2) {
return {/*...*/};
});
This is problematic when the code is minified, because the process of minification shortens function parameters, and angular uses them to infer which dependencies to inject.
To inject dependencies I recommend the inline annotation which looks like this
testApp.factory('Thing', ['dep1', 'dep2', function(dep1, dep2) {
return {/*...*/};
}]);
Notice the second argument is an array that lists the proper dependency names and that its final item is a function where such dependencies will be injected.
Edit: The Angular generators for Yeoman now support minification for both JavaScript and CoffeeScript code with the --minsafe flag as shown by #Ramiro
You can use the Yeoman Angular generators with the --minsafe, for example:
yo angular:controller user --minsafe
check other options here:
https://npmjs.org/package/generator-angular
Edit:
A follow up on this. It's now unnecessary to use the --minsafe flag, as yeoman comes with the ngmin app, which automatically converts all applicable code to be minifiable, and then minifies it :)
Related
After reading hundreds of lines about browserify vs webpack and several how to of both I decided to go for webpack. The main reason it's because I liked the idea of bundling everything into a js file.
I have an angular project already working and I want to refactor it for webpack. The problem? My project is using angular 1.4.7, ng-animate and plain javascript (ES5) and all the tutorials and manuals are for ES6. I don't want to refactor my project so much. What's the way to go? I would like an example of each angular module : factory, directive, controller and so on. Many thanks
I typically have a feature.module.js file which has my module definition and requires all of the directives / services contained within the module. Also has the external dependancies.
/* module.js */
angular.module('my.module',['dependancy1', 'dependancy2']);
//External libraries
require('./dependancy1.module.js');
require('./dependancy2.module.js');
//Internal components
require('./thing.directive');
require('./thing.service';
/* service.js */
angular.module('my.module')
.directive('yourDir', function myDir(){...});
I'm dealing with the same problem now. And I found something that works (work in progress, but at least I can see progress). My steps:
Install yeoman
Run this angular-webpack generator. Select 'ES5' when asked (the other option is 'ES2015', which I guess is the same that 'ES6')
Start modifying the automatically generated boilerplate with your Angular code
Yes, you still need to learn about gulp and sass, but at least you can run a simple AngularJS app using the old ES5 syntax, and start modifying it.
I'm probably blogging about this. So, I'll update this answer then.
I tend to do this:
app.js:
require('/any/angular/deps');
var subModule = require('/some/sub/module');
var app = angular.module('myApp', []);
// pass the app module in sub modules to allow them to define their own config
subModule.configure(app);
/subModule/module.js:
var someSubDirective = require('./subDir/directive');
export function configure(app) {
someSubDirective.configure(app);
}
/subModule/subDir/directive.js:
export function configure(app) {
app.directive('myDir', myDir);
}
function myDir() {
}
My idea is to let all sub modules handle their own configuration, so declaring config or constant, factories or providers. Letting this then bubble up to the app.js. This means its really easy to delete a folder from your structure, because it is one line removal from it's parent module.
This also makes relevant file paths a lot shorter and easier to handle.
I'm looking for something that generates a boilerplate jasmine test for an angular controller. It seems you could pull the dependencies for the controller out and drop them into the spec and save some typing. I would be shocked if I were the first person to have this idea but I'm unable to find anything that does this, save a yeomen project that doesn't appear to work.
I've recently published my version of Angular JS unit test generator on npm - tleaf. Basically it tries to parse you source file looking for AngularJS units (controllers, services, etc) to extract information about unit name, module name and unit's dependencies. This information is used to create a unit test file, based on a template for this unit type. There is a default set of templates which have a pretty simple structure, it should be ok for general use. But it is also possible to create and use your own templates to generate unit test files. This is a very first version and I'll be happy to have any feedback.
I don't know of a generator for tests but I have two ideas.
Some editors provide templates for "repeated" code. Like Live Templates for Webstorm. There are multiple projects on github providing jasmine templates for it.
You could also check ng-describe. It removes the boilerplate and makes testing simpler. Here's an example form their github:
ngDescribe({
modules: 'A',
inject: ['$rootScope', 'foo'],
tests: function (deps) {
it('finally a test', function () {
deps.$rootScope.$apply();
expect(deps.foo).toEqual('bar');
});
}
});
I am using yeoman with generator-angular to generate our scripts & tests.
yo angular:directive myDirective
yo angular:service myService
yo angular:controller myController
etc..
will generate both the script and spec templates. I am using Karma and Jasmine.
You could also always write your own yeoman generator.
I found this thing and it does a lot of good gob:
https://www.npmjs.com/package/generator-yosapy
I am starting to write a little library that uses angular. I want to write a directive that is not coupled to the first app that is initialized. I want to write a directive that somebody would add to their app and it would just work.
Instead of:
angular.module('realEstateApp', []);
angular.module('realEstateApp').directive(etc);
Just use:
angular.directive(etc)
If I can't do this, do you have some workaround to give me?
Angular directives need always to live within a module. What you have to do is define a module and then use it as a dependency in other modules. People will have to add Your module as a dependency to theyr module:
angular.module('myDirectiveModule', []);
angular.module('myDirectiveModule').directive(etc);
Then share your module, and people will have to do (after including your script):
angular.module('myModule', ["myDirectiveModule"]);
What is the difference of the below code
.factory('Service', ['$log', function($log) {}]);
.factory('Service', function($log) {});
both are working fine in my app.
The first one is considered safer when minified. I generally don't have a problem with the second version with my current minifier though.
Since Angular infers the controller's dependencies from the names of arguments to the controller's constructor function, if you were to minify the JavaScript code for PhoneListCtrl controller, all of its function arguments would be minified as well, and the dependency injector would not be able to identify services correctly.
The first factory with the added array, is used when the code is going to be minified to stop the code from breaking once it is minified. If you are not planning on minifying your code, either will work. If you are going to be minifying it, then go with the array syntax.
After generating a new ionic app using Yeoman generator-ionic, I can't create a new AngularJS component (controller / route / directive etc').
I've tried yo generator-ionic:controller myController with no luck. Couldn't find anything in the docs too. what is the right way scaffolding new component?
This question is almost a year old. That said, someone else might find it and want an answer.
First, your syntax is wrong. When doing a yo xxxx you leave off the generator-. Second, the ionic generator doesn't have a sub-generator for making a controller. You can use the angular generator as a complement. If you don't have it, run npm install generator-angular -g and then you can do a yo angular:controller test. When I did that, it seemed to understand my main module just fine, but it put the controller in scripts/controller/test.js.
The angular sub-generators available are:
common
constant
controller
decorator
directive
factory
filter
main
provider
route
service
value
view