Angular
| Angular is a TypeScript-based, free and open-source single-page web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. | |
|---|---|
| wikipedia:: Angular (web framework) |
- Has a template system
- Uses Typescript
Meta Angular
- Angular vs AngularJS
- AngularJS is the old, gradually disappearing framework. Angular is the entirely new one.
- Even the websites are different (angularjs.org vs. angular.io)
- Installation & Setup
- npm install -g @angular/cli
- brew install angular-cli
- Angular CLI
- https://angular.io/cli
- https://angular.io/cli#command-overview
- ng
- new
- n shortcut
- Creates a new Angular project in the current directory.
- generate
- g shortcut
- Creates new files within an existing project.
- Run
ng generate component component-nameto generate a new component. You can also useng generate directive|pipe|service|class|guard|interface|enum|module.
- serve
- s shortcut
- Compiles a project and launches it in a form that can be displayed in a browser.
- Compiles the Typescript and analyzes your Angular files to build HTML and JavaScript files that can be run in a browser. a. This step will throw errors if you try to serve code that contains syntax or other errors.
- Starts a web server on your computer that serves the built version of your Angular project. a. Your Angular project is viewable at the web address http://localhost:4200
- build
- test
- new
- Templates & Variables
{{ someReference }}- alternate syntax
<img [src]="variableName"/><input [name]="otherVariable" [value]="thirdVariable"/>
- File Structure & Important Files
- https://education.launchcode.org/intro-to-professional-web-dev/chapters/angular-lsn1/file-structure.html
- app Folder
- The app folder holds the content for the web page. Although the page is treated as a single entity, it actually consists of multiple pieces. app holds these different parts and establishes links between them.
- app.component.css
- the CSS instructions only affect the HTML files within app. Also, the code in app.component.css overrides any CSS found in the higher level styles.css file. This is the pattern for Angular. CSS instructions further down in the file tree have higher priority. If app contained a subfolder with its own .css file, then those instructions would be applied to the HTML files within that subfolder.
- app.component.html
- serves as the main template for your web page. This file will usually NOT hold a lot of HTML code. Instead, it will contain many placeholders for content defined elsewhere in the project.
- app.component.ts
- import { Component } from ‘@angular/core’; @Component({ selector: ‘app-root’, templateUrl: ‘./app.component.html’, styleUrls: [’./app.component.css’] }) export class AppComponent { title = ‘my-project-name’; }
-
- Line 4 defines the tag
<app-root>{=html}, which we saw in line 12 of index.html. The tag can also be used in any files that import the AppComponent class. 2. Line 5 imports app.component.html, which we examined above. 3. Line 6 imports app.component.css, which applies styling to the HTML file. (If you set a different color for the Welcome to… sentence in the Try It tasks, this is why changing the css file worked). 4. Line 8 makes the AppComponent class available to other files.
- Line 4 defines the tag
- The data that is referenced with {{someReference}} in components are defined here. Line 9 in app.component.ts supplies this data by assigning the string ’my-project-name’ to the title variable. Changing ’my-project-name’ to a different value alters the web page.
- app.module.ts
- import { BrowserModule } from ‘@angular/platform-browser’; import { NgModule } from ‘@angular/core’; import { AppComponent } from ‘./app.component’; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
- app.module.ts does the main work of pulling in the core libraries and local files. As new parts are added to a project, the import statements, imports array, and declarations array update automatically.
-
- Lines 1, 2, and 8 import and assign the core modules that make Angular work. This is part of the automatic process, so do not play with these (yet). 2. Line 4 imports the class AppComponent from the local file app.component.ts. 3. Line 4 also pulls in references to any other files linked to app.component.ts. 4. Line 7 declares the imported local files as necessary for the project. 5. Line 12 exports the AppModule class and makes it available to other files.
- index.html
- the highest level for displaying content. Anything added to this HTML file will appear on every page within a website.
- The
<app-root>tag essentially says "Display all the content from theappfolder here."
- main.ts
- imports the core methods required to make everything work. It also imports the content from the app folder.
- styles.css
- holds the global style settings for the entire website.
- tests.ts
- polyfills.ts
- assets folder
- holds user defined files that support a project. Examples include JavaScript code, images, gifs, or video clips. I think this is like the static folder in other frameworks like Flask? Mainly for images or hardlinking to files/documents e.g.
- Components
- https://education.launchcode.org/intro-to-professional-web-dev/chapters/angular-lsn1/components.html
- Angular allows us to define our own tags, which are used as another type of placeholder in an HTML file.
- Everything in Angular centers on the idea of building a webpage from separate, smaller pieces. (components)
- In Angular a component controls one part of the page, called a view.
<app-root>{=html}</app-root>{=html}- Default one generated
- essentially says, “Display all the content from the app folder here.”
- Components consist of 4 files:
-
- an HTML file (.html) 2. a CSS file (.css) 3. a typescript file (.ts) 4. a test file (.spec.ts)
- Components are stored in a folder named after the component
- Example Component Called task-list
-
- task-list.component.html 2. task-list.component.css 3. task-list.component.ts 4. task-list.component.spec.ts
-
-
- Create new Component
- ng generate component component-name
- When you generate a new component using the Angular CLI, it is automatically added to app.
- places the new component folder within your current directory. Use the terminal to navigate to where you want the component to go BEFORE running the generate command.
- In order to communicate with the new components, app.module.ts needs new import statements. Fortunately, ng generate updates the code automatically. However, if you delete a component, you must MANUALLY remove its import statement and its name in the declarations array.
- Nesting Components
- Components can be put inside of other components. In essence, this is how the app component works. It is the component that holds all other components.
- The nested component is called the child, while the original component is called the parent.
- Any CSS, HTML, or JavaScript we write for the nested component (the child) only affects that component. Changes to the child do NOT affect the parent.
- The parent component DOES influence the nested one. For example, any CSS within task-list.component.css applies to both task-list.component.html AND inside-task-list.component.html.
- If we want inside-task-list to have different styling, we need to add code to inside-task-list.component.css to override the parent.
- Input Binding with @input Decorations
- https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding
- Here, the term “input” refers to data being sent into the component. Angular input properties are NOT related to HTML input elements.
<app-orbit-list [satellites]="sourceList">{=html}</app-orbit-list>{=html}- you need to declare in orbit-list.component.ts that the component has an input property named satellites:
- @Input() satellites: Satellite[];
- The @Input() is special Angular syntax that declares that satellites is a property that will be passed into the component via
<app-orbit-list [satellites]="sourcelist">{=html}</app-orbit-list>{=html}.
- Directives
- 3 Types of Angular Directives
- Components themselves are essentially directives
- Structural Directives
- Angular - Template syntax
- These change the layout of the DOM by adding or removing elements (div, ul, a, li, etc.).
- ngFor
- https://education.launchcode.org/intro-to-professional-web-dev/chapters/angular-lsn2/ngFor.html
- Angular NgFor: Everything you need to know | malcoded
<li *ngfor="let movie of movies">{=html} ¶ {{movie}} ¶</li>{=html}- *ngFor only operates over the contents of an array. If we want to iterate over the characters in a string, we must first convert it into an array. There is a technique for iterating over the key/value pairs of an object, but that is a more advanced topic.
- ngIf
- https://education.launchcode.org/intro-to-professional-web-dev/chapters/angular-lsn2/ngIf.html
- https://angular.io/guide/template-syntax#ngif
- https://malcoded.com/posts/angular-ngif-else/
- The *ngIf structural directive evaluates a boolean expression and then adds or removes elements from the DOM based on the result. If condition evaluates to true, then the HTML tag is added to the web page, and the content gets displayed. If condition returns false, then the HTML tag is NOT generated, and the content stays off the web page.
- *ngIf determines if content is added or removed from a page. This is different from determining if content should be displayed or hidden. Hidden content still occupies space on a page and requires some amount of memory. Removed content is absent from the page—requiring neither space on the page nor memory. This is an important consideration when adding items like images or videos to your website.
- Only one structural directive can be assigned to an element. Since the li tag in the example above already contains *ngFor, we cannot add an *ngIf statement.
- *ngIf = “condition”
- Can use normal logical operators
- Some text
- &&, |, !
- If Else
<sometag *ngif="condition; else variableName">{=html}<!-- HTML tags and content --->{=html}</sometag>{=html}<ng-template #variablename>{=html}<!-- Alternate HTML tags and content --->{=html}</ng-template>{=html}- the # is required inside the ng-template tag.
- If false, Angular searches for alternate code labeled with the name needMoreMovies. In this case, Lines 9 - 14 hold the alternate HTML tags.
<ng-template>{=html}</ng-template>{=html} is a special Angular element. It contains content that might be required for a web page. When the else statement in line 1 executes, Angular searches for an ng-template block labeled with the matching variable name. Angular then ignores the original div tags and anything they contain, and it replaces that content with lines 9 - 14.
- Attribute Directives
- change the appearance of a specific element within the DOM
- Styling
- Examples
<ol [style.color]="alternateColor" [type]="bulletType">
- The
styleattribute has different properties that can be assigned using dot notation. Examples includestyle.colorandstyle.background. For properties with two-word labels, liketext-align, the data-binding syntax accepts either hyphens or camel case (style.text-alignorstyle.textAlign).
- Examples
- Events
- https://education.launchcode.org/intro-to-professional-web-dev/chapters/angular-lsn2/events.html
- The event name is placed in parentheses () and added inside an HTML tag. This binds the event to that element.
- (click): Waits for the user to click on the element.
- (keyup): Waits for the user to release a key.
- https://alligator.io/angular/binding-keyup-keydown-events/
- keyup.key, and key refers to any character on the keyboard—including shift, enter, and space.
- keyup.enter
- (keydown): Waits for the user to press a key.
- (mouseover): Waits for the user to move the cursor over the element.
<tag (event)="statement">{=html}</tag>{=html}- The statement is the action we want to take when the event occurs. This could be a function call, a variable assignment, or just a value.
<button (click)="addData(arguments)">{=html} ¶ Submit ¶</button>{=html}- {{option}}
- This code waits for the user to move the mouse over the element and then sets the choice variable equal to the value of option
- Press Any Key
- This code just waits for any key to be pressed
- LaunchCode Example of capturing input via either enter key or click
<input #newmovie (keyup.enter)="true" type="text" placeholder="Enter Movie Title Here">{=html}</input>{=html} ¶<button (click)="true">{=html} ¶ Add ¶</button>{=html} ¶ {{newMovie.value}}- Angular extends the input element by declaring a reference variable and also an event that triggers data collection. Modify the input element in line 7 by adding #newMovie inside the tag
- There is some automatic magic here in how the value from the input element is stored in the newMovie variable. It also gets stored in response to the button click, even though that variable is not in that element. I think Angular figures out that that button goes with that input since it is next to it? Not sure. Maybe it’s basically global to that component? Since components should be small and isolated, it is reasonable that any event on a button that is true would go and cause the #var on any input to update its value?
Inbox
- It is a common practice to put constructor and functions like ngOnInit AFTER the variable declarations but BEFORE any custom functions.
Sources
Angular
Interactive graph
On this page
Angular
Meta Angular
Inbox
Sources