Welcome to weblogs.com.pk Sign in | Join | Help

Browserifying AngularJS Material

Frontend Development Series

AngularJS Series

In the previous AngularJS post; we used the NUGET package to get the AngularJS; and in Frontend Development Series we have explored Node/NPM, Bower, Gulp and Browserify and how they all can be used and supported in Visual Studio 2017. We can use AngularJS with modern Javascript approach (ES6/ES2015); and can use Gulp + Browserify to bundle our front-end application. Instead of writing some sample application from scratch; lets use the very famous AngularJS Material; that is a User Interface Component framework and a reference implementation of Google’s Material Design Specification. Its Getting Started guide has a step by step tutorial creating a demo application that’s available on Github. There are difference branches having different versions of the guide like ES6 and Typescript

If we use its ES6 version and bring it into our existing ASP.NET Application; our project will look like this

angularjs-material

  • I have added required NPM packages that the tutorial has details; and the packages required for our Gulp task
  • The steps of setting up Gulp and binding its task with Visual Studio Build is shown/discussed in the previous post of Frontend Development Series

We are bundling our AngularJS application and copying the angular.js and angular-material.css required files using the Gulp. We will need to refactor JS files in users/components updating the template URLs etc. The HTML from the tutorial is going to Material.aspx with appropriate CSS links and Script reference according to the Gulp task

aspx

AngularJS features Components that we can use to develop component based application structure. AngularJS component is a special kind of directive that uses simple configuration and creating them is very straight forward for instance in this sample application; the users-list component is created and used like html tag; the component has a template that can be HTML that can be composed using the other available components. Angular Material comes with such many components that render themselves according to Google Material Design. The usersList component is using these Angular Material components. This is similar to how we have been using ASP.NET Server/User Controls at server side in past; but this is now all being done at client side now.

angularjs-component

Now if we want more than one AngularJS application in the site; we will like that angular.js is not bundled into each frontend application. We probably would like to use Angular Material in multiple applications as well. The pattern is that we create Vendor-JS file; thats basically a bundle having all these libraries that we are using in different application and have separate bundle for our each front-end applications. This can be easily done using Browserify and Gulp; we will be using one instance of browserify to create the vendor-js bundle using .require() and another instance(s) to bundle our front-end applications using .external() against the same array of such vendor files that we want to bundle separately.

gulp-vendor-js

  • Note that I have not included angular.js in the vendor-js bundle; as if we are using the plain angular elsewhere we will like not to include it in the vendor bundle so same angular.js file is used everywhere (that browser might already have cached) I am using the same browserify-shim technique that we talked about in the previous Frontend Development Series post

In our app.js we no longer need to import the Angular Material libraries that we did earlier so they become part of the application bundle

import-angular-material

  • angular-material is still needed; or else ngMaterial use in angular.module() will give an error at runtime; the angular-material.js will not get included in the bundle; its just to keep the JS Transpiler for proper ngMaterial reference in the generate JS code

The code is available in angularjs branch at https://github.com/khurram-aziz/WebApplication47

Resources

Bonus

Also check react branch at same repository and notice how babelify react preset is used to compile JSX templates

Published Thursday, December 21, 2017 2:52 PM by khurram
Filed under:

Comments

No Comments

New Comments to this post are disabled