This page is for attendees of the OR2017 workshop "Getting Started with Angular UI Development for DSpace". It provides links to resources, workshop preparation, etc.
A later version of this workshop/tutorial was recorded at the DSpace North American User Group meeting on Aug 23, 2017 at Georgetown University. This recording includes the beginning of the Workshop, but does not include the hands-on development section. Slides from this updated video tutorial are available at: https://goo.gl/pWFacH
The workshop slides are available at: https://goo.gl/o2mgGo
Additionally, there was a separate OR2017 talk which gave higher level updates on DSpace 7 efforts. Those DSpace 7 overview slides are also available at: https://goo.gl/Hrt4Ct
Preparing for "Hands-on" portion of workshop
For the hands-on portion of the workshop, we will be working directly with the dspace-angular project (this is the in-development Angular UI for DSpace 7). However, don't worry. It's rather easy to install, and you do not need to install DSpace itself (as we have a public REST API we'll be using).
If you wish to take part in the "hands-on" portion of our workshop, we recommend pre-installing the following on your laptop. (If you forget, or run into issues, don't worry. Each of these should be rather quick to install at the workshop, internet connection permitting.)
- Git :You'll want to have Git to simply clone and install our dspace-angular project (this is the in-development Angular UI for DSpace 7). If you don't have Git, you can choose to install either GitHub Desktop (which includes a GUI) or just plain Git. Any version of Git is fine.
- Node.js (version 6.x recommended) : Required to build/run the Angular UI.
- Note: Node.js will also automatically install npm (Node Package Manager). You shouldn't need to install that separately
- Do not use node 8. If you want to install node 6 on a Mac with homebrew, use brew install node@6. If you already installed node8, and yarn, you have to uninstall yarn and node, and than try again with the node6 install. You may also need to do brew unlink and brew link to re-associate the node command with node 6. More details on this.
- Yarn (version 0.20.x or above) : This is an easier to use, speedier package manager that works similar to npm (Node's package manager). It's currently required to build Angular UI.
- dspace-angular: If you get excited, you can now install dspace-angular itself using the command line. However, if you don't get to this, we can walk you through it at the workshop.
git clone https://github.com/DSpace/dspace-angular.git(Pulls down the code into a dspace-angular folder on your local computer)
cd dspace-angular(Move into the newly created dspace-angular folder)
yarn run global(Install all global dependencies via yarn)
yarn install(Install all local dependencies via yarn)
yarn run watch:dev(Build and startup the DSpace Angular UI)
- Assuming all went well, you should be able to go to http://localhost:3000 in your web browser and see the Angular UI homepage. If something doesn't work, we can help you fix it at the workshop.
That's it! Again, there is no need to have DSpace running or install a database, Java, Tomcat or any of the other usual DSpace prerequisites. During the workshop, we will point our Angular UIs at the same REST API and simply use that as our DSpace backend.
While not required, the following tools may make it easier to do basic development with the Angular UI.
- Chrome web browser : When developing an Angular application, all web browsers are not created equal. While you obviously should use other browsers to help test your application, Chrome has built in debugging/visualization tools that come in handy when doing Angular development. Make sure you disable cache in your network tab and keep the inspect element open.
- An IDE : If you wish to do much Angular development, you'll likely want an IDE (Integrated Development Environment) or an editor that understands the TypeScript language. Here's a few we prefer. Just choose ONE.If you have no strong preference, you may want to start with Visual Studio Code.
- Visual Studio Code (Free) : This is a TypeScript IDE from Microsoft (the makers of TypeScript). It's frequently used for Angular development, even by some of the main Angular developers, and provides an excellent debugger for Chrome (which you may also wish to install for easier debugging)
- Atom.io (Free) : This is an advanced text editor from the makers of GitHub. If you install the Typescript language plugin, it acts a little more like a basic IDE for TypeScript / Angular (providing autocomplete and highlighting). However, be forewarned that it doesn't have the debugging capabilities of Visual Studio Code or IntelliJ.
- Any other editor or IDE that provides either TypeScript or Angular 2 support.
Creating a branch for the exercises
To follow along with the exercises run the following git commands in the project directory to get the correct starting point
git remote add workshop https://github.com/DSpace-Labs/dspace-angular-workshops.git
git fetch workshop
git checkout or2017-start
git checkout -b or2017-hands-on
At certain points during the hands-on part we'll show a git tag that corresponds to the solution so far. If you'd like to sync up to that point, run the following:
Revert all existing files to their state at the start:
git reset or2017-start --hard
Remove any newly created files
git clean -f -d
Sync with the solution
git merge $TAG_NAME
- DSpace 7 UI Technology Stack : Technology overview with link to tutorials on Angular, etc
- DSpace 7 - Angular UI Development : How to contribute to Angular UI