how to run yeoman generator-angular commands in Ionic app - angularjs

I am lookig on generator-angular powered by yeoman ,It generate not only an angular base app but also other things like routes controller filter directive etc with the help of sub generator.
I am making an Ionic app ,As I know Ionic is based on Angularjs ,so while developping it I have to create routes ,controller and other stuff manually.
There is a Ionic Framework generator which genrate a Ionic base project but It does not create angular specific task like controller and routes .
Is there any way we can do that in ionic.
Thanks

The Angular Generator (npm install generator-angular -g) seems to be able to scaffold into an ionic app, but it puts the files in the wrong place. Default ionic apps put everything into www/. All of the generators expect things to be in app/.
The Ionic Framework Generator you refer to sets things up to use app/, and the angular generator seems to work ok with it.

Related

AngularJS Upgrade to Angular Hybrid with Grunt/Bower

I have an older project that we want to add some more functionality to. It's a fairly big project so rewriting it is out of the question. I've been reading and following the Angular ngUpgrade guide to make the transition to be able to write Angular 2+ code and run it with my AngularJS application.
However, there are some things that I'm missing and I'm quite confused on what I need to do.
My team created the initial project using Grunt and Bower, looks like through a Yeoman generator. I've been following along in the PhoneCat Upgrade Tutorial and I'm at the part where it says to "Install Angular into the project, along with the SystemJS module loader."
At this point I've looked into SystemJS a bit and what we have with our Bower/Grunt setup but am fairly confused.
So my question is, do I need to change my AngularJS application to use SystemJS before continuing with the Angular Upgrade, or can Grunt and SystemJS work together in some way?

How do I load Angular 4 into an AngularJS app using SystemJS?

I want to convert an AngularJS app to Angular 4. I'm reading the official Angular documentation for upgrading from AngularJS at https://angular.io/guide/upgrade. It states this:
To begin converting your AngularJS application to a hybrid, you need
to load the Angular framework. You can see how this can be done with
SystemJS by following the instructions in Setup, selectively copying
code from the QuickStart github repository.
The 'Setup' link however leads to a page which doesn't mention SystemJS. How do I use SystemJS to load/build the Angular 4 framework into the existing AngularJS app?
The link you specified points to the Angular quickstart project which uses systemjs. https://github.com/angular/quickstart
Although the project is marked as deprecated it is currently still valid in how you can setup Angular with systemjs.
You can then use the quickstart as the basis for porting your code across and will enable you to follow the additional instructions in that setup steps.
That quote I gave from the Angular documentation is very confusing. What you actually need to do when upgrading is to somehow set up the scaffolding for an Angular 4 app within your project, then use SystemJS as the module loader that will load the Angular 4 modules at runtime (since there is currently incomplete native browser support for the EcmaScript module system).
I figured out by reading further through the upgrade guide (specifically the 'PhoneCat Upgrade Tutorial - https://angular.io/guide/upgrade#phonecat-upgrade-tutorial) that what you're expected to do is set up the QuickStart project in an independent location, somehow move most of it into your existing AngularJS project to provide the scaffolding for an Angular 4 project, then wire up SystemJS as the module loader by selectively using some of the SystemJS configuration that is inside your 'built' QuickStart project.

How to convert a Gulp Angular project to and Ionic App

I have a gulp angular project with the following structure. To serve it as a web app, I use the command gulp serve. Gulp then does some magic that rearranges all the files in the .tmp directory. I would like to take the web app and convert it to an ionic app. I attempted to follow the steps here (How to convert an existing Angular1 web app to a Cordova app?), but it seems that due to gulp I have a few additional steps.
To attempt this on my own, I:
Setup an empty ionic project,
Copied the contents of my src folder to the ionic apps www folder, and
Ran ionic serve.
The gulp setup was done by a coworker, so the inner workings of it are something of an enigma.
You cannot do it that easily. Ionic works with it's specific angular directives, like ion-nav-views, ion-views, ion-content, etc. you need to wrap all your states/views inside this directives and transform your navigation system into tabs or side menu (mobile app navigation systems) to make it work. There's a lot of workaround to do!

How to inject a third party lib into angular-fullstack via Webpack

I have generated a new angular-fullstack project using the Yeoman generator generator-angular-fullstack.
Everything seems to be running fine.
Now I simply want to be able to use angular-google-maps lib in my angular-fullstack project.
http://angular-ui.github.io/angular-google-maps/#!/use
How can I add it to the the angular-fullstack so that the lib is injected into the main controller and can be used everywhere?
Maybe it's due to my lack of familiarity with the Webpack and the way it is setup at angular-fullstack.
Any help would be so much appreciated.
Thanks,

what is a angular seed and Angular-Seed project for AngularJS?

I am new in angular and not clear with Angular seed.
I have some questions:
what is angular seed?
Is it necessary?
How to use angular seed?
Sorry if something is wrong in the questions.
Angular Seed is totally baked template for your rapid angular application development .
It has test suite like Karma and protractor and Jasmine
and many more . It has bower front-end tool manager . And Grunt as task runner . You can update add and delete any node module whenever you want with package.json.
In a easy way , all you need to get in super fast way is ready in there . Hope you got your answer .
Angular seed project can be seen as a template or kick-starter project that could be installed to get started with your AngularJS apps.
Check out this link:
Angular-Seed example

Resources