Developing with angular

[bps-github7]

@mosesmosima
Some notes I think would have been useful when I was first starting out developing in Angular:

Top level of the project tree:

• In classic html, this (the root) is index.html. In Angular, we don't use this. You can safely ignore that file at all times.

app.component.html is the Angular equivalent of index.html

• If you look inside, you'l see only one element <router-outlet></router-outet>
• Routing is enabled by that element (and thus, is the only element needed in our app.component.html).
• If you were making a site without routing, your homepage markup would go in here instead.

src/app directory contains important project files and component folders

• Components we've generated so far have a sub directory (named after the component) with 4 files in them (.html, .css, .ts, spec.ts), in src/app:

1. html file is the template for this component (what to build when angular sees an element with this components selector)
2. css file styles the component (meaning we can apply styles on a per component basis, as well as globally in styles.css)
3. spec.ts is a unit testing file.
4. ts file contains all the logic/ class attributes and methods for the component

NOTE: That I have been renaming selectors of components in our project. The default selector which angular generates when you use the command $ ng g c <component-name> is 'app-component'. This is done to avoid name-clashing with other developers components and html elements, but since we are working on a small, 2 person project, its unnessecary. The fix is simple-

1. visit the .ts file in your component directory
2. look at the component decorator above the class declaration
3. modify the 'selector' argument to remove 'app-' from the selector name.

example:

@Component({
  selector: 'app-comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})

//after edit

@Component({
  selector: 'comment',
  templateUrl: './comment.component.html',
  styleUrls: ['./comment.component.css']
})

Aside from the component directories, there is another directory called 'common':

• Contains other angular templates aside from components (pipes, validators, errors, services, etc)
• Path to reach here from a component is "../common/<pipes|validators|errors|services>/.ts"

Remaining material in src is very important:

-global files for app.component - (app.component.html, app.component.css, spec.ts and .ts)

• I rarely use these. If I want to apply a global style, I'd do it in styles.css (a directory above the current folder). Although I suppose its a matter of preference. The ts file is where you'd want to apply any logic that is pertinent to the whole application, and use cases for that are few and far between (mostly dealing with observables and promises).

-app.module.ts (very important) is where you register anything the project uses.
Including but not limited to:

1. Imports: (for example 'RouterModule', 'HttpClientModule', or 'ReactiveFormsModule')
   These are angular library tools. (You can think of them like importing a module in python or JS)
2. Declarations: When you make a new component, it needs to be registered here. Otherwise, Angular wont recognize it and
   there will be an error.
3. Providers: When you make a service, you put it in providers array, similar to how you put components in the declarations array

**Note the specific syntax this file uses: **. Apparently this is a NodeJS syntax and all the JS frameworks have an import scheme like this:

1. Import your thing on the top, in this syntax:
   import { <Module name> } from '@/angular/core'; //exact path to where to find the thing on your sys/in the project
2. Add what you imported to the correct array- Make sure to separate multiple array elements with comma, except for last element, just like you would in any old array.
3. Save the file. This bares repeating: with so many files you're having to deal with, you're bound to forget to save a file somewhere. Therefore, it makes sense to save whenever you finish making an edit to a file. Because the live server re-compiles whenever files were changed and saved, failing to save a file you edited moments ago may cause errors (so do a 'save-all' if you aren't sure whats causing errors in your project).

ps. I find it faster to develop using angular in conjunction with the terminal/command line.
Reduces headache - As you can see, theres a bit of nuance to navigating the project file structure.
And its easy to put things in the wrong place by accident. Having to navigate to a destination by hand with the cmd-line helps prevent such mistakes.

If you wanted to, for example, create a new service (and put it in the correct location)
you would do the following...

//assuming you are starting from the src/app directory in the project...
$ cd common/services
$ ng g s <service_name>