Skip to content

Commit 6f65dc1

Browse files
tanmoythandertanmoythander
authored
Merge pull request #1 from tanmoythander/v2
v2.0.0
2 parents e074885 + e4ff3a9 commit 6f65dc1

10 files changed

+1480
-2365
lines changed

‎README.md

+64-50
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,96 @@
1-
<h1>Angular Gulp Boilerplate</h1>
1+
# Angular Gulp Boilerplate
22

3-
<b>Quickly start your angularJS project, develope with flexibility using dev command line tools and build a deploy version with source minification.</b>
4-
<br>
3+
#### Quickly start your angularJS project, develope with flexibility using dev command line tools and build a deploy version with source minification.
54

6-
<h2>Installing on local machine</h2>
75

8-
<h4>Please make sure you have node.js installed on your machine</h4>
9-
If you don't have, <a href="https://nodejs.org/" >click here...</a>
10-
<br><br>
6+
## Installing on local machine
117

128

13-
<b>1. check if you have it installed or not</b>,
9+
### Please make sure you have node.js installed on your machine
10+
If you don't have, [click here](https://nodejs.org/)
1411

15-
npm -v
1612

13+
#### 1. Check if you have it installed or not,
14+
```
15+
npm -v
16+
```
1717
and,
18+
```
19+
node -v
20+
```
21+
you should see some version info in return.
1822

19-
node -v
23+
#### 2. Install global packages
24+
run on any directory,
25+
```
26+
npm install -g gulp-cli node-gyp
27+
```
28+
in case of mac or linux, you might need to mention "sudo"
2029

21-
you should see some version info in return.<br><br>
2230

