ASP. 5 and AngularJS Part 1, configuring Grunt, Uglify, and AngularJS

ASP. 5 and AngularJS Part 1, configuring Grunt, Uglify, and AngularJS

This was the first part of a multiple part blog series on building ASP. NET 5 (ASP. VNext) apps with AngularJS. In the this series of blogs posts, I show how can create a simple Movie app using ASP. 5, MVC 6, and AngularJS.

In the This blog post, I explain how to setup your. ASP. NET 5 project. In particular, I explain how can setup Grunt to combine and minify your front-end JavaScript files automatically.

Creating the ASP 5 Project

The very first thing that's need to does is to create a new ASP. 5 Project. In the This blog post, I'll show you how to create a new ASP. 5 Project using Visual Studio on Windows with a future BL OG Post, I'll discuss how to setup an ASP. 5 Project on a Mac in OSX with Sublime).

You can download Visual Studio (Preview) from the following address:

Http://www.visualstudio.com/en-us/downloads/visual-studio-2015-downloads-vs.aspx

Visual Studio fine works running Side-by-side with earlier versions of Visual Studio.

After you install Visual Studio, select File, New Project. Under the Visual C # templates, select ASP. WEB application and name the new project "Movieangularjsapp".

Next, select the ASP. 5 Empty project template and click the OK button to create the new project.

After the these steps, you'll have an empty ASP. 5 project that looks like this:

The layout of an ASP. 5 solution is significantly different than earlier versions of ASP. Notice The solution is divided into the solution folders named Solution Items and SRC. The SRC folder contains all of the source code for your project. Currently, the SRC folder includes our Movieangularjsapp project.

The Movieangularjsapp project contains a special folder named Wwwroot. The idea, the Wwwroot folder should contain all of the content of your live website. For example, it includes any HTML files and image assets required for your live website.

You should no of your source code in the Wwwroot folder. Instead, source Code-such as unminified JavaScript files, less files, MVC Controller source code, and C # model classes– Should be placed outside of the Wwwroot folder.

In particular, you want to create a folder in the root of your Movieangularjsapp project named Scripts. You'll create all of the your app's JavaScript files in the Scripts folder. We ll use Grunt to combine and minify the JavaScript files in the Scripts folder and add the result to the Wwwroot folder automatically.

Using NPM to Get the necessary Packages

Unlike earlier versions of Net, ASP. 5 natively supports three package managers:nuget, NPM, and Bower.

What's a package manager? A package Manager enables your easily gather together all of the resources so you need to create a project. For example, instead of navigating around the web and downloading project resources such as JQuery, the Entity Framework, Bootstrap, and AngularJS by hand, you can download all of the these resources and their dependencies automatically by taking a Dvantage of a package manager.

Previous versions of ASP. Supported NuGet and you'll still use NuGet with ASP. 5. You'll use NuGet to manage. NET packages such as ASP and the Entity Framework. You specify the NuGet packages so need in your project with the Project.json file.

