DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. Angular for Designers

Angular for Designers

Paul Hammant user avatar by
Paul Hammant
·
Nov. 04, 12 · Interview
Like (0)
Save
Tweet
Share
4.57K Views

Join the DZone community and get the full member experience.

Join For Free

i'm going to have another go at explaining one 'best practice' for angularjs. i previously blogged about it here and here .

a colleague asked me "is it about graceful degradation ?", and the answer is no it's not. it is about the ability of a designer or a ux specialist to lead the behavior as well as the aesthetics of a web-application, during development.

a minimal angular app, with an overlay

take a look at this small app, with a button that triggers an overlay . it is best on a desktop, as the sizes are wrong for a hand-held device. make sure to look at the source , and note that there's just five lines of javascript. granted, there are two ng-click expressions that are also js.

incidentally, i forked that from this article which claims to be without javascript, but that's not true as there is javascript inlined in an on-click.

note too that all the content for this app is static html. normally you'd use angular to bind in data from json. the two "previous blogged about" articles do just that. for this blog entry, i'm only trying to sell the view-all-panels-together aspect of the proposition.

commenting out the angular import

kittens page, with angular turned off

this is the big benefit for me. designers, or indeed newbies to a project, will load up an angular page in a running app with angular turned off. they will then be able to see all the panels/divs/overlays concurrently visible within the page, whether or not the application would function like that. all will be very-nearly styled appropriately, as css will still work as it would in the final app.

here is the same one-page demo as before, with angular 'turned off'. note the 'kittens' button does not function.

here is the source for it . i swear the only difference is the 'script' tag that would have dragged in angular - i've commented it out.

hacks i've had to do to make this work

'overlayclass' is one scoped variable that is only used once. it's definition:

$scope.overlayclass = "white_content";

the place where it is used is the overlay div itself:

<div ... ng-class="overlayclass">

this is a hack that is needed. here is what happens without it . note that the second div is not visible (the button is still non functioning)

here is the source for it . the only difference versus the previous one is the ng-class usage has been swapped 'back' to a hardcoded class="white_content", as per ordinary html usage.

this kludge is needed to support the design-mode i'm advocating for. at least, unless the angular team make class vs style co-existence a little smoother :)

other 'new' tools a designer would use

tin.cr - edit your css while playing with a functional angularjs app, and save directly back to the file-system (before doing a commit).

angular batarang - fiddle or inspect your angular model in your running angular app. here's that running:

kittens page, with batarang showing the model

a github thought

obviously i'm misusing github here. i could have had three repos or three branches, and used github's own diff mechanism to show that the differences i claim, are the only differences. but for a few stymying factors - 1) you can fork your own repo, and 2) you can only have one branch that publishes to github-pages. i hope that one of the things those guys do with their $100m is enhance the capabilities of github-pages :)




AngularJS

Published at DZone with permission of Paul Hammant, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Agile Transformation With ChatGPT or McBoston?
  • What Was the Question Again, ChatGPT?
  • Continuous Development: Building the Thing Right, to Build the Right Thing
  • The Role of Data Governance in Data Strategy: Part II

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: