Setup environment to work with AngularJS

What are you going to achieve in this post? The answer is an environment to learn or work with AngularJS which will help you saving your time and working effectively. Start with this post if your are new to AngularJS.

Why it will save your time and help you work effectively? Because of two reasons:
1. Package Manager: You will not need to download any library and add to your source code manually. It is similar to NuGet for .NET.
2. Browser Sync: When you make changes in your code, you no need to reload browser as you did before, we will automate for this action.

OK, Let's start!

Package Manager

Firstly, download and install NodeJS to use npm. After installed NodeJS successfully, we can check it ready by the command line:

$ npm -v

And install Git. Check git is available:

$ git --version

Note: You need to restart your computer before doing next step.

Next, we will install bower which uses to manage packages for your website. Example AngularJS, JQuery libraries and so on...Install bower by command:

$ npm install -g bower

-g means that bower will available on global then we can use it anywhere.

Folder Structure

The package manager is ready, now we will start creating the web application struct.

$ mkdir angular-example
$ cd angular-example

In this folder we need to create source folder and some necessary files:

angular-example  
   |
   |---src
   |    |---app
   |    |    |---app.js
   |    |---index.html
   |---bower.json
   |---package.json

src/ Your codes will be here.

bower.json This file will keep all packages which you installed.

{
  "name": "angular-example",
  "version": "1.0.0",
  "authors": [
    "Tran Khanh Nguyen"
  ],
  "description": "",
  "homepage": "",
  "ignore": [

  ],
  "dependencies": {

  }
}

package.json This file will contain your application's information and its dependences.

{
  "name": "angular-example",
  "version": "1.0.0",
  "description": "",
  "author": "Tran Khanh Nguyen",
  "dependencies": {

  }
}

That's the basic struct of an angular application. Now let's install angular to your application:
Note: Make sure that you're in angular-example/ directory to run the command below.

$ bower install angular --save

--save means that you will save the packages that you have installed. In the future, to restore the packages that you saved, just using command: bower install.

Now you will see a new folder bower_components in your application.

Automatic injection & Local server

Generally, to use angular or any other components even any js files we need to add links to your html file, like this:

<html>  
...
<script src="../bower_components/angular/angular.js"></script>  
</html>  

But now we will make this step automatically by using gulp. In the scope of this post, I will not show you more about gulp, I will just make the app run, I will explain more in future post.

To do it, we need to install gulp components by using npm:
Note: Make sure that you're in angular-example/ directory to run the command below.

$ npm install gulp browser-sync wiredep gulp-inject --save

Then we will create a file with name gulpfile.js same level to bower.json file /angular-example/gulpfile.js with content:

var gulp = require('gulp');  
var browserSync = require('browser-sync').create();  
var wiredep = require('wiredep').stream;  
var inject = require('gulp-inject');

gulp.task('serve', ['inject'], function () {  
    var files = [
        './src/app/**/*.html',
        './src/app/**/*.js'
    ];
    browserSync.init(files, {
        server: {
            baseDir: './src',
            routes: {
                '/bower_components': './bower_components/',
                '/src': './src'
            }
        },
        port: 9000
    });
});

gulp.task('inject', function () {  
    var target = gulp.src('./src/index.html');
    var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], { read: false });

    target
        .pipe(wiredep({
            optional: 'configuration',
            goes: 'here'
        }))
        .pipe(inject(sources)).pipe(gulp.dest('./src'));
});

Just keep in mind that this file will help you inject bower components and js files to your index.html automatically and make a local serve to run your application with port 9000 and when you change any files in the source directory the browser will be reloaded automatically. That's it. We will learn more about gulp later.

Source Code

Excellent! Almost done, now, we will write code for the application. The source code is the same to my previous post.

Start with app.js we will create module in here

var app = angular.module('AngularExample', []);  
app.controller('MyController', function($scope) {  
   $scope.message = 'You are awesome!';
});

Then index.html

<!doctype html>  
<html ng-app="AngularExample">

<head>  
</head>

<body ng-controller="MyController">  
    <h1>{{message}}</h1>
</body>  
<!-- placeholder for bower injection -->  
<!-- bower:js -->  
<!-- endbower -->

<!-- placeholder for app scripts injection -->  
<!-- inject:js -->  
<!-- endinject -->  
</html>  

Run

Well done, just run your angular application by:
Note: Make sure that you're in angular-example/ directory to run the command below.

$ gulp serve

Conclusion

Now you have a convenience to work and learn AngularJS with automatically injection and browser sync. It will save your time and work effectively.

You can get the source code on GitHub.

Nguyen Tran

I'm Nguyen, a full stack web passion for frontend and love Angular.

Subscribe to Nguyen Tran

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!