kmassada/Angular-quickstart.md

## Angular-quickstart.md

      
    Raw
  

              Angular-quickstart.md
            
          
    init

mkdir nuProject
bower init
npm init -y

touch gulfile.js
mkdir -p public/{css,js}
touch public/css/style.css
touch public/js/script.js

bower ui and angular files

bower install jquery bootstrap font-awesome  --save
bower install angular  --save

gulp quick setup

npm install gulp wiredep gulp-inject --save-dev

create index.html per template below

insert overrides for bower.json, for wiredep to inject the correct files

setup gulp file to inject files installed from bower.json, and predefined css and js files


## bower.json

	"overrides": {
		"bootstrap": {
			"main": [
     "dist/js/bootstrap.js",
     "dist/css/bootstrap.min.css",
     "less/bootstrap.less"
   ]
		},
		"font-awesome": {
			"main": [
      "less/font-awesome.less",
      "css/font-awesome.min.css",
      "scss/font-awesome.scss"
   ]
		}
	},

## gulpfile.js
var gulp = require('gulp');

gulp.task('inject', function() {
  var wiredep = require('wiredep').stream;
  var inject = require('gulp-inject');
  var injectSrc = gulp.src(['./public/css/*.css', './public/js/*.js'],
  {read: false});
  var injectOptions = {
    ignorePath: 'public',
  };

  // Define where bowerjson options for wiredep
  var options = {
    bowerJson: require('./bower.json'),
    directory: './public/lib',
    ignorePath: '../../public/',
  };

  return gulp.src('./public/*.html')
      .pipe(inject(injectSrc,injectOptions))
      .pipe(wiredep(options))
      .pipe(gulp.dest('./public'));
});

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <!-- bower:css -->
    <!-- endbower -->

    <!-- inject:css -->
    <!-- endinject -->

    <!-- inject:js -->
    <!-- endinject -->
  </head>
  <body>

    <!-- bower:js -->
    <!-- endbower -->
  </body>
</html>

	"overrides": {
	"bootstrap": {
	"main": [
	"dist/js/bootstrap.js",
	"dist/css/bootstrap.min.css",
	"less/bootstrap.less"
	]
	},
	"font-awesome": {
	"main": [
	"less/font-awesome.less",
	"css/font-awesome.min.css",
	"scss/font-awesome.scss"
	]
	}
	},
	var gulp = require('gulp');

	gulp.task('inject', function() {
	var wiredep = require('wiredep').stream;
	var inject = require('gulp-inject');
	var injectSrc = gulp.src(['./public/css/.css', './public/js/.js'],
	{read: false});
	var injectOptions = {
	ignorePath: 'public',
	};

	// Define where bowerjson options for wiredep
	var options = {
	bowerJson: require('./bower.json'),
	directory: './public/lib',
	ignorePath: '../../public/',
	};

	return gulp.src('./public/*.html')
	.pipe(inject(injectSrc,injectOptions))
	.pipe(wiredep(options))
	.pipe(gulp.dest('./public'));
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test</title>
	<!-- bower:css -->
	<!-- endbower -->

	<!-- inject:css -->
	<!-- endinject -->

	<!-- inject:js -->
	<!-- endinject -->
	</head>
	<body>

	<!-- bower:js -->
	<!-- endbower -->
	</body>
	</html>