Differences

This shows you the differences between two versions of the page.

--- newdevs:angularclient [2023/01/19 13:31] – tmccanna
+++ newdevs:angularclient [2025/03/28 12:15] (current) – sleary
@@ Line 1: / Line 1: @@
-**New Developers Working Group**
+**New Developers Working Group**https://wiki.evergreen-ils.org/doku.php?id=newdevs:angularclient&do=
 ====== Angular Staff Client ======
-This is an Angular 12 application found under Open-ILS/src/eg2 and installed to /openils/var/web/eg2/. Note that the language used is TypeScript.
+This is an Angular 15 application found under Open-ILS/src/eg2 and installed to /openils/var/web/eg2/. Note that the language used is TypeScript.
-===== Building Angular Pages =====
+Many of the current Angular interfaces were built using Angular 12 or earlier conventions. We only use [[https://angular.io/guide/standalone-components|standalone components]] in some of the newer Angular code.
-After installation or making changes, typical build tasks are:
+===== Debugging =====
-  * ng build --test  # compile in dev mode
+You can use the [[https://angular.io/guide/devtools|Angular DevTools extension]] in Chrome or Firefox to inspect and debug objects in the browser.
-  * ng build --prod # compile in production mode
-  * ng lint # check for lint
-  * npm run test # run test cases
-A common practice is to have a symbolic link from the source path to the installation path and run "ng build --watch"  in the background. That way, changes you save get immediately compiled and can be seen with a browser refresh.
+===== Angular Bootstrap =====
+  * [[https://ng-bootstrap.github.io/#/home|Bootstrap Widgets: The Angular Way]]
+  * [[https://docs.google.com/presentation/d/1Ck2pQe9Wn8hk4Rqq5dn_ERb6UkXjdxEDVbWHlxwEdeM/edit?usp=sharing|Finding HTML and CSS Files in Evergreen]] -- [[community:ui_ig|UI Interest Group]] presentation, August 2023 -- includes a brief discussion of Webpack and view encapsulation in Angular interfaces
+  * [[accessibility:stack|Accessibility and Bootstrap]]
+===== Angular Routing =====
-===== Angular Sandbox - Components =====
+  * [[https://www.youtube.com/watch?v=kbhjq88LQWc|Presentation about Angular Routing in Evergreen by Galen Charlton for New Developers' Group, November 2022]]
-  * File location: Open-ILS/src/eg2/src/app/staff/sandbox/sandbox.component.*
+**Command to get all routes from Angular Project:**
-  * In browser: /eg2/en-US/staff/sandbox
-===== Angular Bootstrap =====
+''for r in $(find src -name "routing.module.ts"); do echo $r; grep "path:\|component:\|loadChildren:" $r; done > allroutes.txt''
-  * [[https://ng-bootstrap.github.io/#/home|Bootstrap Widgets: The Angular Way]]
+===== Evergreen Conference Sessions =====
+  * [[https://www.youtube.com/watch?v=I_XZj-_JiRQ&ab_channel=EvergreenLibrarySystem|Angular Client Ingredients by Bill Erickson (2021)]]
+  * [[https://git.evergreen-ils.org/?p=working/random.git;a=blob_plain;f=ang2-preso.html;hb=collab/berick/eg2018#(1)|March of the Frameworks: How Angular Lost Its JS by Bill Erickson]]
 ===== Things to add to this page: =====
-  * Links to Evergreen Conference session recordings
   * Links to documentation that is elsewhere in the wiki
+  * [[newdevs:angularclient:basicadmin|BasicAdminPage tutorial]]