I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.
Related
Is there is any way to have a common project which contains plugin, java script file etc and there is a multiple Cordova project which can access/get those plugins and java script files.
For an example, Cordova-Project-A and Cordova-Project-B has some common plugins, CSS files and java script files. So need to separate these common codes and place it on separate project.
Note: Cordova templates will do this work. But if there is any plugin/JS file update in the template, it won't reflect anything on Cordova projects.
there is. this place is called npm, and it serves as a giant, worldwide, warehouse for javascript developers. by the way, cordova is already using it to power its plugin system.
to join the party:
create the desired projects to contain the common, extracted, code as npm projects (i.e. use npm init on them).
use npm's link to always have the updated source in all consuming projects.
As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.
What I thought would be great (although other solutions are welcome) is to have an "ionic" folder and a "desktop" folder, both the same structure same file names.
When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ).
And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.
That way I could have my business logic in "plain" Angular2 and could be reused creating the app both for desktop and mobile.
So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?
Finally I wrote my own gulp file, to copy the files to src/.tmp/ and after the copy task is ready I call the original scripts which are used by ionic to serve, build the projects. I could solve everything with this method.
On serve task gulp watches for changes in src/ files excluding src/.tmp and copies the changed files to the src/.tmp folder. Which is watched by ionic and rebuilt everytime something changes.
I was lucky because ionic is built on top of angular, so the builder toolset used by ionic is 100% compatible with plain angular projects.
What's the best practice for minifying and bundling js/css in a pure front end app, and how do the tools work?
I know how this can be done with server side apps like .NET/Java/LAMP/etc. But what about pure front end projects, SPA projects or backendless projects that are built with say, ember or angular these days? Say your entire project consists of HTML/css/js, which interfaces with a RESTful service elsewhere.
What kind of process or tool do you use to minify and bundle the resources for that?
I've seen grunt plugins that exist for this, but I find the documentation to be pretty magical and it's still unclear to me how they work.
Specifically, does the tool:
1) Replace src="/js/a.js",src="/js/b.js" with src="/js/bundle-a+b.min.js"? (and likewise with css?) in the source html files?
2) have different modes for dev and release, or is the tool only run when the project is released?
Or are the resource requests entirely managed by a js tool and js/css files have to be requested via a library function? Wouldn't the lag be noticeable in this case?
Thanks.
Through the use of Build tools front end devs can have minified javascript, css, or even images and html files automatically minified as they develop. The most common is grunt, with gulp close behind.
You configure grunt tasks, like grunt-contrib-uglify and grunt-contrib-copy, and put those tasks under a grunt-contrib-watch task. Have the grunt watch task watch the files you modify, and every time a change is detected those .min files are automatically generated.
These build tools have no impact on your application, they are run before the files are servered. You were correct to assume there was an easy way to do this. I suggest you look at grunt getting started, a sample gruntfile, or a project that uses grunt - here's mine, it does minification like you requested. Clone my repo, run sudo npm install, then sudo grunt. I don't have watch set up in my project but grunt is very well documented.
I'm currently developing an app with angularjs and cordova. I use Gulp to compile all the js, less, etc and merge it into a www folder. It's a big project and many apps will be created based on the same base core. I don't want to "clone" the entire project each time a have a new client because if a bug is found or a feature has to change I will have to redo everything in every single project.
I want to know if there's a way to create a build system with Gulp, where I could have a base core js/less, and that base js/less core could be replaced if the same js (or angular module name for instance) is found on another folder.
Example image:
folder structure
In the above example, I will need a specific task to build "ProjectA".
I was thinking in something like "gulp build ProjectA" and then all files in "AppCore" folder would be compile only if there wasn't the same js, less or angular module inside "ProjectA" folder.
Or I don't know if is possible also to compile everything in "AppCore" and then override that result with the content found in "ProjectA" if equal. If something new in "ProjectA" that would be added.
Is there any gulp plugin to achieve this? Or does this have to be done in a different way?
What is the best way to create a flexible project like this with a shared based code core?
Thank you
I work in coffeescript, jade and stylus.
My application serves two different "one page apps". For these apps I serve all asset in the initial payload.
I want to group, compile, and concatenate all coffeescript files and jade templeates into a single js asset and stylus files into a single css asset for each "one page app".
Then I can just leave my /public/js and /public/css alone and they will always have the current js and css asset files for the two different apps.
Has anyone setup a workflow like this before? Any ideas how I could do this?
Thanks!!
EDIT: http://blog.fogcreek.com/the-trello-tech-stack/
Through more research I found the process written about here but they don't say how they did it.
You can do this with JS pretty simply with Express + Stitch / StitchUp
Sample config:
https://gist.github.com/1094412
An alternative is also Interleave:
http://www.distractable.net/coding/javascript-builds-using-interleave
And the options for stylus middleware should sort you out for your CSS:
http://learnboost.github.com/stylus/docs/middleware.html
There's also a myriad of options over here:
http://toolbox.no.de/search?q=asset
I wrote a node app for this. It is V E R Y simple, but it works for me. The code is so simple (72 lines) you can adjust it anyway you like. Whenever you save a coffee, stylus or jade file it converts to js, css or html. It doesn't take care of file removals or any other fancy stuff. It's not perfect, but at least I know exactly how it works, which makes debugging easy.
https://github.com/Gijsjan/Template-Engine-Watcher
I wrote an open source project(MIT license) to address this problem:
Giles - https://github.com/255BITS/giles
Giles builds your static assets for you(Jade, Stylus, CoffeeScript). It can be run standalone, as a web server, or as a connect module. You can add support for other languages to Giles easily(see the github page)
You can use the connect-assets pipeline to pull compiled Jade assets into your JavaScript by making them dependencies of the CoffeeScript files that use them.
I have a blog post with the details -> Server side compiling of Jade templates with connect-assets.
I recommend using Grunt, with Grunt you can setup all kinds of workflows and tasks. I personally use mean.io as my boilerplate for most of my projects. They have a really nice Grunt file with most the tasks you need to concat and minify css and js into a single file using assetmanager. Mean.io doesn't use jade or stylus but you could easily add those Grunt tasks.