23-
<b>2. install global packages</b>(run on any directory)
31+
#### 3. Now go to the directory where you want to place the project files using git bash
32+
(terminal for mac or linux)
33+
run the command,
34+
```
35+
git clone URL
36+
```
37+
here URL is the http url you get from the repository page, [Click here to clone](https://github.com/tanmoythander/angular-gulp-boilerplate)
2438

25-
npm install -g gulp node-gyp
39+
#### 4. now navigate to the project directory with cmd (terminal for mac or linux)</b><br>
40+
run the command,
41+
```
42+
npm install
43+
```
44+
wait for it to be completed. It usually takes 5-10 minutes to complete.
45+
It will download all the dependencies, build the project and serve the build on browser.
2646

27-
in case of mac or linux, you might need to mention "sudo"<br><br>
47+
## Using the gulp commands
2848

2949

30-
<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>
31-
run the command
50+
#### 1. Serve the source
51+
File watching enabled (Development Mode)
52+
```
53+
gulp
54+
```
55+
You should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
3256

33-
git clone URL
3457

35-
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>
58+
If you want to serve the source without watching file changes (Source Testing Mode),
59+
run this,
60+
```
61+
gulp serveSource
62+
```
3663

37-
<b>4. now navigate to the project directory with cmd (terminal for mac or linux)</b><br>
38-
run the command
3964

40-
npm install
41-
42-
wait for it to be completed. It usually takes 5-10 minutes to complete.<br>
43-
It will download all the dependencies, build the project and serve the build on browser<br><br>
65+
#### 2. Build the source
66+
Build the source code into ./_build (Deployment Mode)
67+
```
68+
gulp build
69+
```
70+
Warning: It will delete previous build !!!
4471

45-
<h2>Using the gulp commands</h2>
4672

47-
<b>1. Serve from source (<b>./</b>) with watch (Development Mode)</b>
73+
#### 3. Serve the build
74+
Serve the ./_build/ without watching file changes (Build Testing Mode)
4875

49-
gulp
76+
```
77+
gulp serveBuild
78+
```
79+
you should see the browser window opening address http://localhost:3000 (opens another port if unavailable).
5080

51-
you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
81+
Warning: It will delete previous build !!!
5282

53-
<b>2. Build the source (Deployment Mode)</b>
5483

55-
gulp build
84+
## Developer Hint
5685

57-
it will delete previous build !!!<br>
58-
build files will be saved under <b>./_build</b> directory<br><br>
59-
60-
<b>3. Serve from source (<b>./</b>) without watch (Source Testing Mode)</b>
61-
62-
gulp server
63-
64-
you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
65-
66-
<b>4. Serve from build (<b>./_build/</b>) without watch (Build Testing Mode)</b>
67-
68-
gulp server-build
69-
70-
you should see the browser window opening address http://localhost:3000 (opens another port if unavailable)<br><br>
86+
Please change your editor configuration like below before you start development
7187

72-
<h2>Developer Hint</h2>
88+
#### Indent character: "\t" (tab)
7389

74-
Please change your editor configuration like below before you start development
90+
#### Indent size: 2
7591

76-
<b>Indent character</b>: "\t" (tab)
92+
#### Line endings: LF (unix)
7793

78-
<b>Indent size</b>: 2
7994

80-
<b>Line endings</b>: LF (unix)
8195

82-
<br><br>See the live demo <a href="https://angular.tanmoythander.info">here</a>
96+
See the live demo [here](https://tanmoythander.info/angular)

‎app/app-config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -49,11 +49,11 @@
4949

5050
.state('demo-home', {
5151
url: '/demo-home',
52-
templateUrl: 'views/demo-home.html'
52+
templateUrl: '/views/demo-home.html'
5353
})
5454
.state('demo-home.libs', {
5555
url: '/libs',
56-
templateUrl: 'views/demo-home-list.html',
56+
templateUrl: '/views/demo-home-list.html',
5757
controller: 'ListController'
5858
})
5959

@@ -69,14 +69,14 @@
6969
url: '/demo-about',
7070
views: {
7171
'': {
72-
templateUrl: 'views/demo-about.html'
72+
templateUrl: '/views/demo-about.html'
7373
},
7474
'columnOne@demo-about': {
7575
// eslint-disable-next-line max-len
7676
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>'
7777
},
7878
'columnTwo@demo-about': {
79-
templateUrl: 'views/demo-table-data.html',
79+
templateUrl: '/views/demo-table-data.html',
8080
controller: 'CommandController'
8181
}
8282
}

‎components/directives/carousel.directive.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
// Definition of directive
1111
var directiveDefinitionObject = {
1212
restrict: 'E',
13-
templateUrl: 'components/directives/carousel.html'
13+
templateUrl: '/components/directives/carousel.html'
1414
};
1515

1616
return directiveDefinitionObject;

‎components/directives/carousel.html

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<div id="owl-carousel-1" class="owl-carousel owl-theme">
22
<div class="item">
3-
<img src="images/nodejs.jpg">
3+
<img src="images/nodejs.jpg" alt="NodeJS">
44
</div>
55
<div class="item">
6-
<img src="images/angularJS.jpg">
6+
<img src="images/angularjs.jpg" alt="AngularJS">
77
</div>
88
<div class="item">
9-
<img height="380px" src="images/bootstrap-stack.png">
9+
<img height="380px" src="images/bootstrap-stack.png" alt="Bootstrap">
1010
</div>
1111
<div class="item">
12-
<img src="images/gulpjs.jpg">
12+
<img src="images/gulpjs.jpg" alt="GulpJS">
1313
</div>
1414
<div class="item">
15-
<img src="images/font-awesome.jpg">
15+
<img src="images/font-awesome.jpg" alt="FontAwesome">
1616
</div>
1717
<div class="item">
18-
<img src="images/lodash.jpg">
18+
<img src="images/lodash.jpg" alt="Lodash">
1919
</div>
2020
<div class="item">
21-
<img src="images/jquery.png">
21+
<img src="images/jquery.png" alt="jQuery">
2222
</div>
2323
</div>
2424
<script type="text/javascript">

‎components/directives/footer.directive.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
// Definition of directive
1111
var directiveDefinitionObject = {
1212
restrict: 'E',
13-
templateUrl: 'components/directives/footer.html'
13+
templateUrl: '/components/directives/footer.html'
1414
};
1515

1616
return directiveDefinitionObject;

0 commit comments

Comments
 (0)