CODEWITHSUNDEEP
javascripthtmlangularjs
Blessan Kurien
Blessan Kurien

Reputation: 1665

Live reloading in angular js

Hi I am new to angularjs framework. I am executing my app via the url localhost/angularsample, problem is when a change occurs in any file I will have to manually reload it to see the changes.

In a tutorial video I saw an angular app running on localhost:800 do live reload. How it is possible?

Upvotes: 0

Views: 4370

Answers (2)

Nour Lababidi
Nour Lababidi

Reputation: 444

[Angular] In some command line navigate to your app directory for example:

cd C:\Source\Sample\dashboard-app

Then assuming you have node.js installed and angular/cli installed do

ng serve

*I had some issue webpage not loading and it was a simple mistake which is : that when you navigate to your project you navigate to the source files not the "dist" files because if you change the dist files that will not refresh the webpage. It is important that you change the files in the src not the dist.

I hope this helps someone and save your time. Best of luck!

Upvotes: 0

Warlock
Warlock

Reputation: 7481

It doesn't matter if you are developing with angular or react or jquery. You could bring the livereload feature with gulp or grunt or any other framework for building front-end solutions.

I would recommend to use Gulp, because it is able to watch changes in files. So, everything you need is just tell your browser to update. For this you should use watch + livereload plugin.

Take a look at this article: https://scotch.io/tutorials/a-quick-guide-to-using-livereload-with-gulp

On my projects I use gulp-connect that supports livereload as well. Take a look at this example: http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

Also you could research Gulp recipes: https://github.com/gulpjs/gulp/blob/master/docs/recipes/server-with-livereload-and-css-injection.md

If you need more examples try to search by key words: gulp, connect, livereload.

Upvotes: 3

Related Questions