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

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,

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?

Angular 1 With Typescript

I'm looking into creating an app with typescript and angular 1.6.0. But everywhere I look is using webpack, babel, grunt, gulp, there is no single consensus on which is the best way to proceed with an app like this.
Anyone got any hints?
Thank you.
Do you have a specific need for using angular 1.6.0? As opposed to creating an angular2 project?
You can get more information here: Angular-cli
Angular cli currently includes webpack and you will not need to use gulp or grunt at all. In addition to the angular cli bundling your app together it allows easy build for Ahead of Time Compilation and tree shaking. Having these two features is nice for when you are ready to deploy your application to a production server you can bundle the application into a small package and serve a small amount of JS files.
Using the angular cli also helps you to code with best practices within an angular2 application. You generate new components/directives/pipes with a simple ng generate [component] [name] command.
I would strongly suggest reading through the angular quickstart for ts guide located here: Angular-Quickstart
Also, if you do not want to generate your own projects using the angular-cli. There are various templates online that you can start your application with.
Good luck!
If you are planning to start from scratch, then why not Angular2 ?
My suggestion is Typescript2 + Angular2 with webpack. As stated by #Andy Angular-cli is good to go.

Generate fullstack application using yeoman fullstack

I want to generate a fullstack application and I was thinking of using a yeoman generator. I tried using the latest version of yeoman fullstack generator and I generated the project but I don't understand very well the structure of the project.
I noticed that this project doesn't use bower and I don't know how to manage dependecies from other components. Can you explain to me how this project works?
If you cannot explain this to me, I would like a project with bower so can you tell me which is the latest version of angular fullstack that still uses bower?
Best regarts.

Use AngularJS app as a bower package

I've made my own AngularJS app, which works as an independant project.
What i want to do is use this app in another project. I made it a bower package and added it as a dependecy on my project, but i've no idea how to initialize it. As an independant App it used to work through its own URL.
Any tips?
If it is a module you after you imported the js oyu can addit to your new module dependencies
newApp= angular.module('newApp', ['comparatorApp']);

Howto bootstrap Backbone app with yeoman having require.js enabled

I'm playing with yeoman for a time now. I wonder how I accomplish bootstrapping a Backbone application and having require.js enabled at the same time.
yeoman init
provides me with a setup where I can work with modules in AMD style.
yeoman init backbone:all
provides me with a Backbone scaffold but I had to "include" all my models, collection etc. manually in index.html.
Is there a way to have both?
Regards Felix
We have updated the Yeoman backbone generator to support RequireJS. But it not officially added to npm. But you can try it using
npm install git://github.com/yeoman/generator-backbone.git
Discussion : Not found in npm install
The backbone generator supports yeoman 1.0beta. Try
yo backbone
You will receive a conditional prompt for RequireJS.
UPDATE 1
Backbone generartor is available on npm.
Try npm install generator-backbone
UPDATE 2
RequireJS with --coffee option is now supported in backbone generator v0.2.2
There's already an open issue for this. Add your thoughts there :)
Hi I developed a generator for that, take a look at https://github.com/abiee/generator-backbone-amd
I was trying the same today. What I did ultimately was to perform yeoman init first. Then again yeoman install backbone. Console will ask if you want to override files. Do not override main.js & index.html. Rest you may.
This won't give you perfect start. But, most of the things will be in place.

Resources