ASP. 5 also supports NPM packages. This is new and exciting. The NPM Package Manager is originally created for managing packages for the Open-source NodeJS framework (an alternative Web App framework to ASP. You use the a file named Package.json to manage your project's NPM packages.

Finally, ASP. NET 5 also supports the Bower Package Manager. Bower is a package manager, created by Twitter, that's designed to support front-end development. You can use the Bower to manage resources such as AngularJS, JQuery, and Bootstrap.

For your Movie app project, we need to use NPM to gather all of the resources that we need to use Grunt. We'll use NPM for install Grunt and the Grunt plugins that we need. Follow these steps:

1. Right-click your Movieangularjsapp project and select the menu option Add, New Item.

2. Select NPM configuration file.

3. Click the Add button.

Completing these steps would add a new file to the root of the your Movieangularjsapp project named Package.json. Modify the file so, it looks like this:

123456789

{    "version": "0.0.0",    "name": "MovieAngularJSApp",    "devDependencies": {        "grunt": "0.4.5",        "grunt-contrib-uglify": "0.7.0",        "grunt-contrib-watch": "0.6.1"    }}

In our Package.json file, we ' ve indicated that we need three NPM packages named Grunt, Grunt-contrib-uglify, and Grunt-con Trib-watch. After the name of the all package, we have specified the version of the package and that we need.

Notice that, you get Intellisense (AutoComplete), and you edit the Package.json file. A matching List of NPM package names and version numbers appear as you type.

After you create the Package.json file, a new folder named NPM appears under your project ' s Dependencies folder. If you expand the NPM folder so you can see a list of all of the NPM packages so just added to the Package.json fi Le.

Right-click the NPM folder and select Restore Packages to download all of the NPM Packages. After your complete this step, the grunt, grunt-contrib-uglify, and grunt-contrib-watch packages would all be installed to a folder named Node-modules.

What's about Bower?

You can use Bower, as I mentioned earlier, to manage all of the packages so you need for front-end development. For example, you can use Bower to install the AngularJS JavaScript Library.

I ' m not going-Bower to install AngularJS in this project because I am going to reference AngularJS directly from th E Google CDN instead. I am going to add AngularJS to my Project index.html page like this:

1	<scriptsrc="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

This was controversial, but I believe so should always use a CDN for standard libraries such as AngularJS, Bootstrap, and JQuery. Using a CDN provides you and the best performance.

For example, if you visit multiple websites this all reference AngularJS from the same CDN then your browser does not need To download the AngularJS JavaScript Library when you visit each website. The browser can retrieve AngularJS from its cache instead.

So I use a CDN for standard libraries such as AngularJS or jQuery this might be used with multiple websites. For apps specific files, such as the AngularJS controller files, I use Grunt to combine and minify the files to improve per Formance.

Using Grunt to Build Your JavaScript Files

Grunt is an Open-source tool, the can use to build all of the frontend resources for your project. For example, you can use the Grunt to compile your less or Sass files into CSS. You can also with Grunt to combine and minify CSS and JavaScript files.

In this blog post, I'll show you the use of Grunt to combine and minify your JavaScript files. We ' ll configure Grunt so that it'll take a all of the JavaScript files from the Scripts folder, combine and minify the FIL ES, and save the results to a file named App.js in the Wwwroot folder.

Follow these steps:

1. Right-click your Movieangularjsapp project and select Add, New Item.

2. Select Grunt Configuration file.

3. Click the Add button.

After your complete these steps, your project would contain a new file named Gruntfile.js. Modify the contents of the Gruntfile.js file so, it looks like this:

123456789101112131415161718192021222324

module.exports = function (grunt) {    // load Grunt plugins from NPM    grunt.loadNpmTasks(‘grunt-contrib-uglify‘);    grunt.loadNpmTasks(‘grunt-contrib-watch‘);    // configure plugins    grunt.initConfig({        uglify: {            my_target: {                files: { ‘wwwroot/app.js‘: [‘Scripts/app.js‘, ‘Scripts/**/*.js‘] }            }        },        watch: {            scripts: {                files: [‘Scripts/**/*.js‘],                tasks: [‘uglify‘]            }        }    });    // define tasks    grunt.registerTask(‘default‘, [‘uglify‘, ‘watch‘]);};

Our Gruntfile contains three sections. The first section was used to load each of the Grunt plugins that we need from the NPM packages that we configured earlier. We need to use a Grunt plugin named grunt-contrib-uglify and a Grunt plugin named Grunt-contrib-watch.

Next, we enter the configuration information for each plugin. The Uglify plugin is configured So, it combines and minifies all of the files from the Scripts folder and places the R Esults in a file named App.js in the Wwwroot folder:

12345

uglify: {     my_target: {        files: { ' wwwroot/app.js ' : [ ' scripts/app.js ' ' scripts/**/*.js ' }     } },

Notice that I use the array [' scripts/app.js ', ' scripts/**/*.js ') to specify the source files. I want the contents of the App.js JavaScript file to appear in the combined JavaScript file before the contents of any oth Er JavaScript files because the App.js file contains the declaration of my main AngularJS module. In other words, if you want to control the order in which uglify combines JavaScript files then you need to list the order of your JavaScript files explicitly.

The Watch plugin is configured to Watch any changes to the JavaScript files in the Scripts folder with the following code:

123456

watch: {   scripts: {      files: [‘Scripts/**/*.js‘],      tasks: [‘uglify‘]   }}

If any files in the Scripts folder is changed, then the Watch plugin reruns uglify to generate a new combined and minifie d app.js file automatically.

The final section of the Grunt file contains a definitions for your tasks. In our Grunt file, we define a single "default" task that runs uglify and then watches for changes in our JavaScript files .

After you create a Grunt file, you need to run it by using the Visual Studio Task Runner Explorer. Follow these steps:

1. Select the menu option View, other Windows, Task Runner Explorer.

2. Click the Refresh button in the Task Runner Explorer window to ensure that the tasks for the Movieangularjsapp appears.

3. Right-click the Default task and select Run.

After the these steps, you can verify that Grunt are working by adding a JavaScript file (any JavaScript file) to The Scripts folder. Whenever you modify any JavaScript file in the Scripts folder then a new App.js file was generated in the Wwwroot folder au Tomatically.

Summary

In the This blog post, I focused on setting up a new ASP. 5 and AngularJS project. I configured NPM and Grunt So, my app specific JavaScript files would be combined and minified automatically. In the next blog post, I'll explain how can I create AngularJS templates that display movies retrieved from MVC 6 Web APs I.

Http://stephenwalther.com/archive/2015/01/12/asp-net-5-and-angularjs-part-1-configuring-grunt-uglify-and-angularjs

ASP. 5 and AngularJS Part 1, configuring Grunt, Uglify, and AngularJS