AngularJS remove directive tag from dom by adding content

I had been looking for a way to remove the Domain Specific Language (DSL) tag that we create through AngularJS directive, most of the documentation talks about transclude and all but none highlight the replacing tag with inner cotent

Lets talk about the example below:

The directive tags will be replaced by their respective template content instead of being added inside the directive tags.

Update: make sure you add one root element to your template content (for example using div. <div> Hello from directive 2</div>) if you don’t it will give error
Template for directive must have exactly one root element.

Using gulp and bower for build automation and dependencies management for angularjs app part2

This is the continuation part 2 of the Using gulp and bower for build automation and dependencies management for angularjs app.

In this part I am going to cover  rest of the gulpfile.js which is used to start the express server, reload the browser using browserSync and watching the files.

I will show below how we write a task that I am calling ‘startExpress’ to run the express server instance on port 4000

gulp.task('startExpress',['serve'], function () {

    var app = express();
    app.use(express.static(__dirname + '/website'));
    app.listen(4000);
});

As you see I have also added a dependency to the ‘startExpress’ function this ‘serve’ task will create the browserSync functionality and open the default browser for working with the code:

gulp.task('serve', function () {
    browserSync(
	{
	    proxy: "http://localhost:4000/"
	}
	);
});

Now lets talk about the last task in the gulpfile.js called ‘watch’, this task will help with dutiful watch over all the files that we assign and then also reload the browser after we are done making changes to those files:

gulp.task('watch', ['default','startExpress'], function () { /*Run default the first type command is sent gulp watch*/
    var watchFiles = [
        'public/templates/**/*.html',
		'public/js/**/*.js',
        'public/js/*.js',
        '!public/js/**/*.min.js',
        'public/css/*.css',
        '!public/css/*.min.css'
    ];

    gulp.watch(watchFiles, ['default']).on("change", browserSync.reload);
});

The complete gulpfile.js is listed below:

var gulp = require('gulp');

var gutil = require('gulp-util');

var jshint = require('gulp-jshint');

var usemin = require('gulp-usemin');

var uglify = require('gulp-uglify');

var minifyCss = require('gulp-minify-css');

var express = require('express');

var browserSync = require('browser-sync');

gulp.task('jshint', function () {
    gulp.src('public/js/**/*.js')
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
});

gulp.task('default',['jshint','templates'], function () { /*'startExpress' was here removed to not throw error as of running express*/
    gulp.src('public/templates/index.html')
         .pipe(usemin({
             assetsDir: 'public/',
             css: [minifyCss(), 'concat'],
             js: [uglify(), 'concat']
         }))
         .pipe(gulp.dest('website'));
});

gulp.task('templates', function () {
    gulp.src(['public/templates/**/*.html', '!public/templates/index.html'])
	.pipe(gulp.dest('website/templates/'));

});

gulp.task('startExpress',['serve'], function () {

    var app = express();
    app.use(express.static(__dirname + '/website'));
    app.listen(4000);
});

gulp.task('serve', function () {
    browserSync(
	{
	    proxy: "http://localhost:4000/"
	}
	);
});



gulp.task('watch', ['default','startExpress'], function () { /*Run default the first type command is sent gulp watch*/
    var watchFiles = [
        'public/templates/**/*.html',
		'public/js/**/*.js',
        'public/js/*.js',
        '!public/js/**/*.min.js',
        'public/css/*.css',
        '!public/css/*.min.css'
    ];

    gulp.watch(watchFiles, ['default']).on("change", browserSync.reload);
});

Now we can run gulp using the below statement

gulp watch

 

Using gulp and bower for build automation and dependencies management for angularjs app part1

This post is going to be about how to use gulp and bower for dependencies management and automation. In my last post we setup the angularjs project with yeoman scaffolding and visual studio 2013  ; this is the continuation of the next part however this post can be used separately as well for gulp and bower:

gulpbower-logo

Gulp.js 

Gulp is a streaming build / task system ; it uses pips for streaming data that needs to be processed; like for instance minification of css and then publishing it to destination folder.

Bower

Bower is also a node module(plugin) that is used for managing dependencies for dev or production build , keeping them updated and reusing the packaging.

So lets work with examples and see what the hoopla is all about 🙂

Continue reading “Using gulp and bower for build automation and dependencies management for angularjs app part1”

Starting with yeoman(yo man) and visual studio 2013 angularjs spa development


visual studio 2013yeoman

Today I am going to provide a walk through of how to setup yeoman scaffolding tool for  AngularJS and use the angularjs spa files with visual studio 2012+ for development.

I am sure everyone is already familiar with npm modules (npm stands for node package manager) we will be using it alot in this post. Npm is available as soon as you install Node.js on windows or unix environments.

In order to use yeoman scaffolding for angularjs development we will install yeoman from npm and also other tools that will help with our development:

  • yeoman
  • bower
  • gulp

Continue reading “Starting with yeoman(yo man) and visual studio 2013 angularjs spa development”