带有Ionic，Cordova，Node.js，视图和其他“静态”文件的AngularJs

Question

Full disclosure, pretty new to Angular and Ionic and I'm trying to understand it conceptually and get a feel for best practices so that I don't gotcha myself further down the road.

I've built websites and apps based off vanilla html/css/js coupled with node.js backends and jquery mobile for the app UI.

In those cases where a web service/backend was required I mostly used .ejs files and partials for the views and served them using res.render responses (passing data into the view dynamically) something like...

    app.get('/showallcustomers', function(req, res){
        db.connect("SELECT * from customers", [], function(result, error){
             var data = result.rows;
             res.render('pages/showall', {data:data})      
        });
    });

...while using S3 for my static JS/CSS/Images etc to alleviate the load on the node.js web service with regards to the static resources.

Other requests made via ajax would simply send/receive json from the node.js server.

Now, with angular js and the separation of concerns, with the view being separate from the controller and the data, I'm trying to figure out the best place to 'host' or serve my views and controllers.

In the case of an app, bundled with cordova, I could quite easily leave all these angular views/controllers in the root www folder of the app and package them up with the app (a bit like the giant 'page' driven index.html file for jQuery mobile) but could I instead use a cdn like S3 for my 'static' files like the angular view.html files and the controller.js files? Or even a more traditional web hosting type setup for static files?

I could then (presumably?) (using the $http module) restrict the "data" flow for my site/app to a mysite.com/ api type setup? Something like:

app.config(function($routeProvider){
        $routeProvider
            .when('/',{
                controller: 'customersController',
                templateUrl: 'app/views/customers.html'

            })

and in the controller something like...

$http.get('api/customers');

But if this is the case, and I serve static files in this way, how does the routeProvider know where to find the controller?

What do people generally do here? Completely separate the static files from the dynamic data? Or bundle it all together? Is there a correct way to do this? Or am I misunderstanding something conceptually?

Answer 1

Assumptions:

• I am not that familiar with Cordova, but I would assume it would work like browser extensions in high level.
• I am also assuming that your application is getting enough traffic that alleviating the load of serving files is not an overkill.

Thoughts:

• For JS files, bundling is probably a good idea. Regardless whether your server serves the files or S3 does, it will minimize the amount of connections the browser has to make.
• For JS files, since they will most likely be included into the file via <script> tags, you can simply upload them into S3. This shouldn't give you too big of a problem.
• For HTML template files, I believe you can do the same. Using RouteProvider and ng-include , you should be able to fetch them from S3.
• Also, if you are doing API calls, using an angular service would be a better idea than using $http module in the controllers.

Hope these help.