Angular for responsive, sending viewport size with rest queries?

[Iain Duncan]

Hi folks, I'm planning on using Angular for a lightweight responsive CMS in which content is grabbed from a ReST service, likely implemented in Flask or Pyramid. What I want to do specifically is:

- use Less/Compass/Susy on the front end

- have Angular get page content via rest queries

- have Angular sent the current viewport/display size to the back end with the content queries so the backend can optionally return different content for the phone factor 

Before reinventing the wheel I thought I'd ask if there is already a common documented way of doing this. Pointers to online resources welcome too.

Also would be interested in pointers to any CMS projects for doing that. I normally use Python but would be interested in being able to backend with Ruby (or even PHP) as well in case I can't sell the client on being able to host Python.

thanks!

Iain

[Luke Kende]

Well, based on how the question points are posed, it doesn't sound like you quite have a grasp of angular, but I will offer some direction.  

- First, go through the main tutorial if you have not done so: http://docs.angularjs.org/tutorial

- Used as a single page app, angular uses partials when switching views that are retrieved via XHR not via RESTful API.  To do this, review the use of ng-router and ng-view.  One you've set up your routes via $routeProvider, then angular will handle loading the different views.  If you need nested views and "states" then you might look into to ui-router.

http://scotch.io/tutorials/javascript/single-page-apps-with-angularjs-routing-and-templating

https://github.com/angular-ui/ui-router

- Using less/compass is no problem, but irrelevant to angular really.  

- Instead of sending viewport size to your api, I'd recommend reading up on css media queries or simply loading a different index.html file based on the device requesting the page.

Personally, I do not know of any CMS's using angular.  The server is agnostic, so it does not really matter, but there are some good seeds to start with based on using NodeJs.  

Here's a link I found that list a few:  http://www.jquery4u.com/angular-js/5-angular-js-seeds-bootstrap-apps/

Good luck!

[Iain Duncan]

On Mon, Mar 17, 2014 at 11:06 PM, Luke Kende <luke....@gmail.com> wrote:

Well, based on how the question points are posed, it doesn't sound like you quite have a grasp of angular, but I will offer some direction.  

- First, go through the main tutorial if you have not done so: http://docs.angularjs.org/tutorial

Thanks, have done so already. 

- Used as a single page app, angular uses partials when switching views that are retrieved via XHR not via RESTful API.  To do this, review the use of ng-router and ng-view.  One you've set up your routes via $routeProvider, then angular will handle loading the different views.  If you need nested views and "states" then you might look into to ui-router.

 

Well technically Representation State Transfer refers to the idempotent URL schema used on the server side API. So yes, an Angular app can of course interact with a backend over XHR via a Restful API. 

 

- Instead of sending viewport size to your api, I'd recommend reading up on css media queries or simply loading a different index.html file based on the device requesting the page.

Perhaps my question was not very well put. I know how to make mobile sites with media queries and breakpoints (and how to make ReSTful web services) but that isn't all I want to do. The issue with only using media queries for mobile sites is that you have to have already downloaded content for all form factors. CSS media queries can only be used to adjust CSS for different breakpoints, they just hide things or resize them.  I specifically want to be able query for different version of *content* if the admin (via a separate admin interface backend) has decided to write smaller versions of pages for smaller form factors or upload smaller images. The point of the architecture I have in mind is to do more than just the standard responsive design "shuffle the bits around and hide" thing, enabling the admin to serve up different menus, focus on different content, etc, without having to maintain a separate mobile site at a separate domain. By having the client side load the page and then fetch content asynchronously I do not have to send desktop content to a phone and the hide whatever isn't relevant, I can have the initial app load with the first request (as an agular app) and then have the actual page content and images fetched via ajax hits.

Has anyone else on here done anything like what I'm describing?

Personally, I do not know of any CMS's using angular.  The server is agnostic, so it does not really matter, but there are some good seeds to start with based on using NodeJs.  

Here's a link I found that list a few:  http://www.jquery4u.com/angular-js/5-angular-js-seeds-bootstrap-apps/

Thanks, I'll check those out!

iain

[umi]

I'm sure you could make this work. You might, for instance, load different partials for your content and you could do the same with your directives by using a function in your templateUrl property. Controllers, and other application logic could remain the same.

[Iain Duncan]

Thanks for the tip!

iain

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/8XmQGDPOEkc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.