Wai Yan Hein Wai Yan Hein - 8 days ago 5
AngularJS Question

Converting angular js theme into normal html theme

I am about to develop a Web Application. I will use this theme- http://startangular.com/product/flatlogic-angular-material-dashboard/ for admin panel. I already installed it on my local machine following the instructions. But this is my first time of installing a html theme like this using command lines(npm, gem and gulp). I also noticed that all the angular js admin panel theme are has to be installed in that way. I mean using npm and other commands. Installation is fine. When I run this comamnd

gulp serve


It opens the browser and show the admin panel. But the problem is I do not understand the project structure.

enter image description here

Admin panel is working when I serve gulp. But what I want is I just want to access without serving gulp. I mean I want to move it to xampp. Then integrate with a framework(PHP). So for now when I access directly, it is not working. What I want is I just want to have simple projec something like this

/project
========
/css
/js
/view


So please how can I build them into it? I mean using command lines. For now I have to serve gulp to access my project. To convert it manually, I checked the index.html and there are a lot of syntax commented I am not familiar with.

eg

<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->


So please how can I convert the angular theme into simple project to send to server for deployment please? Can it be done from command lines?

Now my project is under

c:/xampp/htdocs/material_dashboard/angular-material-dashboard


When I access this

http://localhost/material_dashboard/angular-material-dashboard/src/


It shows nothing. Just white screen. No error in browser console as well.

When I access this

http://localhost/material_dashboard/angular-material-dashboard/.tmp/serve/


It is showing thie errors.

enter image description here

All status code 404 returns.

So please how can I access the project without serving gulp please? How can I access it? From which url can I access?

Answer

Development server

Angular applications are mix of JavaScript, HTML, CSS and every paths is relative to the root of application - index.html.

In this case copy contents of dist folder. Copy whole dist folder and deploy it.

Development server just tries to simulate real one production server. If it is working on development - that one that is executed over gulp server it should also works on production environment.

Production environment

It is time to go straight with application. There are only two major steps

  • build it with gulp build (of course if you are using gulp and there is task like that)
  • copy content of the builded directory to production environment (that steps is also called deployment)

CORS issue?

AngularJS application and the backend should be executed (should run) on the same protocol, domain and port address to avoid CORS policy rules.

Comments