Getting started with Angular UI development for Dspace #OR2017

by Tim Donohue and Art Lowel; session overview; Wiki with instructions for setup; demo site

[So my experience started off inauspiciously because I have an ancient version of MacOS so installing Node.js and yarn ran into issues with Homebrew and Xcode developer tools and I don’t know what else, but after five and a half hours I got it working. I then left all my browser and Terminal windows open for the next several days on the “if it ain’t broke” principle….]

Angular in DSpace

Angular 4.0 came out March 2017 – straight after conference there’ll be a sprint to get that into DSpace. (Angular tutorial) How Angular works with DSpace:

  • user goes to website
  • server returns first page in pre-compiled html, and javascript
  • user requests data via REST
  • API (could be hosted on different server than Angular) returns JSON data

With Angular Universal (available in Angular 2, packaged in Angular 4), it can still work with a browser that doesn’t have javascript (search engine browser, screen-reader, etc). Essentially if Angular app doesn’t load, your browser requests the page instead of the json, so the server will return the pre-compiled html again.

Caches (API replies and objects) on client-side in your browser so very quick to return to previously seen pages.

Building/running Angular apps

  • node.js – server-side JS platform (can provide pre-compiled html)
  • npm – Node’s package manager (pulls in dependencies from registry)
  • yarn – third-party Node package manager (same config, faster)
  • TypeScript language – extension of ES6 (latest javascript – adds types instead of generic ‘var’) – gets compiled down by Angular to ES5 javascript before it gets sent to the browser

You write angular applications by

  • composing html templates with angularized markup – almost all html is valid; can load other components via their selector; components have their own templates
  • writing component classes to manage those templates – lets you create new html tags that come with their own code and styling; consist of view (template) and controller. Implements interfaces eg onInit; extends another component; has a <selector>; has a constructor defining inputs; has a template. Essentially a component has a class and a template.
  • adding app logic in services – retrieve data for components, or operations to add or modify data – created once, used globally by injecting into component
  • boxing component(s) and optionally service(s) in modules – useful for organising app into blocks of functionality – would use this for supporting 3rd-party DSpace extensions (however business logic would be dealt with in REST API not in the Angular UI)

DSpace-angular folder structure

  • config/
  • resources/ – static files eg i18n, images
  • src/app/ – each feature in its own subfolder
    • .ts – component class
    • .html – template
    • .scss – component style
    • .spec.ts – component specs/test
    • .module.ts – module definition
    • .service.ts – service
  • src/backend/ – mock REST data
  • src/platform/ – root modules for client/server
  • src/styles/ – global stylesheet
  • dist/ – compiled code

Hands-on

[Here we got into the first couple of steps from the Wiki/gitHub project linked from there.]

Leave a Reply

Your email address will not be published. Required fields are marked *