Quickstart: (Version 2.0)

This Visual Studio Extension will process the angular.config file in the root of each project in your solution whenever a relevant file (*.js, *.css, *.less, *.html, angular.config) has been saved.

It compiles all configured html templates to javascript and puts them into the angular template cache.
It concatenates, compiles and combines all configured JavaScripts.
It concatenates and compiles all configured StyleSheets.

Output Window Pane: (New Feature in 2.0)

The Output Window now got a new AngularToolbox Pane. It will show the result of each compilation and can help you to identify problems in your configuration or your JavaScript.

Compiler Arguments: (New Feature in 2.0)

The closurecompiler and yuicompressor elements got a newargs attribute that allows you to add or change the command line arguments used in each compilation.

angular.config Example: (Version 2.0)

            <build debug="false">              <templates>                <generate path="Views" pattern="*.template.html" recursive="true" />                <generate path="Scripts\Common" pattern="*.template.html" recursive="true" />              </templates>              <scripts file="app.js">                <combine file="Scripts\Vendor\jquery\jquery-1.10.2.min.js" />                <combine file="Scripts\Vendor\lodash\lodash.min.js" />                <combine file="Scripts\Vendor\angular\angular-1.2.3.min.js" />                <combine file="Scripts\Vendor\angular-ui-router\angular-ui-router.min.js" />                <combine file="Scripts\Vendor\restangular\restangular.min.js" />                <compile path="Scripts\Common" pattern="*.js" recursive="true" />                <compile path="Scripts\App" pattern="*.js" recursive="true" />              </scripts>              <styles file="app.css">                <compile file="Scripts\Vendor\bootstrap\css\bootstrap-slate-theme.css" />                <compile path="Scripts\Common" pattern="*.css" recursive="true" />                <compile path="Scripts\App" pattern="*.css" recursive="true" />                <compile path="Views\App" pattern="*.css" recursive="true" />              </styles>              <tools>                <closurecompiler file="W:\closure-compiler\Compiler.jar" args="--compilation_level SIMPLE_OPTIMIZATIONS --language_in=ECMASCRIPT5 --warning_level=VERBOSE --jscomp_off=checkVars --jscomp_off=missingProperties" />                <yuicompressor file="W:\yuicompressor\yuicompressor-2.4.7.jar" args="" />              </tools>            </build>

Generated Files:

These files appear under the angular.config project item and are located in the root of your web project.

debug="false"

app.js
app.min.js
app.min.map
app.debug.js
app.templates.js
app.css
app.debug.css

debug="true"

app.debug.js
app.templates.js
app.debug.css

Important:

Java has to be installed and added to your PATH environment variable in order to run the tools.
All paths are relative to the project path.
The very latest yuicompressor seems to have bugs that prevent it from giving a result. Please use the last know version to be working which is 2.4.7.

Output Window Pane Example: (Successful compilation)

            **********************************************************            Document saved: [angular.config]            **********************************************************            ----------------------------------------------------------            Combine Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\jquery\jquery-1.10.2.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\lodash\lodash.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular\angular-1.2.3.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular-ui-router\angular-ui-router.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\restangular\restangular.min.js            ----------------------------------------------------------            Compile Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.js            W:\InfoDisplay\InfoDisplay\Scripts\App\App.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Admin.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Display.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Home\Home.js            ----------------------------------------------------------            Compile Templates            ----------------------------------------------------------            Views/App/Admin/Admin.template.html            Views/App/Admin/Example1/Example1.template.html            Views/App/Display/Display.template.html            Views/App/Display/Example1/Example1.template.html            Views/App/Home/Home.template.html            Common/angular-ui-carousel/angular-ui-carousel.template.html            ----------------------------------------------------------            Compile Scripts            ----------------------------------------------------------            ...            **********************************************************            Document saved: [angular.config]            **********************************************************            ----------------------------------------------------------            Compile Style Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\bootstrap\css\bootstrap-slate-theme.css            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.css            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.min.css            W:\InfoDisplay\InfoDisplay\Views\App\App.css            W:\InfoDisplay\InfoDisplay\Views\App\App.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Display.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Display.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Example1\Example1.css            W:\InfoDisplay\InfoDisplay\Views\App\Admin\Example1\Example1.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Display.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Display.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Example1\Example1.css            W:\InfoDisplay\InfoDisplay\Views\App\Display\Example1\Example1.min.css            W:\InfoDisplay\InfoDisplay\Views\App\Home\Home.css            W:\InfoDisplay\InfoDisplay\Views\App\Home\Home.min.css            ----------------------------------------------------------            Compile Styles            ----------------------------------------------------------            ...            ----------------------------------------------------------            Finished            ----------------------------------------------------------

Output Window Pane Example: (Failed compilation due to JavaScript Error)

            **********************************************************            Document saved: [example1.js]            **********************************************************            ----------------------------------------------------------            Combine Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\jquery\jquery-1.10.2.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\lodash\lodash.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular\angular-1.2.3.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\angular-ui-router\angular-ui-router.min.js            W:\InfoDisplay\InfoDisplay\Scripts\Vendor\restangular\restangular.min.js            ----------------------------------------------------------            Compile Script Sources            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\Scripts\Common\angular-ui-carousel\angular-ui-carousel.js            W:\InfoDisplay\InfoDisplay\Scripts\App\App.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Admin.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Admin\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Display.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Display\Example1\Example1.js            W:\InfoDisplay\InfoDisplay\Scripts\App\Home\Home.js            ----------------------------------------------------------            Compile Templates            ----------------------------------------------------------            Views/App/Admin/Admin.template.html            Views/App/Admin/Example1/Example1.template.html            Views/App/Display/Display.template.html            Views/App/Display/Example1/Example1.template.html            Views/App/Home/Home.template.html            Common/angular-ui-carousel/angular-ui-carousel.template.html            ----------------------------------------------------------            Compile Scripts            ----------------------------------------------------------            ...            ----------------------------------------------------------            Closure Compiler Error            ----------------------------------------------------------            W:\InfoDisplay\InfoDisplay\app.debug.js:248: ERROR - Parse error. missing } after property list                            );                            ^            1 error(s), 0 warning(s)            ----------------------------------------------------------            Finished            ----------------------------------------------------------

AngularToolbox

Bernd Wessels