[email protected]

Author: tanmoythander

README.md

@@ -1,82 +1,95 @@
-<h1>Angular Gulp Boilerplate</h1>
+# Angular Gulp Boilerplate
 
-<b>Quickly start your angularJS project, develope with flexibility using dev command line tools and build a deploy version with source minification.</b>
-<br>
+#### Quickly start your angularJS project, develope with flexibility using dev command line tools and build a deploy version with source minification.
 
-<h2>Installing on local machine</h2>
 
-<h4>Please make sure you have node.js installed on your machine</h4>
-If you don't have, <a href="https://nodejs.org/" >click here...</a>
-<br><br>
+## Installing on local machine
 
 
-<b>1. check if you have it installed or not</b>,
+### Please make sure you have node.js installed on your machine
+If you don't have, [click here](https://nodejs.org/)
+
+
+#### 1. Check if you have it installed or not,
 
 	npm -v
 
 and,
 
 	node -v
 
-you should see some version info in return.<br><br>
+you should see some version info in return.
 
-<b>2. install global packages</b>(run on any directory)
+#### 2. Install global packages
+run on any directory,
 
-	npm install -g gulp node-gyp
+	npm install -g gulp-cli node-gyp
 
-in case of mac or linux, you might need to mention "sudo"<br><br>
+in case of mac or linux, you might need to mention "sudo"
 
 
-<b>3. now go to the directory where you want to place the project files using git bash (terminal for mac or linux)</b><br>
-run the command
+#### 3. Now go to the directory where you want to place the project files using git bash
+(terminal for mac or linux)
+run the command,
 
 	git clone URL
 
-here URL is the http url you get from the repository page, <a href="https://github.com/tanmoythander/angular-gulp-boilerplate">Click here to clone</a><br><br>
+here URL is the http url you get from the repository page, [Click here to clone](https://github.com/tanmoythander/angular-gulp-boilerplate)
 
-<b>4. now navigate to the project directory with cmd (terminal for mac or linux)</b><br>
-run the command
+#### 4. now navigate to the project directory with cmd (terminal for mac or linux)</b><br>
+run the command,
 
 	npm install
 
 wait for it to be completed. It usually takes 5-10 minutes to complete.<br>
 It will download all the dependencies, build the project and serve the build on browser<br><br>
 
-<h2>Using the gulp commands</h2>
+## Using the gulp commands
 
-<b>1. Serve from source (<b>./</b>) with watch (Development Mode)</b>
 
+#### 1. Serve the source
+File watching enabled (Development Mode)
+```
 	gulp
+```
+You should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
 
-you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
 
-<b>2. Build the source (Deployment Mode)</b>
+If you want to serve the source without watching file changes(Source Testing Mode),
+run this,
+```
+	gulp serveSource
+```
 
-	gulp build
 
-it will delete previous build !!!<br>
-build files will be saved under <b>./_build</b> directory<br><br>
+#### 2. Build the source
+Build the source code into ./_build (Deployment Mode)
+```
+	gulp build
+```
+Warning: it will delete previous build !!!
 
-<b>3. Serve from source (<b>./</b>) without watch (Source Testing Mode)</b>
 
-	gulp server
+#### 3. Serve the build
+Serve the ./_build/ without watch (Build Testing Mode)
 
-you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
+```
+	gulp serveBuild
+```
+you should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
+Warning: it will delete previous build !!!
 
-<b>4. Serve from build (<b>./_build/</b>) without watch (Build Testing Mode)</b>
 
-	gulp server-build
+## Developer Hint
 
-you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
+Please change your editor configuration like below before you start development
 
-<h2>Developer Hint</h2>
+#### Indent character: "\t" (tab)
 
-Please change your editor configuration like below before you start development
+#### Indent size: 2
 
-<b>Indent character</b>: "\t" (tab)
+#### Line endings: LF (unix)
 
-<b>Indent size</b>: 2
 
-<b>Line endings</b>: LF (unix)
 
-<br><br>See the live demo <a href="https://angular.tanmoythander.info">here</a>
+See the live demo [here](https://tanmoythander.info/angular)

app/app-config.js

@@ -49,11 +49,11 @@
 
 			.state('demo-home', {
 				url: '/demo-home',
-				templateUrl: 'views/demo-home.html'
+				templateUrl: '/views/demo-home.html'
 			})
 			.state('demo-home.libs', {
 				url: '/libs',
-				templateUrl: 'views/demo-home-list.html',
+				templateUrl: '/views/demo-home-list.html',
 				controller: 'ListController'
 			})
 
@@ -69,14 +69,14 @@
 				url: '/demo-about',
 				views: {
 					'': {
-						templateUrl: 'views/demo-about.html'
+						templateUrl: '/views/demo-about.html'
 					},
 					'columnOne@demo-about': {
 						// eslint-disable-next-line max-len
 						template: '<p style="padding-top: 25px;">Those who are new to angularJS they must have a question in mind, "How to run the angular properly?"<br><br>Well, this tiny gulp tool built on NodeJS can run the angular source in the browser and watch for file changes while you are developing.<br>When you are deploying the project, you can just minify the source to prevent you source from being stolen as well as reduce the build size remarkably.</p>'
 					},
 					'columnTwo@demo-about': {
-						templateUrl: 'views/demo-table-data.html',
+						templateUrl: '/views/demo-table-data.html',
 						controller: 'CommandController'
 					}
 				}

components/directives/carousel.directive.js

@@ -10,7 +10,7 @@
 		// Definition of directive
 		var directiveDefinitionObject = {
 			restrict: 'E',
-			templateUrl: 'components/directives/carousel.html'
+			templateUrl: '/components/directives/carousel.html'
 		};
 
 		return directiveDefinitionObject;

components/directives/footer.directive.js

@@ -10,7 +10,7 @@
 		// Definition of directive
 		var directiveDefinitionObject = {
 			restrict: 'E',
-			templateUrl: 'components/directives/footer.html'
+			templateUrl: '/components/directives/footer.html'
 		};
 
 		return directiveDefinitionObject;