Công Nghệ

AngularJS with Gulp Step by Step

Step by step guide to making a production ready AngularJS app with Gulp. (Source code:

In this video I’m going to explain how to create a AngularJS app using Angular 1 and I’m going to explain how to do a basic hello world app using Gulp to deploy and test it locally.

It’s a bit more complicated than a hello world app because it’s going to focus on the deployment side of it, which would be suitable for a commercial environment.

For this tutorial we’ll be using Angular, Gulp, Browsersync and NPM (node package manager).

01:30 Install the latest version of node
02:00 Start by opening the terminal and setting up your workspace
02:50 Using the Atom editor
03:27 Initialise NPM repository
04:30 Install required packages for project
05:25 First dependency to install is Angular
06:40 Next install another Angular module called Angular route
07:18 Next install dependencies for local development and deployment of the app (Gulp)
09:10 Install Gulp-concat to merge files
10:17 Final dependency to install is Browsersync
12:15 Create a file structure
16:21 Create a styles.json file (scripts and styles)
18:48 Add our source code
20:57 Next add gulp file
24:54 Create Gulp tasks to automate workflow
32:40 Create a build task to build our project
33:56 Start our browsersync server
34:45 Create a final task to start our development server
36:12 Gulp watch to watch this directory
37:30 Test the deployment
38:20 Create our Angular app starting with the index.html file
41:24 Create a homepage
43:01 Next create new JavaScript files
46:52 Make a controller
50:03 Run Gulp start, go to browser and navigate to url & troubleshoot
54:59 Demonstrate the real-time changes

And that’s it!

We’ve gone through how to build a basic Angular app in a way that you can now build on top of this app. This is a base you can use for future projects or business ideas.

Thanks for watching.

If you like this video check out my tutorials on

Learn how to build a backend using Python & Django REST Framework:

Nguồn: https://ftlinuxcourse.com

Xem thêm bài viết khác: https://ftlinuxcourse.com/cong-nghe

Công Nghệ
Photoshop Online , Hướng DẫnTách Voan Cô Dâu Cực Đỉnh Bên photoshop
Lập Trình Linux
Thực hành lênh echo với ngôn ngữ lập trình batch (Hệ điều hành Windows)
Âm Nhạc
  • Nice intro to gulp. I am actually migrating an angularJs app to angular 9 and i found this quite usefull

  • Thankyou for making and uploading this tutorial, really helped me a lot.

  • Super… Thank you so much.

  • How about if you use bower to install the dependencies?

  • Great tutorial! Its only Hello World but very useful Hello World that You can build on it 😉 The one main drawback of this is that some modules needs to be loaded in specific order and if You have a lot of modules then You can't just concat js files with stream src defined by "**/*.js"

  • which version of glup are you using??

  • what did you deploy exactly? you just created an application. i thought this was a deployment video?

  • kalkal

    Author Reply

    you so great man , thank you very very much.

  • Great video and tutorial. Its really good that you explain the 'why' behind it all.

  • I did as the tutorial, it's worked but when I access localhost:3000 it isn't auto add suffix "/#/", pls help me. I'm using angular-ui-router instead of angular-route

  • krigekrige

    Author Reply

    To run a sequence of multiple tasks in gulp you don't need gulp.start, you can write gulp.task('build', ['css', 'js', 'html']);

  • krigekrige

    Author Reply

    Brilliant! Thank you very much for making this video, everything is more clear now! I subscribed to your channel, hope to see more videos like this.

  • Excellent work ! Than you !!

  • Very Informative! Thank you so much 🙂

  • you are awesome, very easy to understand for me, thanks!

  • You Are a Awesome. Excellent Buddy.

  • Does not work for me. When I type 'gulp start' , I god this error
    'css' errored after 6.65 ms
    TypeError: browserSync.reload is not a function

    How to fix this error?

  • Brilliant example. I'm looking for MAKE replacement, maybe GAKE?

  • Cool video, though changing background colors at the end nearly broken my eyes

  • Awesome video

  • Hey man, I have done everything according to the video and every file has been generated in the dist folder but for some reason, my browser isn't loading the views folder but it is generated in dist folder. since the views folder isn't shown in the browser it's not generating the views home.html, please help me!!!

  • Thanks for the tutorial.It was very helpful.

  • Thank you for this video. I am getting this error when I run "gulp start" Task 'start' is not in your gulpfile. Please help!

  • Gulp is easy and to the point.

  • Truly awesome and descriptive to the core tutorial!!

  • I think You are right, this kind explanation is needed especialy for beginner

  • How to add bootstrap to the project, when I am trying add with npm, I am getting error, do I need to add anything in gulp file

  • Thanks a lot !!!

  • Fantastic tutorial!

  • Thanks you very much!! Great work!!

  • Great video. Learnt allot from this, thanks for sharing.

  • Hey Mark, the angular dependecies that you have mentioned in the scripts.json file are not included in the scripts.js file of the dist folder, it has got only the user defined javascript file, so I get an error that angular is not defined in the browser console

  • This is an awesome video, explaining all the technologies clean n clear. thank you.
    Would like to sass, minification n typecript videos

  • Great. The hardest part of javascript these days are setting things up with Gulp, Grunt or Webpack, hehe.

  • i have only one word "thanks, thanks a lot"

  • Really good video! Clean code all the way through.

  • Amazing HELPED ME A LOT!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!…THANKS

  • Hi there! Excelente video. As you said on it, there isnt to much videos that show how would you actually manage a real "production ready" application layout.

    I wanted to ask you, since you are using both, at dev and prod time, the "concatenated" file to run (for sure you will apply mimify on the prod later), how do you handle the debugging on an IDE, lets say Intellij.

    I'm asking it, since when you put the breakpoints, you do it on the not contactenated file you edit, but at runtime, the file is actually another.
    Is there any mechanism to have both? concatenation but at the same time, "clever" debug binding between the separated files and the concatenated one?

    Thanks again for the video.

  • Awesome Buddy 🙂 helped me alot

  • https://github.com/ravendcode/ng-gulp

  • Thank you for this tutorial. This has been the best explanation to these new technologies I have found.

  • 54:35 Gotcha !

    Btw, thank you for the awesome tutorial !
    please make more videos like this.

  • Thank you Very much and I can say your awesome

  • There's only one word to define this video: magnificent.

  • PLZ!! I'd love a video on how to hook up SASS and Pug into this same workflow. Autoprefixer would be a bonus.

    BTW: Coolness points for explaining things as you go along. This makes you a hidden wonder of YouTube's coding community. Hopefully not hidden for long.!

  • Thank's

  • thanks for this 😉