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.]