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
Related
I'm currently exploring an upgrade path for a pretty large AngularJS 1.6 app to Angular 6. I have my app bootstrapping as a hybrid app, and I've begun converting individual modules and components. I need to be able to do the migration in chunks, though. It would be nice if I could migrate a module at a time, but I'm running into some issues, to that end.
I have a NavBar directive which resides in my core AngularJS module. That component is being downgraded with downgradeComponent and registered on the AngularJS core module. The landing AngularJS module has a dependency on the core module so that it can use the NavBar. This works fine, because the LandingComponent has also been converted to Angular6 and is being downgraded and registered on the landing AngularJS module.
There is a problem with using the NavBar component inside of any other AngularJS component, though. I have a third AngularJS module called workflows with a ViewWorkflows component that has a NavBar inside its template. When I navigate to that component, I get the following error:
angular.js:14791 Error: No component factory found for NavBarDirective. Did you add it to #NgModule.entryComponents?
I can fix this by converting and then downgrading ViewWorkflows, but since NavBar is being registered as a downgraded AngularJS component, shouldn't any AngularJS module that declares a dependency on the core module have access to it?
Code (Not runnable)
Edit: I've updated the gist to be a little more simple. The landing module is Angular, with an Angular component, <landing> that is downgraded to run on the AngularJS landing module and has a <t-nav-bar> inside it. It has a dependency on the core module which provides the downgraded <t-nav-bar> directive. The <test> component is an AngularJS component registered on the AngularJS landing module that cannot use the <t-nav-bar>. Without even bringing the workflows module into the situation, it doesn't work. What am I doing wrong?
I have managed to sort this out. I was trying to declare the NavBar as an Angular #Directive. It actually needs to be a #Component. After making that switch, it works exactly as expected.
I spun up this repo to test with, and discovered the issue there. It's a new Angular 6 app that I "downgraded" for experimenting.
Just started a demo Angular2 project (no previous experience with Angular1/AngularJS. Have followed and extended from the online quickstart and tutorials, and all was fine. However I'm at the point where I would like to use some components from a library which is designed for AngularJS, and having no end of problems!
Most of the information available about AngularJS/Angular2 compatibility assumes that you have an AngularJS project that you're adding Angular2 components to - not the other way around - so what I'm hoping to do may not even be possible. What I've tried so far involves a simple stripped-back project based on the Angular2 quickstart, with a single Angular2 component that loads into the index.html. I'd then like to integrate components from the existing library (AngularJS-based) into this.
I've tried using UpgradeAdapter.upgradeNg1Component to create components from the library and add them directly into my Angular2 component
I've tried installing angularjs through npm, importing it in a script tag into my index.html and then using a combination of UpgradeAdapter.downgradeNg2Component and UpgradeAdapter.bootstrap to load my Angular2 as a downgraded module
Neither of these seem to work - the component fails to show, and the browser console tells me I've got an Uncaught SyntaxError: Unexpected token <
Evaluating http://localhost:3000/angular2/upgrade
Error loading http://localhost:3000/app/main.js
My best guess at the moment is that this is actually an unsupported scenario, and I need to have a 'proper' AngularJS app in order to use the UpgradeAdapter functionality from Angular2. Can anyone confirm this? Or is there something stupid I'm missing here?
Here is a working plunkr describing how to mix Angular1 and Angular2 elements:
http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEg?p=preview
An important point is to bootstrap your main component on the UpgradeAdapter. This way all elements are available in providers (services / factories) and in directives (components / directives):
upgrade.bootstrap(document.body, ['heroApp']);
These two answers could help you:
angular 1.x and angular2 together
How to inject upgraded Angular 1 service/factory to Angular 2 component in ES5?
So the major problem in this case turned out to be the fact that it appears that the upgrade components aren't included as part of the basic angular 2 bundle. After adding:
<script src="node_modules/angular2/bundles/upgrade.min.js"></script>
to my index.html file the error I was seeing disappeared.
Thanks to the answer here for pointing me in the right direction!
I'm working on an Angular app using:
`<html ng-app="navops"></html>`
and we hired a designer how gave me a minified JS script and he is using:
angular.bootstrap(element,modules,config);
so this create an error:
App Already Bootstrapped with this Element '<body>'
how can I integrate the two codes??
You are bootstrapping twice, remove the ng-app from the body tag and it will work. If your code then no longer works make sure you add it as a dependency into the bootstrap() command. Presumably you would just add "myLibs" or something into the modules array
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'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 :)