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?
Related
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.
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.
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
I'm trying to set up a client-side app workflow with yeoman (http://yeoman.io/), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (https://github.com/sstephenson/sprockets).
I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.
The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps?
Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).
My setup is:
Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.
What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:
In development:
Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html
For all .scss files a .css entry added to index.html
Each file watched and compiled when needed
In production (dist):
All .scss files compiled, minified and concatenated to app.css
All bower files concatenated and minified to vendor.js
All application coffeescript files compiled, minified and concatenated to app.js
All templates compiled, minified and and concatenated to templates.js
index.html modified to include only those four files.
Is there something like this setup available?
I'm also open for suggestions and/or other alternative workflows.
Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like Middleman has it does what you want out of the box.
Yeoman way
Using generators
You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:
webapp
backbone
maryo
At this point most of your requirements (both development and production) would be fulfilled:
a well defined project structure
compile coffeeScript and .scss
watch and compile
generators for model, view, collection, ...
compile and minify all files for production
You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a angular generator on top of backbone).
Fine tuning
You can use sub-generators to scaffold more specific parts of your app, see Addy Osmani video.
Building generators
If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!
Grunt and Bower way
Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like juanghurtado/puppeteer.
There are 3 files that you must keep an eye:
package.json — all you node dependencies go in here
bower.json — to manage the client dependencies
Gruntfile.js — here you define the tasks
Wrapping up
Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.
Some other tools
You asked for some suggestions, here it goes:
gulp.js An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).
browserify An alternative to Requiere. Read this
assemble Static site generator for Node.js, Grunt.js, and Yeoman
Roman,
Answer for your first question, here is a guide on how to use Yeoman: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254
If you want to use coffeescript by default, just pass the --coffee param
yo webapp --coffee
handling the assets order you can handle from the index.html file.
When you want to get the app ready for production just type the
grunt build
that will unify and minify all of your assets and throw it all dist folder.
To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.
Hope i gave you some useful information :)
Not an answer to my original question, but rather a pointer for someone who'd like to implement the same workflow I was looking for. I ended up writing a custom Gruntfile, using the grunt-injector to do the "explode the assets to the index.html" part, grunt-bower-install to add bower assets and configuring the grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin and grunt-contrib-uglify accordingly.
I'm building a app for learning, and I have these major components.
My first question is if these parts are a good foundation for an angularJS app.
I've read in some cases that RequireJS is not a good idea, but not sure why.
My goal is to have a dev environment set up where I have unit and e2e tests, and I want to have this in place before I start coding.
I'm having trouble getting these pieces to work together, and as I push through the issues I thought I'd ask what the latest best practice is to build a non trivial angularJS app.
I have a project that uses AngularJS + RequireJS + Bower + Karma in Github that you can take a look:
http://marcoslin.github.io/angularAMD/
For me, RequireJS has worked very nicely with AngularJS and together it helped tremendously in both application load time and code organisation. I do not use Yeoman yet but Grunt and Bower serve as key foundation for dependency sourcing and building of final project. Karma is a must for unit testing. You should be able see all these components working together in angularAMD Github project.
Your question is a little vague, and answers will be mostly opinions. Anyway, here's mine…
You definitely need node to run all the modern javascript web development tools. (grunt, yeoman, karma, mocha, jshint, uglify, coffee, etc, etc.) Bower is nice to have for updating your client packages. RequireJS is useful for module loading, but not necessary. It should work with AngularJS, but keep in mind that the angular "modules" are completely different from RequireJS "modules". If I were you, I'd work through the Angular tutorial to get a good understanding. Then start your project with yeoman: yo angular.