How to write a grunt task to build requirejs based Angular application - angularjs

I'm currently working on an Angularjs based project.I am using RequireJs library to load dependencies asynchronously.
Following is my project structure :
index.html
vendors
angular.js
require.js
underscore.js
css
bootstrap.css
app.cs
images
App
app.js
signup
signup.controller.js
api.user.resource.js
user.service.js
templates
Login.html
profile
profile.controller.js
api.myprofile.resource.js
myprofile.resource.js
templates
profile.html
How can I combine all files inside of App folder into a single minifieds app.js file.Please help me to create a Grunt Task

Have a look at https://github.com/jrburke/almond. It is a minimal AMD API implementation designed for use with optimized builds.
For packaging require applications with Grunt use https://github.com/gruntjs/grunt-contrib-requirejs.

Related

How to inject split chunk files into aspx file using webpack?

I am using HtmlWebpackPlugin() to inject webpack chunks into html file. I want similar kind of functionality to inject webpack chunks into aspx files.
Is their similar plugin available ?.
or
What changes should I do in HtmlWebpackPlugin() ?
I had a similar issue while integrating spring boot with react app. There's a workaround you can here is your server will run index.aspx. You just need to include your webpack generated index.html into you aspx:
<!-- #include file="~/path/to/index.html" --> // webpack generated

Minification and Uglification of modular Angular JS application for Production env

I have developed a simple login/registration application in angular 1.6 and want to minify before deploying it in prod env to improve performance and more importantly to secure it from reverse engineering threat. Here is my Project structure:
Project Structure
In index.js I am loading all my js files, angular related js files are inside resources while some js (jquery, bootstrap etc ) are in app-content/js folder along with another static content.
Wondering how minification/uglification/concatenation will pick files for the routes, here is the routing in my app.js:
app.js routing

Angular 1.5, typescript and gulp

I have a project written in angular 1.x according this template by John Papa:
https://github.com/johnpapa/ng-demos/tree/master/modular.
Basically i use a gulp to build a minified js for production and another task (called 'index') that injects all the js src files (without minification) into the index.html file.
How should I change things now when adding typescript to my project?
specifically, my issue is when I have a class B which inherits from class A and they both on the same namespace.
how can I make sure that in the minified js file or in the index.html injection the order of the classes will be according the dependencies?
Note also this issue that I've opened for another template, a one that shows how to use typescript with Angular - https://github.com/johnpapa/hottowel-angular-typescript/issues/24
Many thanks!

Embedding an angular 1.3 app in a Angular 2 app

I am trying to build and app using Angular 2 which has several tabs. I want one of these tabs to be as the already created angular 1.3.17 app. More specifically, I want to embed Netflix Vector into one of my tabs. My Angular 2 app is uploaded here (at the moment does nothing) here. Would this be possible?
I don't intend to have any interaction between the Angular 2 components and Angular 1.x. I simply want to embed it.
I also tried the following:
The way to run Netflix Vector is simply doing a gulp build and then running a simple server inside the dist directory.
So, to ease the way of embedding such a large application, I tried to put the dist directory inside my angular 2 component directory and then just modifying the index.html to remove the inclusion of scripts and css. I loaded those scripts and css through my main index.html.
Then I loaded index.html through my angular 2 component. I have made sure that the angular libraries and all other js files are loaded. However, it doesnt seem to work just by providing a ng-app directive inside index.html

Marionette modules / handlebars templates build with Grunt

I am new to backbone / Marionette. I am working on complex application building on Marionette and Handlebars templates.
We are using RequireJs for AMD loader.
Code structure
We have structured our code into modules and each module will have its templates, views and controllers.
Assets
js
libs
modules
login
templates
views
LoginController.js
registration
templates
views
RegistrationController.js
I am looking for grunt with requirejs build samples for this code structure. I was not able to find any link which meets our code structure.
This is an example project from Derick Bailey, creator of Backbone.Marionette: https://github.com/derickbailey/bbclonemail/tree/master/public/javascripts/bbclonemail
It has a code structure very similar to yours, he's not using requirejs though, since he's relying on the modules system.
Hope this helps.

Resources