AngularJS 1.4 has now been released.
It introduces a new Router, a translation system similar to angular-translate created by Pascal Precht, some performance enhancement and a better Webpack, Browserify support (CommonJS) without any “hacks”. You can for example directly import AngularJS like this
import 'angular/angular.js';
instead of this
require('expose?angular!exports?window.angular!angular/angular.js')
Demo
Source available on Github : https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate
Basic Needs
Dependencies (package.json)
For this tutorial we will need AngularJS, Angular Material, the UI router (The new router is not ready for production yet) and a icon library.
[text] “dependencies”: { “angular”: “~1.4.0”, “angular-animate”: “~1.4.0”, “angular-aria”: “~1.4.0”, “angular-material”: “^0.10.1”, “angular-ui-router”: “^0.2.14”, “font-awesome”: “^4.3.0” } [/text]
Webpack
If you need an explanation on what is Webpack for, I suggest you go check out a previous post of mine: https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/
We will need the following Webpack loaders to be able to compile ECMAScript 6 code and to process CSS, HTML files.
[text] “devDependencies”: { “babel-loader”: “^5.0.0”, “css-loader”: “^0.12.0”, “file-loader”: “^0.8.1”, “html-loader”: “^0.3.0”, “html-webpack-plugin”: “^1.3.0”, “style-loader”: “^0.12.1” } [/text]
The webpack.config.js
cannot be easier:
module.exports = {
entry: './lib/index.js',
output: {
path: './www',
filename: 'bundle-[hash:6].js'
},
module: {
loaders: [{
test: /\.html$/,
loader: 'file?name=templates/[name]-[hash:6].html'
}, {
test: /\.css$/,
loader: "style!css"
}, {
test: /\.js$/,
exclude: /(node_modules)/,
loader: "ng-annotate?add=true!babel"
}, {
test: [/fontawesome-webfont\.svg/, /fontawesome-webfont\.eot/],
loader: 'file?name=fonts/[name].[ext]'
}]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './lib/index.html'
})
]
};
Entry point (lib/index.js)
The following entry point gathers all our application basic needs: Angular, Material Design, the router and the icons. Here we use import
which is the ECMAScript 6 way to require CommonJS modules, inject angularMaterial
and angularUIRouter
as our module dependencies and to finish we export our module as default (You can export several modules within a single file, default is the export you will get if you do not specify a specific import).
// Import angular
import 'angular/angular.js';
// Material design css
import 'angular-material/angular-material.css';
// Icons
import 'font-awesome/css/font-awesome.css';
// Materail Design lib
import angularMaterial from 'angular-material';
// Router
import angularUIRouter from 'angular-ui-router';
// Create our demo module
let demoModule = angular.module('demo', [
angularMaterial,
angularUIRouter
])
export default demoModule;
Index.html
The index.html needs two things. A way to bootstrap the application (here ng-app="demo"
) and a way to include the JavaScript file generated by Webpack (here src="{%=o.htmlWebpackPlugin.assets[chunk]%}"
).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
</head>
<body ng-strict-di ng-app="demo">
{% for (var chunk in o.htmlWebpackPlugin.assets) { %}
<script src="{%=o.htmlWebpackPlugin.assets[chunk]%}"></script>
{% } %}
</body>
</html>
Now you should have your demo
module running. To make sure it works add the following lines to your entry point:
demoModule.run(($log) => {
$log.info('demo running');
})
and check the console!
Going further
Create your own module
Now that our application is running let’s create a home module with ES6!
// Create a new module
let homeModule = angular.module('demo.home', []);
// Named export is needed to inject modules directly as Angular dependencies
export default homeModule = homeModule.name
Then we can import it the same way as other modules:
import home from './home/home.module.js';
// Create our demo module
let demoModule = angular.module('demo', [
angularMaterial,
angularUIRouter,
home
])
Now let’s create a controller function './home.controller'
that will be imported by our new module:
export default function($scope) {
'ngInject';
}
'ngInject';
is an annotation of ng-annotate that allow us to use AngularJS in strict mode. If you want to know more about Ng-annotate here is an explanation: https://julienrenaux.fr/2015/01/18/angularjs-1-x-open-source-projects-to-follow-in-2015/#Ng-Annotate
We can then import the function that way:
let homeModule = angular.module('demo.home', []);
import HomeController from './home.controller';
homeModule.controller('HomeController', HomeController);
export default homeModule = homeModule.name
Full demo
A working example is available on Github, feel free to fork: https://github.com/shprink/angular1.4-ES6-material-webpack-boilerplate
Install
git clone git@github.com:shprink/angular1.4-ES6-material-webpack-boilerplate.git
cd angular1.4-ES6-material-webpack-boilerplate.git
npm install
Dev (liverelaod server)
npm run-script devserver
Build
npm run-script build