Angular Notes

angular is a JavaScript Framework which allows you to create reactive Single-Page-Applications(SPAs).

Angular Fundamentals

1. Component & Templates
2. Forms
3. Observables & RxJS
4. NgModules
5. Service & Dependency Injection
6. HttpClient
7. Routing & Navigation

 

Plan the App

Angular CLI

npm install -g @angular/cli
// then go to the folder we want to create the project
ng new my-dream-app
cd my-dream-app
ng serve

Use Bootstrap

// use bootstrap 2
npm install --save bootstrap@3

// in angular.json, styles
// add at front
"node_modules/bootstrap/dist/css/bootstrap.min.css",

Use Angular material

ng add @angular/material

How an angular app gets loaded and started

index.html file is served by server

replace with the template of the component. the template of this component is app.component.html

cli created the root component of the application under "app folder"

in app.component.ts

selector: 'app-root'

in main.ts, bootstrap start the application with AppModule

in app.module

app.module.ts: declaration: register the app component with angular

bootstrap: [AppComponent]

list all the components should be known to angular at the point of time it analyse index.html file.

 

Components

angular thinks in "Components"

component is a typescript class.

Ideally, a component's job is to enable the user experience and nothing more. A component should present properties and methods for data binding, in order to mediate between the view (rendered by the template) and the application logic (which often includes some notion of a model).

other components, their selectors will be added to the app component from component decorator.

the other component stored in another folder.  component declarations in app.module

creating components with the CLI

ng generate component name
// or
ng g c name
// inside a component folder
ng g c folder/name

nesting components: inside one component call another component using their selectors multiple times

component selector is like CSS selector

select by elements

by attributes

by class

 

Data Binding

Simply put, data binding is a fundamental concept in Angular that allows developers to make communication between a component and its view or more precisly the DOM. This way you don't need to manually push data from your component to the DOM and back.

Angular provides four types of data binding and they are essentically different in the way data flows i.e from the component to the DOM, from the DOM to the component or both ways:

• String Interpolation: Data flows from the component to the DOM - It's used to display the value of a component member variable in the associated template, e.g. ``. We use curly braces for interpolation {{ }}.
• Property binding: Data flows from the component to a property of an element in the DOM. It's used to bind a component member variable to an attribute of a DOM such as the value attribue of an tag (For example: ). We use brackets for property binding.
• Event binding: Data flows from the DOM to the component. When a DOM event, such as a click, is triggered, the bound method from the component is called. For example: Hi - The sayHi() method will be called so it needs to be defined in the component class. We use parentheses for event binding. passing data, $event is the reserved name, access to event emitted data. when using data, event is in type Event
• Two-way data binding: Data flows both ways. For example: (The foobar variable needs to be defined in the component). The input element and foobar will have the same value and when one changes, the other one changes to the same value accordingly. We use the banana in the box syntax which combines brackets and parentheses for two-way data binding. ngModel is a special directive that binds to the value attribute of the and </code> elements but you can constrcut two-way data binding for any property in the DOM or component. Two-way data binding = property binding + event binding. Note need to import FormsModule in app.module.ts.</li> </ul> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/2826db8c9081419ba59806a4a4ae37fd.jpg" target="_blank"><img alt="Angular Notes_第5张图片" class="has" height="294" src="http://img.e-com-net.com/image/info8/2826db8c9081419ba59806a4a4ae37fd.jpg" width="650" style="border:1px solid black;"></a></p> <h2 id="Component%20communication%C2%A0%20(with%20%E4%B8%8A%E4%B8%8B%E7%BA%A7%E5%85%B3%E7%B3%BB%EF%BC%89">Component communication  (with 上下级关系）</h2> <h3 id="binding%20to%20custom%20property">binding to custom property</h3> <p>use decorator</p> <pre class="has"><code class="language-javascript">// expose this property to the component // bind the property from outside @Input() element // then the host component (through the selector) is able to bind the element // in app.component.html [element] = "serverElement" // assigning alias to custom properties @Input('srvElement) element [srvElement] = "serverElement" </code></pre> <h3 id="binding%20to%20custom%20events">binding to custom events</h3> <pre class="has"><code class="language-javascript">// define the type the eventemitter is going to emit @Output() serverCreated = new EventEmitter<{serverName: string, serverContent: string}>(); // emit the new event of this type this.serverCreated.emit({serverName: val, serverContent: val}) // can subscribe to the event // Registers handlers for events emitted by this instance. .subscribe(()=>{ }) // in app.component.html // onServerAdded is in app.component.ts // serverCreated is from cockpit.component.ts <app-cockpit (serverCreated) = "onServerAdded($event)"></app-cockpit> // assign alias similar to property binding</code></pre> <p> </p> <h3 id="View%20encapsulation%20(angular%20feature)">View encapsulation (angular feature)</h3> <p>View encapsulation defines whether the template and styles defined within the component can affect the whole application or vice versa. Angular provides three encapsulation strategies:</p> <ul> <li> <p><code>Emulated</code> (default) - styles from main HTML propagate to the component. Styles defined in this component's <code>@Component</code> decorator are scoped to this component only.</p> </li> </ul> <pre class="has"><code class="language-javascript">@Component({ // ... encapsulation: ViewEncapsulation.None, styles: [ // ... ] }) export class HelloComponent { // ... }</code></pre> <h2 id="local%20references">local references</h2> <p>Instead of two-way binding, we can easily fetch a value of any input through<strong> local references in Angular</strong>.</p> <p>can apply to any html element</p> <pre class="has"><code class="language-html">// will hold the reference to the element (all the properties of the element) <input type = "text" class="form-control" #name> // can use anywhere in the template (in html file, not in ts) <button class="btn btn-primary" (click) = "onAddServer(name)">Add Server </button></code></pre> <h3 id="Access%20to%20template%20and%20DOM%20with%20local%20reference%20pass%20through%20%40viewchild">Access to template and DOM with local reference pass through @viewchild</h3> <pre class="has"><code>// in component.ts, serverContentInput is of type ElementRef @ViewChild('name',{static: true}) serverContentInput: ElementRef; // in component.html, local references <input type = "text" class="form-control" #name> // to get access to the element through nativeElement this.serverContentInput.nativeElement.value;</code></pre> <h3 id="Project%20content%20into%20components%20with%20ng-content">Project content into components with ng-content</h3> <p>html pass into the component from outside</p> <pre class="has"><code>// anything between the opening and closing tag of the own component is lost <app-server-element> </app-server-element> // use ng-content // in server-element.component.html // as a hook to mark the place for the content inbetween the tags <ng-content> </ng-content></code></pre> <h3 id="get%20access%20to%20ng-content%20with%20%40ContentChild">get access to ng-content with @ContentChild</h3> <pre class="has"><code>// in server-element.component.ts // we want to access to the local reference defined in app.component.html through ng-content @ContentChild('name' {static:true}) varname; // in server-element.component.html <ng-content> </ng-content> // in app.component.html, local references <app-server-element> <input type = "text" class="form-control" #name> </app-server-element></code></pre> <p> </p> <h2 id="Component%20lifecycle">Component lifecycle</h2> <p>Every Angular component and Angular directive have a lifecycle</p> <blockquote> <p>Angular creates it, renders it, creates and renders it’s children, checks it when it’s data-bound properties change, and destroys it before removing it from the DOM.</p> </blockquote> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/b72ee8acd87e46138d1e94151a776aa0.jpg" target="_blank"><img alt="Angular Notes_第6张图片" class="has" height="365" src="http://img.e-com-net.com/image/info8/b72ee8acd87e46138d1e94151a776aa0.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p> </p> <h1 id="Directives">Directives</h1> <ul> <li>directives are instructions in the DOM</li> </ul> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/89c7d90c17c94ebc823836777b8c0c33.jpg" target="_blank"><img alt="Angular Notes_第7张图片" class="has" height="388" src="http://img.e-com-net.com/image/info8/89c7d90c17c94ebc823836777b8c0c33.jpg" width="650" style="border:1px solid black;"></a></p> <h2 id="structural%20directives">structural directives</h2> <p>*ngIf="posts.length > 0"</p> <p>enchance ngif with else condition</p> <p>local reference:</p> <pre class="has"><code class="language-html"><p *ngIf="serverCreated; else noServer"> Server was created, server name is {{serverName}} </p> <ng-template #noServer> <p>No server was created!</p> </ng-template></code></pre> <p>*ngFor="let post of posts"</p> <pre class="has"><code class="language-html"><app-server *ngFor="let server of servers"></app-server></code></pre> <p>get the index from ngFor</p> <pre class="has"><code class="language-html"><app-server *ngFor="let server of servers; let i = index"></app-server></code></pre> <p>ngSwitch</p> <pre class="has"><code class="language-javascript"><div [ngSwitch]="value"> <p *ngSwitchCase="5"> Value is 5 </p> <p *ngSwitchDefault="0"> Value is 0 </p> </div></code></pre> <h3 id="building%20a%20structrual%20directive">building a structrual directive</h3> <pre class="has"><code>@Directive({ selector: "[appUnless]" }) export class UnlessDirecrive implement OnInit{ @Input() set appUnless(condition: boolean){ if(!condition){ this.vcRef.createEmbeddedView(this.remplateRef); }else{ this.vcRef.clear(); } } constructor(private templateRef: TemplateRef<any>, private vcRef: ViewContainerRef) {} } use *appUnless as directive </code></pre> <h2 id="attribute%20directives">attribute directives</h2> <p>don't add or remove elements. they only change the element they were placed on.</p> <p>use property binding with this directive.</p> <p>ngStyle dynamically assign a CSS style.</p> <pre class="has"><code class="language-html"><p [ngStyle] = "{backgroundColor: getColor()}"> </p></code></pre> <p>ngClass allows dynamically remove CSS classes</p> <pre class="has"><code class="language-html"><!-- attach class to CSS if the condition is true --> <p [ngClass] ="{classname: serverStatus === 'online'}"> </p></code></pre> <h2 id="custom%20attribute%20directives">custom attribute directives</h2> <pre class="has"><code>@Directive({ selector:'[appBasic]' }) export class BasicDirective{ } //in app.module.ts add in declarations: // in app.component.html <p appBasic> <p></code></pre> <p>create directive</p> <pre class="has"><code>ng g d directivename</code></pre> <h3 id="1.%20Use%20renderer%20(not%20directly%20change%20the%20dom%20element)">1. Use renderer (not directly change the dom element)</h3> <pre class="has"><code>import{ Directive, OnInit, Renderer2 } from @Directive({ selector: "[]" }) export class DirecriveName implement OnInit{ constructor(private elRef: ElementRef, private renderer: Renderer2) {} ngOnInit(){ this.renderer.setStyle(this.elRef.nativeElement, 'background-color','blue'); } }</code></pre> <h3 id="2.%20use%20hostbinding%20to%20bind%20to%20host%20properties">2. use hostbinding to bind to host properties</h3> <p>another method instead of renderer</p> <pre class="has"><code>@HostBinding('property of hosting element we want to bind') property:type</code></pre> <h3 id="hostlistener%20to%20listen%20to%20host%20events">hostlistener to listen to host events</h3> <pre class="has"><code>@HostListener('eventname') method(eventData: Event){ }</code></pre> <p> </p> <h3 id="binding%20to%20directive%20properties">binding to directive properties</h3> <p>use custom property binding</p> <p> </p> <h1 id="Forms">Forms</h1> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/4601a7d2f39f40558bd6d0902b762aa6.jpg" target="_blank"><img alt="Angular Notes_第8张图片" class="has" height="338" src="http://img.e-com-net.com/image/info8/4601a7d2f39f40558bd6d0902b762aa6.jpg" width="650" style="border:1px solid black;"></a></p> <p>Both reactive and template-driven forms share underlying building blocks.</p> <ul> <li><code>FormControl</code> tracks the value and validation status of an individual form control.</li> <li><code>FormGroup</code> tracks the same values and status for a collection of form controls.</li> <li><code>FormArray</code> tracks the same values and status for an array of form controls.</li> <li><code>ControlValueAccessor</code> creates a bridge between Angular <code>FormControl</code> instances and native DOM elements.</li> </ul> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/932da1ccdcc047abaefb316cc7ccc0fa.jpg" target="_blank"><img alt="Angular Notes_第9张图片" height="335" src="http://img.e-com-net.com/image/info8/932da1ccdcc047abaefb316cc7ccc0fa.jpg" width="635" style="border:1px solid black;"></a></p> <p> The source of truth provides the value and status of the form element at a given point in time. In reactive forms, the form model is the source of truth. In the example above, the form model is the <code>FormControl</code> instance. With reactive forms, the form model is explicitly defined in the component class. The reactive form directive (in this case, <code>FormControlDirective</code>) then links the existing <code>FormControl</code> instance to a specific form element in the view using a value accessor (<code>ControlValueAccessor</code> instance).</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/6e82c46ccd1541038b3ed8dac78d66c5.jpg" target="_blank"><img alt="Angular Notes_第10张图片" height="387" src="http://img.e-com-net.com/image/info8/6e82c46ccd1541038b3ed8dac78d66c5.jpg" width="607" style="border:1px solid black;"></a></p> <p>In template-driven forms, the source of truth is the template. The abstraction of the form model promotes simplicity over structure. The template-driven form directive <code>NgModel</code> is responsible for creating and managing the <code>FormControl</code> instance for a given form element. It's less explicit, but you no longer have direct control over the form model. </p> <ul> <li>template-driven: <ul> <li>模板驱动的表单是我们实例化好一个类的数据之后，在html中使用 NgForm 指令后将数据和表单进行绑定,使用[(ngModel)]来将表单的数据和和视图进行双向绑定，NgForm 指令为 form 增补了一些额外特性。 它会控制那些带有 ngModel 指令和 name 属性的元素，监听他们的属性。</li> </ul></li> <li>reactive: <ul> <li>are more robust: they're more scalable, reusable, and testable.</li> <li>我们会在数据源里面进行各种操作，像添加校验等，在html文件中使用 formGroup,formGroupName,formControlName等将数据和视图进行绑定(需要引入ReactiveFormsModule)。</li> </ul></li> </ul> <h3 id="data-flow-in-forms">Data flow in forms</h3> <p>Updates from the view to the model and from the model to the view are synchronous and aren't dependent on the UI rendered.</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/e0990a8bbaff4f34a7131f98cc99260d.jpg" target="_blank"><img alt="Angular Notes_第11张图片" height="587" src="http://img.e-com-net.com/image/info8/e0990a8bbaff4f34a7131f98cc99260d.jpg" width="594" style="border:1px solid black;"></a></p> <p> </p> <p>The steps below outline the data flow from view to model.</p> <ol> <li>The user types a value into the input element, in this case the favorite color <em>Blue</em>.</li> <li>The form input element emits an "input" event with the latest value.</li> <li>The control value accessor listening for events on the form input element immediately relays the new value to the <code>FormControl</code> instance.</li> <li>The <code>FormControl</code> instance emits the new value through the <code>valueChanges</code> observable.</li> <li>Any subscribers to the <code>valueChanges</code> observable receive the new value.</li> </ol> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/59af03b411304c4fae20d3e5ba720456.jpg" target="_blank"><img alt="Angular Notes_第12张图片" height="609" src="http://img.e-com-net.com/image/info8/59af03b411304c4fae20d3e5ba720456.jpg" width="598" style="border:1px solid black;"></a></p> <p>The steps below outline the data flow from model to view.</p> <ol> <li>The user calls the <code>favoriteColorControl.setValue()</code> method, which updates the <code>FormControl</code> value.</li> <li>The <code>FormControl</code> instance emits the new value through the <code>valueChanges</code> observable.</li> <li>Any subscribers to the <code>valueChanges</code> observable receive the new value.</li> <li>The control value accessor on the form input element updates the element with the new value.</li> </ol> <h3><a href="http://img.e-com-net.com/image/info8/deebc9d9086c40faa1f5824ac6b4ea2b.jpg" target="_blank"><img alt="Angular Notes_第13张图片" height="376" src="http://img.e-com-net.com/image/info8/deebc9d9086c40faa1f5824ac6b4ea2b.jpg" width="650" style="border:1px solid black;"></a></h3> <ol> <li>The user types <em>Blue</em> into the input element.</li> <li>The input element emits an "input" event with the value <em>Blue</em>.</li> <li>The control value accessor attached to the input triggers the <code>setValue()</code> method on the <code>FormControl</code> instance.</li> <li>The <code>FormControl</code> instance emits the new value through the <code>valueChanges</code> observable.</li> <li>Any subscribers to the <code>valueChanges</code> observable receive the new value.</li> <li>The control value accessor also calls the <code>NgModel.viewToModelUpdate()</code> method which emits an <code>ngModelChange</code> event.</li> <li>Because the component template uses two-way data binding for the <code>favoriteColor</code> property, the <code>favoriteColor</code> property in the component is updated to the value emitted by the <code>ngModelChange</code> event (<em>Blue</em>).</li> </ol> <p> </p> <h3><a href="http://img.e-com-net.com/image/info8/9048d389119141578edced2faaf6e974.jpg" target="_blank"><img alt="Angular Notes_第14张图片" height="377" src="http://img.e-com-net.com/image/info8/9048d389119141578edced2faaf6e974.jpg" width="650" style="border:1px solid black;"></a></h3> <p>The steps below outline the data flow from model to view when the <code>favoriteColor</code> changes from <em>Blue</em> to <em>Red</em>.</p> <ol> <li>The <code>favoriteColor</code> value is updated in the component.</li> <li>Change detection begins.</li> <li>During change detection, the <code>ngOnChanges</code> lifecycle hook is called on the <code>NgModel</code> directive instance because the value of one of its inputs has changed.</li> <li>The <code>ngOnChanges()</code> method queues an async task to set the value for the internal <code>FormControl</code> instance.</li> <li>Change detection completes.</li> <li>On the next tick, the task to set the <code>FormControl</code> instance value is executed.</li> <li>The <code>FormControl</code> instance emits the latest value through the <code>valueChanges</code> observable.</li> <li>Any subscribers to the <code>valueChanges</code> observable receive the new value.</li> <li>The control value accessor updates the form input element in the view with the latest <code>favoriteColor</code> value.</li> </ol> <p> </p> <h3 id="form-validation">Form validation</h3> <p>Validation is an integral part of managing any set of forms. Whether you're checking for required fields or querying an external API for an existing username, Angular provides a set of built-in validators as well as the ability to create custom validators.</p> <ul> <li><strong>Reactive forms</strong> define custom validators as <strong>functions</strong> that receive a control to validate.</li> <li><strong>Template-driven forms</strong> are tied to template <strong>directives</strong>, and must provide custom validator directives that wrap validation functions.</li> </ul> <p> </p> <h2 id="1.Template-Driven">1.Template-Driven</h2> <p>in app.module.ts</p> <pre class="has"><code class="language-javascript">import { FormsModule } from '@angular/forms'; imports: [ FormsModule, ]</code></pre> <h3 id="create%20forms%20and%20register%20the%20controls">create forms and register the controls</h3> <pre class="has"><code class="language-html"><!-- no binding, tell Angular input is the control --> <form> <!-- register the control --> <input type = "text" if="username" ngModel <!-- name of the control --> name="username"> </form> <!-- set control with default values with ngModel Property Binding --> [ngModel] = "" <!-- use ngModel with two-way binding, instantly do with the value --> [(ngModel)] = "" </code></pre> <h3 id="submit%20and%20use%20the%20form">submit and use the form</h3> <pre class="has"><code class="language-html"><!-- Access the JS object (form) created by angular using the reference --> <form (ngSubmit)="onSubmit(f)" #f="ngForm"> <button type="submit"> </button> </form></code></pre> <pre class="has"><code class="language-javascript">// use the element from the component onSubmit(form: ngForm) { }</code></pre> <h3 id="use%20form%20with%20viewChild">use form with viewChild</h3> <pre class="has"><code class="language-html"><!-- Access the JS object (form) created by angular using the reference --> <form (ngSubmit)="onSubmit()" #f="ngForm"></code></pre> <pre class="has"><code class="language-javascript">@ViewChild('f') signupForm:NgForm; onSubmit( { console.log(this.signupForm); }</code></pre> <h3> </h3> <h3 id="Validators">Validators</h3> <p>angular dynamically add some CSS class, give information about the individual controls.</p> <p>https://angular.io/api/forms/Validators</p> <p> </p> <h3 id="Form%20State">Form State</h3> <pre class="has"><code class="language-html"><form #f="ngForm"> <button class= type= [disabled]="f.valid"> </button> </form></code></pre> <pre class="has"><code class="language-html"><!-- state managed by Angular --> <!-- get access to the control created --> <input #email="ngModel"> <span *ngIf="email.valid"></code></pre> <h3 id="Group%20form%20controls">Group form controls</h3> <pre class="has"><code class="language-html"><div ngModelGroup = "userData" #userData="ngModelGroup"> <!-- use ngModelGroup, userData field is added to the NgForm object --></code></pre> <h3 id="Set%20and%20Patch%20Form%20values">Set and Patch Form values</h3> <pre class="has"><code class="language-javascript">@ViewChild('f') signupForm:NgForm; // set the whole form this.signupForm.setValue() // to overwrite parts of the form this.signupForm.form.patchValue()</code></pre> <h3 id="Use%20Form%20Data">Use Form Data</h3> <pre class="has"><code class="language-javascript">this.signupForm.value.userData.xxx</code></pre> <h3 id="Reset%20From">Reset From</h3> <pre class="has"><code class="language-javascript">this.signupForm.reset(); // or reset with specific values</code></pre> <p> </p> <h2 id="2.Reactive-driven">2.Reactive-driven</h2> <p>The <code>FormControl</code> class is the basic building block when using reactive forms.</p> <p><strong>not</strong> configure the form in the <strong>template</strong></p> <pre class="has"><code class="language-javascript">import { ReactiveFormModule } from '@angular/forms'; imports:[ ReactiveFormsModule ]</code></pre> <h3 id="Create%20a%20form%20in%20code"> </h3> <h3 id="displaying-a-form-control-value">Displaying a form control value</h3> <ul> <li>Through the <code>valueChanges</code> observable where you can listen for changes in the form's value in the template using <code>AsyncPipe</code> or in the component class using the <code>subscribe()</code> method.</li> <li>With the <code>value</code> property, which gives you a snapshot of the current value.</li> </ul> <p> </p> <h3 id="replacing-a-form-control-value">Replacing a form control value</h3> <p>A form control instance provides a <code>setValue()</code> method that updates the value of the form control and validates the structure of the value provided against the control's structure.</p> <p> </p> <h3 id="partial-model-updates">Partial model updates(patch)</h3> <ul> <li> <p>Use the <code>setValue()</code> method to set a new value for an individual control. The <code>setValue()</code> method strictly adheres to the structure of the form group and replaces the entire value for the control.</p> </li> <li> <p>Use the <code>patchValue()</code> method to replace any properties defined in the object that have changed in the form model.<code> PatchValue()</code> only updates properties that the form model defines.</p> </li> </ul> <pre><code class="language-javascript">updateProfile() { this.profileForm.patchValue({ firstName: 'Nancy', address: { street: '123 Drew Street' } }); }</code></pre> <pre><code class="language-html"><p> <button (click)="updateProfile()">Update Profile</button> </p></code></pre> <h3> </h3> <h3 id="grouping-form-controls">Grouping form controls</h3> <p>a form group instance tracks the form state of a group of form control instances (for example, a form). Each control in a form group instance is tracked by name when creating the form group.</p> <pre class="has"><code class="language-javascript">import {FromControl,FormGroup} from '@angular/forms'; @Component() export class AppComponent implements OnInit { // declare type signupForm: FormGroup; ngOnInit(){ this.signupFrom = new FormGroup({ 'username':new FromControl(null), 'email': new FormControl(null), 'gender': new FormControl('male') }); } }</code></pre> <p>The individual form controls are now collected within a group. A <code>FormGroup</code> instance provides its model value as an object reduced from the values of each control in the group. A form group instance has the same properties (such as <code>value</code> and <code>untouched</code>) and methods (such as <code>setValue()</code>) as a form control instance.</p> <p> </p> <h3 id="step-2-associating-the-formgroup-model-and-view">Associating the FormGroup model and view</h3> <p>A form group tracks the status and changes for each of its controls, so if one of the controls changes, the parent control also emits a new status or value change.</p> <p>using formControl binding provided by FormControl Directive in  Reactive Forms Module</p> <pre class="has"><code class="language-html"><form [formGroup]="signupForm"> <input formControlName = "username"> <input formControlName = "email"> </form></code></pre> <p> </p> <h3 id="submit%20the%20form">submit the form</h3> <p>The <code>FormGroup</code> directive listens for the <code>submit</code> event emitted by the <code>form</code> element and emits an <code>ngSubmit</code> event that you can bind to a callback function.</p> <pre class="has"><code class="language-html"><form [formGroup]="signupForm" (ngSubmit) = "onSubmit()"> <input formControlName = "username"> </form></code></pre> <h3> </h3> <h3 id="get%20access%20to%20controls">Get access to controls</h3> <pre class="has"><code class="language-html">signupForm.get('username') <!-- overall form --> signupForm</code></pre> <h3 id="grouping%20controls"> </h3> <h3>Nested groups</h3> <pre><code class="language-javascript">import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent { profileForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), address: new FormGroup({ street: new FormControl(''), city: new FormControl(''), state: new FormControl(''), zip: new FormControl('') }) }); }</code></pre> <pre class="has"><code class="language-html"><div formGroupName="address"> <h3>Address</h3> <label> Street: <input type="text" formControlName="street"> </label> <label> City: <input type="text" formControlName="city"> </label> <label> State: <input type="text" formControlName="state"> </label> <label> Zip Code: <input type="text" formControlName="zip"> </label> </div></code></pre> <pre class="has"><code class="language-html">signupForm.get('userData.username')</code></pre> <h3> </h3> <h3 id="generating-form-controls-with-formbuilder">Generating form controls with FormBuilder (service)</h3> <pre><code class="language-javascript">import { Component } from '@angular/core'; import { FormBuilder } from '@angular/forms'; @Component({ selector: 'app-profile-editor', templateUrl: './profile-editor.component.html', styleUrls: ['./profile-editor.component.css'] }) export class ProfileEditorComponent { profileForm = this.fb.group({ firstName: [''], lastName: [''], address: this.fb.group({ street: [''], city: [''], state: [''], zip: [''] }), }); constructor(private fb: FormBuilder) { } }</code></pre> <h3> </h3> <h3 id="Arrays%20of%20Form%20Controls%20(FormArray)">Dynamic controls using form arrays (FormArray)</h3> <p><code>FormArray</code> is an alternative to <code>FormGroup</code> for managing any number of unnamed controls. As with form group instances, you can dynamically insert and remove controls from form array instances, and the form array instance value and validation status is calculated from its child controls. However, you don't need to define a key for each control by name, so this is a great option if you don't know the number of child values in advance.</p> <p>Use the <code>FormBuilder.array()</code> method to define the array, and the <code>FormBuilder.control()</code> method to populate the array with an initial control.</p> <pre class="has"><code class="language-javascript">import { FormArray } from '@angular/forms'; profileForm = this.fb.group({ firstName: ['', Validators.required], lastName: [''], address: this.fb.group({ street: [''], city: [''], state: [''], zip: [''] }), aliases: this.fb.array([ this.fb.control('') ]) }); </code></pre> <p><strong>Accessing </strong>the FormArray control</p> <p>A getter provides easy access to the aliases in the form array instance compared to repeating the <code>profileForm.get()</code> method to get each instance. The form array instance represents an undefined number of controls in an array. It's convenient to access a control through a getter, and this approach is easy to repeat for additional controls.</p> <pre><code class="language-javascript">get aliases() { return this.profileForm.get('aliases') as FormArray; }</code></pre> <p> Define a method to dynamically <strong>insert </strong>an alias control into the alias's form array. The <code>FormArray.push()</code> method inserts the control as a new item in the array.</p> <pre><code class="language-javascript">addAlias() { this.aliases.push(this.fb.control('')); }</code></pre> <p><strong>Displaying the form array in the template</strong></p> <pre><code class="language-html"><div formArrayName="aliases"> <h3>Aliases</h3> <button (click)="addAlias()">Add Alias</button> <div *ngFor="let alias of aliases.controls; let i=index"> <!-- The repeated alias template --> <label> Alias: <input type="text" [formControlName]="i"> </label> </div> </div></code></pre> <p> </p> <p>Another example</p> <pre><code class="language-javascript">'hobbies': new FormArray([]); onAddHobby(){ const control = new FormControl(null,Validators.required); //expilicit cast (<FormArray>this.signupForm.get('hobbies')).push(control); } getControls(){ return (<FormArray>this.signupForm.get('hobbies')).controls; }</code></pre> <pre class="has"><code class="language-html"><div formArrayName="hobbies"> <!-- access the element in the form array --> getControls() </div></code></pre> <h3> </h3> <h3 id="Add%20validation">Add validation</h3> <p>in ts code</p> <pre class="has"><code class="language-javascript">import {FromControl,FormGroup, Validators} from '@angular/forms'; @Component() export class AppComponent implements OnInit { // declare type signupForm: FormGroup; ngOnInit(){ this.signupFrom = new FormGroup({ 'username':new FromControl(null, Validators.required), 'email': new FormControl(null, [Validators.required, Validators.email]), 'gender': new FormControl('male') }); } }</code></pre> <h3> </h3> <h3 id="create%20custom%20validators%20example">create custom validators example</h3> <pre class="has"><code class="language-html">//key value pair forbiddenNames(control: FormControl): {[s: string]:boolean} { if(this.forbiddenUsernames.indexOf(control.value) !== -1){ return {'nameIsForbidden':true}; } // if validation is successful, have to return null return null; }</code></pre> <p>when use as validator</p> <pre class="has"><code class="language-javascript">this.forbiddenNames.bind(this)</code></pre> <h3 id="Async%20validators">Async validators</h3> <pre class="has"><code class="language-javascript">//key value pair forbiddenEmails(control: FormControl): Promise<any> | Observable<any> { const promise = new Promise<any>((resolve,reject) => { if resolve({'emailIsForbidden': true}); else resolve(null); } return promise; }</code></pre> <h3 id="React%20to%20value%20changes%20and%20status%20changes">React to value changes and status changes</h3> <p>two observables</p> <pre class="has"><code class="language-javascript">this.signupForm.valueChanges.subscribe( (value) => ); this.signupForm.statusChanges.subscribe( (status) => );</code></pre> <p> </p> <p> </p> <h1>RxJS</h1> <p>RxJS is a library for composing asynchronous and event-based programs by using observable sequences.</p> <ul> <li><strong>Observable:</strong> represents the idea of an invokable collection of future values or events.</li> <li><strong>Observer:</strong> is a collection of callbacks that knows how to listen to values delivered by the Observable.</li> <li><strong>Subscription:</strong> represents the execution of an Observable, is primarily useful for cancelling the execution.</li> <li><strong>Operators:</strong> are pure functions that enable a functional programming style of dealing with collections with operations like <code>map</code>, <code>filter</code>, <code>concat</code>, <code>reduce</code>, etc.</li> <li><strong>Subject:</strong> is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.</li> <li><strong>Schedulers:</strong> are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. <code>setTimeout</code> or <code>requestAnimationFrame</code> or others.</li> <li><strong>Subscriber</strong>: Implements the <code>Observer</code> interface and extends the <code>Subscription</code> class. While the <code>Observer</code> is the public API for consuming the values of an <code>Observable</code>, all Observers get converted to a Subscriber, in order to provide Subscription-like capabilities such as <code>unsubscribe</code>. Subscriber is a common type in RxJS, and crucial for implementing operators, but it is rarely used as a public API.</li> </ul> <h2 id="Observables%20(from%20rxjs)">Observables</h2> <ul> <li>Observables provide support for passing messages between publishers and subscribers in your application.</li> <li>Observables are declarative—that is, you define a function for publishing values, but it is not executed until a consumer subscribes to it.</li> <li>The subscribed consumer then receives notifications until the function completes, or until they unsubscribe.</li> </ul> <h3>Usage</h3> <p>As a publisher, you create an <strong><code>Observable</code> </strong>instance that defines a <strong><em>subscriber</em> </strong>function. This is the function that is executed when a consumer calls the <strong><code>subscribe()</code></strong> method. The <strong>subscriber </strong>function defines how to obtain or generate values or messages to be published.</p> <p>To execute the observable you have created and begin receiving notifications, you call its <code><strong>subscribe()</strong></code> method, passing an <strong><em>observer</em></strong> (This is a JavaScript object that defines the <strong>handlers</strong> for the notifications you receive). The <code><strong>subscribe()</strong></code> call returns a <strong><code>Subscription</code> </strong>object that has an <strong><code>unsubscribe()</code></strong> method, which you call to stop receiving notifications.</p> <p> </p> <pre><code class="language-javascript">observable.subscribe(observer)</code></pre> <p><a href="http://img.e-com-net.com/image/info8/54e45ae440f54251b4a43f83aa9b206e.jpg" target="_blank"><img alt="Angular Notes_第15张图片" height="430" src="http://img.e-com-net.com/image/info8/54e45ae440f54251b4a43f83aa9b206e.jpg" width="628" style="border:1px solid black;"></a></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/8be11a008caa4e1482f4af308cca5a57.jpg" target="_blank"><img alt="Angular Notes_第16张图片" class="has" height="382" src="http://img.e-com-net.com/image/info8/8be11a008caa4e1482f4af308cca5a57.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p>                    Invoke</p> <p>next(), <-------------------------|</p> <p>error(),   <-----------------------|</p> <p>complete()  <-------------------|</p> <p>observer -----------------> observable    ----------------------> Http Request</p> <p>                 Subscription                          Wraps Callback</p> <p>three notification types called on the observer side: next(),error(),complete()</p> <ul> <li>observer is what we basically<strong> pass into subscribe</strong>. tell observer the new data, error, completion. (a listener)</li> <li><u>observable is a wrap around the stream of values, use subscribe to be informed about change in data.</u> observable emitting data and listening to that data in different palces of our application. we can subscribe to certain updates, changes and push these changes from a different place. observable is like "passive" subject can actively trigger.</li> </ul> <p>angular obervables like(params) do not need to unsubscribe.</p> <p> </p> <h3 id="defining-observers">Defining observers</h3> <p>A handler for receiving observable notifications implements the <code>Observer</code> interface. It is an object that defines callback methods to handle the three types of notifications that an observable can send:</p> <table> <tbody> <tr> <td><code>next</code></td> <td>Required. A handler for each delivered value. Called zero or more times after execution starts.</td> </tr> <tr> <td><code>error</code></td> <td>Optional. A handler for an error notification. An error halts execution of the observable instance.</td> </tr> <tr> <td><code>complete</code></td> <td>Optional. A handler for the execution-complete notification. Delayed values can continue to be delivered to the next handler after execution is complete.</td> </tr> </tbody> </table> <p>An observer object can define any combination of these handlers. If you don't supply a handler for a notification type, the observer ignores notifications of that type.</p> <p> </p> <h3 id="Custom%20observable">Custom observable</h3> <pre class="has"><code class="language-javascript">import { Subscription, Observable } from 'rxjs'; @Component() export class HomeComponent implements OnInit { private firstObsSubscription: Subscription; constructor() {} ngOnInit(){ //observer //next, error, complete const customIntervalObservable = Observable.create((observer)=>{ let count = 0; setInterval(handler:()=>{ // call next to emit a new value observer.next(count); if(count == 2) observer.complete(); if(count>3){ observer.error(new Error()); } count++; }, timeout:1000); }); // start using observerables this.firstObsSubscription = customIntervalObservable.subscribe(data => { console.log(data); },error => { console.log(error); },()=>{ console.log('completed'); }); } ngOnDestroy(){ this.firstObsSubscription.unsubscribe(); } }</code></pre> <h2 id="Operators">Operators</h2> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/96b40563785345d7861383ac039951ff.jpg" target="_blank"><img alt="Angular Notes_第17张图片" class="has" height="428" src="http://img.e-com-net.com/image/info8/96b40563785345d7861383ac039951ff.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p><strong>map()</strong></p> <p> </p> <p><strong>chain of operators</strong></p> <pre class="has"><code class="language-javascript">import { map } from 'rxjs/operators'; customIntervalObservable.pipe(filter(),map(data => { return ; )).subscribe();</code></pre> <h2 id="Subject">Subject</h2> <p>like an observable, but more actively need to be triggered ( like event emitter). note observable, next() can only be called inside when created.</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/6da9afd787db485c8fe946c437dac602.jpg" target="_blank"><img alt="Angular Notes_第18张图片" class="has" height="343" src="http://img.e-com-net.com/image/info8/6da9afd787db485c8fe946c437dac602.jpg" width="650" style="border:1px solid black;"></a></p> <p>in service</p> <pre class="has"><code class="language-javascript">import {Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({providedIn: 'root'}) export class UserService { activatedEmitter = new Subject<boolean>(); }</code></pre> <p>To emit</p> <pre class="has"><code class="language-javascript">this.userService.activatedEmitter.next(true);</code></pre> <p>when use, use as an observable.</p> <ul> <li>In this case subject is a suitable replacement for angular event emitter. (use as  cross component event emitters, when maually call next(emit), through services).</li> <li>when using @output, not suitable for using Subject</li> </ul> <p> </p> <p> </p> <h1 id="Service%20and%20dependency%20injection"><strong>Service</strong> and dependency injection</h1> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/68a3a3ac80704e7f9679e87aecea4433.jpg" target="_blank"><img alt="Angular Notes_第19张图片" class="has" height="341" src="http://img.e-com-net.com/image/info8/68a3a3ac80704e7f9679e87aecea4433.jpg" width="650" style="border:1px solid black;"></a></p> <p><strong><em>Service</em></strong> is a broad category encompassing any value, function, or feature that an app needs. <u>A service is typically a class with a narrow, well-defined purpose.</u> It should do something specific and do it well.</p> <p> </p> <p>A component can delegate certain tasks to services, such as fetching data from the server, validating user input, or logging directly to the console. By defining such processing tasks in an <em><strong>injectable service</strong> class</em>, you make those tasks available to any component. You can also make your app more adaptable by injecting different providers of the same kind of service, as appropriate in different circumstances.</p> <p><strong><em>dependency injection</em></strong></p> <p>Components consume services; that is, you can <em>inject</em> a service into a component, giving the component access to that service class. To define a class as a service in Angular, use the <u><code>@Injectable()</code></u> decorator to provide the metadata that allows Angular to <u>inject it into</u> a component or other class (such as another service, a pipe, or an NgModule) as a <em>dependency</em>.</p> <ul> <li> <p>The <em>injector</em> is the main mechanism. Angular creates an application-wide injector for you during the bootstrap process, and additional injectors as needed. You don't have to create injectors.</p> </li> <li> <p>An injector creates dependencies, and maintains a <em>container</em> of dependency instances that it reuses if possible.</p> </li> <li> <p>A <em>provider</em> is an object that tells an injector how to obtain or create a dependency.</p> </li> </ul> <p>For any dependency that you need in your app, you must register a provider with the app's injector, so that the injector can use the provider to create new instances. For a service, the provider is typically the service class itself.</p> <p>When Angular creates a new instance of a component class, it determines which services or other dependencies that component needs by looking at the constructor parameter types. For example, the constructor of <code>HeroListComponent</code> needs <code>HeroService</code>.</p> <pre class="has"><code class="language-javascript">constructor(private service: HeroService) { }</code></pre> <p>When Angular discovers that a component depends on a service, it first checks if the injector has any existing instances of that service. If a requested service instance doesn't yet exist, the injector makes one using the registered provider, and adds it to the injector before returning the service to Angular.</p> <p>When all requested services have been resolved and returned, Angular can call the component's constructor with those services as arguments.</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/f01b808b75b04f839fdb2a4b94d8f026.jpg" target="_blank"><img alt="Angular Notes_第20张图片" class="has" height="301" src="http://img.e-com-net.com/image/info8/f01b808b75b04f839fdb2a4b94d8f026.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <h3 id="providing-services">Providing services</h3> <p>You must <u><strong>register</strong></u> at least one <em>provider</em> of any service you are going to use. The provider can be part of the service's own metadata, making that service available everywhere, or you can register providers with specific modules or components. You register providers in the metadata of the service (in the <code>@Injectable()</code> decorator), or in the <code>@NgModule()</code> or <code>@Component()</code> metadata</p> <ul> <li> <p>By default, the Angular CLI command <strong><code>ng generate service</code> </strong>registers a provider with the root injector for your service by including <u>provider metadata</u> in the <code>@Injectable()</code> decorator. The tutorial uses this method to register the provider of HeroService class definition. (something can be <strong><u>injected</u></strong> in there)</p> </li> </ul> <pre><code>@Injectable({ providedIn: 'root', })</code></pre> <p><em><u>When you provide the service at the root level, Angular<strong> creates a single, shared instance</strong> of <code>HeroService</code> and injects it into any class that asks for it. </u></em>Registering the provider in the <code>@Injectable()</code> metadata also allows Angular to optimize an app by removing the service from the compiled app if it isn't used.</p> <ul> <li> <p>When you register a provider with a specific NgModule, the same instance of a service is available to all components in that NgModule. To register at this level, use the <code>providers</code> property of the <code>@NgModule()</code> decorator (in app.module.ts)</p> </li> </ul> <pre><code>@NgModule({ providers: [ BackendService, Logger ], ... })</code></pre> <ul> <li> <p>When you register a provider at the component level, you<u> get a new instance of the service</u> with each new instance of that component. At the component level, register a service provider in the <code>providers</code> property of the <code>@Component()</code> metadata.</p> </li> </ul> <pre><code>@Component({ selector: 'app-hero-list', templateUrl: './hero-list.component.html', providers: [ HeroService ] })</code></pre> <h3 id="Inject%20services%20into%20services">Inject services into services</h3> <p>by providing services at app.module level</p> <p> </p> <h1 id="Routing">Routing</h1> <p>in <u>app-routing.module.ts</u></p> <pre class="has"><code class="language-javascript">import {Routes,RouterModule} from "@angular/router"; // starting page // localhost:4200/users, then component(action) const appRoutes: Routes = [ { path: '', component:HomeComponent } { path: 'users', component:UsersComponent } { path: 'servers', component:ServersComponent } ]; // register routes in NgModule imports:[ RouterModule.forRoot(appRoutes) ], exports:[RouterModule] </code></pre> <p> in app.module.ts</p> <pre class="has"><code class="language-javascript">imports:[ AppRoutingModule ]</code></pre> <p>in app.component.html</p> <pre class="has"><code class="language-html"><!-- special directive --> <!-- angular router load the component of currently selected route --> <router-outlet> </router-outlet></code></pre> <p>The Angular <strong><code>Router</code></strong> enables navigation from one view to the next as users perform application tasks.</p> <p>client side routing: readiung urls and rerendering parts of  the page.</p> <p>server side routing: handling incoming requests and sending back sth different.</p> <h3 id="nested%20routes">nested routes</h3> <pre class="has"><code class="language-javascript">const appRoutes: Routes = [ { path: '', component:HomeComponent } { path: 'users', component:UsersComponent } { path: 'servers', component:ServersComponent, children: [ {path: ':id', component:ServerComponent} {path: ':id/edit', component: EditServersComponent} ] } ];</code></pre> <pre class="has"><code><!-- use this instead of <app-xxx> --> <router-outlet> </router-outlet></code></pre> <h3 id="navigate%20with%20router-links">navigate with router-links</h3> <pre class="has"><code class="language-html"><!-- directive --> routerLink = '/servers' <!-- or --> [routerLink] = "['/users']" <!-- /users/:id/edit --> [routerLink] = "['/users',5,'edit']"</code></pre> <pre class="has"><code class="language-html"><!-- navigation path --> <!-- absolute path --> /server <!-- relative path --> server ./server <!-- same as above --> ../server <!-- go up one directory --></code></pre> <h3 id="styling%20active%20router-links">styling active router-links</h3> <pre class="has"><code class="language-html"><!-- dynamically set the CSS class, here "active" --> routerLinkActive="active" <!-- only the full path is matched --> [routerLinkActiveOptions] = "{exact: true}"</code></pre> <h3 id="navigate%20programmatically">navigate programmatically</h3> <p>The route path and parameters are available through an injected router service called the <strong>ActivatedRoute</strong>.</p> <pre class="has"><code class="language-javascript">import { Router, ActivatedRoute } from '@angular/router'; // ActivatedRoute: currently active route constructor(private router: Router, private route: ActivatedRoute) {} this.router.navigate(['/servers']); // give relative path this.router.navigate(['servers'], {relativeTo: this.route}); </code></pre> <h3 id="pass%20parameters%20to%20routes%20and%20fetch">pass parameters to routes and fetch</h3> <pre class="has"><code class="language-html">'users/:id'</code></pre> <pre class="has"><code class="language-javascript">constructor(private route: ActivatedRoute) {} this.route.snapshot.params['id']</code></pre> <h3 id="fetch%20route%20parameters%20reactively">fetch route parameters reactively</h3> <pre class="has"><code class="language-javascript">// params is an observable, work with async task // this is useful when params changes this.route.params .subscribe( (params: Params)=>{ this.user.id = +params['id']; this.user.name = params['name']; } )</code></pre> <h3 id="Query%20params%20and%20fragments">Query params and fragments</h3> <pre class="has"><code>// query params ?mode=editing&active=true //fragments #loading</code></pre> <pre class="has"><code class="language-javascript"><!-- pass queryParams together with routerLink --> [queryParams] = "{mode: 'editing', active: 'true'}" [fragment] = "'loading'" <!-- OR --> fragment = "loading"</code></pre> <pre class="has"><code class="language-javascript">// pass in programmatic way this.router.navigate(['/servers',id,'edit'],{queryParams: {allowEdit:'1'}, fragment: 'loading'});</code></pre> <h3 id="retrieve">retrieve</h3> <pre class="has"><code class="language-javascript">import { ActivatedRoute } from '@angular/router'; // ActivatedRoute: currently active route constructor(private route: ActivatedRoute) {} this.route.queryParams.subscribe( (params: Params)=>{ } ); this.route.fragment.subscribe(); // or use the snapshot </code></pre> <h3 id="handling%20query%20parameters">handling query parameters</h3> <pre class="has"><code class="language-javascript">// preserve or merge(overwrite) this.router.navigate(['servers'], {relativeTo: this.route, queryParamsHandling: 'preserve'}); </code></pre> <h3 id="Redirect">Redirect</h3> <p>By default, Angular matches paths by prefix.</p> <p>To fix this behavior, you need to change the matching strategy to<code> "full"</code> :</p> <pre class="has"><code class="language-javascript">{ path: '', redirectTo: '/somewhere-else', pathMatch: 'full' } </code></pre> <pre class="has"><code class="language-javascript">// wildcard, catch all] // put at last const appRoutes: Routes = [ { path: '**', redirectTo:'/not-found' } ];</code></pre> <h2 id="Guards(canActivate%2CcanActivateChild%2C%20canDeactivete)">Guards(canActivate,canActivateChild, canDeactivete)</h2> <p>run before the component loaded</p> <h3 id="CanActivate%2CcanActivateChild">CanActivate,canActivateChild</h3> <p>auth-guard.service.ts</p> <pre class="has"><code class="language-javascript">import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; export class AuthGuard implements CanActivate { constructor(private authService: AuthService){} // can run either sync or async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean{ return this.authService.isAuthenticated() .then( (authenticated: boolean) => { if(authenticated) { return true; }else{ this.router.navigate(['/']); return false; } ) } canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean){ return this.canActivate(route,state); } }</code></pre> <p>in app-routing.module</p> <pre class="has"><code class="language-javascript">{path: '', canActivate: [AuthGuard]} // protect the child route {path: '', canActivateChild: [AuthGuard]}</code></pre> <h3 id="canDeactivete">canDeactivete</h3> <p>control navigation</p> <p>can-deactivate-guard.service.</p> <pre class="has"><code class="language-javascript">// force the class to provide some logic export interface CanComponentDeactivate { canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean; } export class CanDeactivatedGuard implements CanDeactivate<CanComponentDeactivate> { canDeactivate(component: CanComponentDeactivate, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState? : RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean{ return component.canDeactivate(): }</code></pre> <p>in app-routing.module</p> <pre class="has"><code class="language-javascript">{path: '', component: , canDeactivate: [CanDeactivateGuard]} </code></pre> <p>in component</p> <pre class="has"><code class="language-javascript">// implement the actual logic canDeactivate() => Observable<boolean> | Promise<boolean> | boolean{ }</code></pre> <h3 id="pass%20static%20data%20to%20route">pass static data to route</h3> <pre class="has"><code class="language-javascript">{path: '', component: , data: {message: ''}}</code></pre> <p>use</p> <pre class="has"><code class="language-javascript">constructor(private route: ActivatedRoute){} ngOnInit(){ //this.errorMessage = this.route.snapshot.data['message']; //possibly change when we are still on the page this.route.data.subscribe( (data: Data) ={ this.errorMessage = data['message']; } }</code></pre> <h3 id="dynamic%20data%20(Resolver)">dynamic data (Resolver)</h3> <p>resolver: allow run some code before the router is rendered. does not decide the router should be rendered or not. whether the component should be loaded or not. it always render the component in the end but do some pre-loading.</p> <pre class="has"><code class="language-javascript">interface Server { id: number; name: string; status: string; } export class ServerResolver implements Resolve<Server> constructor(private serversService: ){} resolve(route: AcrivatedRouteSnapshot, state: RouterStateSnapshot): Obervable<Server> | Promise<Server> | Server { return }</code></pre> <p>in app-routing.module</p> <pre class="has"><code class="language-javascript">{path: '', component: , resolve: { server: NameResolver}},</code></pre> <pre class="has"><code class="language-javascript">this.route.data.subscribe((data: Data) => { this.server = data['server']; }</code></pre> <h1> </h1> <h1 id="Pipes">Pipes</h1> <p>transform values</p> <h3 id="parametrizing%20pipes">parametrizing pipes</h3> <pre class="has"><code class="language-html"><!-- use : --> xxx | date: 'fullDate' <!-- multiple :s for multiple parameters --></code></pre> <h3 id="chain%20pipes">chain pipes</h3> <pre class="has"><code>| | |</code></pre> <h3 id="create%20a%20custom%20pipe">create a custom pipe</h3> <p>can use ng generate pipe name</p> <p>create a new file xxx.pipe.ts</p> <p>update arrays or objects doesn't trigger the pipe</p> <pre class="has"><code class="language-javascript">import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: 'shorten', // pipe recalculate when updated. default set to true. pure: false }) export class ShortenPipe implements PipeTransform{ transform(value: any, limit: number){ return value.substr(0,limit); } }</code></pre> <p>in app.module</p> <pre class="has"><code class="language-javascript">declarations: [ ShortenPipe ]</code></pre> <p>in html</p> <pre class="has"><code class="language-html">xxx | shorten //pass parameter xxx | shorten: 5</code></pre> <h3 id="Async%20pipe">Async pipe</h3> <p>recognize promise, observable and output when async task finish</p> <pre class="has"><code class="language-html">(XXX | async)</code></pre> <h1> </h1> <h1 id="HTTP">HTTP</h1> <p style="text-align:center;"><img alt="" class="has" height="0" src="http://img.e-com-net.com/image/info8/0ae229b677914a7c8f7f1dbb24260fd5.jpg" width="0"></p> <p>in app.module.ts</p> <pre class="has"><code class="language-javascript">import { HttpClientModule } from '@angular/common/http'; imports[HttpClientModule]</code></pre> <p> in app.component.ts</p> <pre class="has"><code class="language-javascript">import {HttpClient} from '@angular/common/http'; constructor(private http: HttpClient) {}</code></pre> <h3 id="Send%20a%20POST%20Request">Send a POST Request</h3> <pre class="has"><code class="language-javascript">// http client take JS object and convert to JSON // post returns an observable this.http.post('url', postData).subscribe(responseData => { console.log(responseData); });</code></pre> <h3 id="GET%20data">GET data</h3> <pre class="has"><code class="language-javascript">this.http.get('url').subscribe(posts => { });</code></pre> <h3 id="DELETE%20data">DELETE data</h3> <pre class="has"><code class="language-javascript">// observable, can return it return this.http.delete('url');</code></pre> <p> </p> <h3 id="transform%20response%20data">transform response data</h3> <p>use rxjs operator</p> <pre class="has"><code class="language-javascript">import {map} from "rxjs/operators"; this.http .get('url') .pipe(map(responseData => { return posts })) .subscribe(posts => { });</code></pre> <h3 id="use%20types%20with%20httpclient">use types with httpclient</h3> <pre class="has"><code class="language-javascript">// store response body type // avaliable on all requests .get<{[key:string]: Post}>('url')</code></pre> <p>where Post is the model defined in post.model.ts</p> <h3 id="loading%20indicator">loading indicator</h3> <p>create a variable isLoading and set to true when start fetching,  and set to false when done (in subscribe funtion)</p> <p> </p> <h3 id="Use%20service%20for%20http%20Requests">Use service for http Requests</h3> <ul> <li>If the component doesn't care about the response whether the request is done or not, there is no reason to subscribe in the component, just <u>subscribe</u> in the <u>service</u>.</li> <li>if it does care about the response and the response status as it does for fetching posts, then in the service, return the observable, <u>subscribe</u> in the <u>component</u>.</li> </ul> <h3> </h3> <h2 id="Handling%20errors">Handling errors</h2> <pre class="has"><code class="language-javascript">//in subscribe .subscribe(data=>{}, error => {});</code></pre> <h3 id="use%20Subject%20for%20error%20handling">use Subject for error handling</h3> <pre class="has"><code class="language-javascript">import { Subject } from 'rxjs'; error = new Subject<string>(); .subscribe(xxxxx, error => { this.error.next(error.message); }); </code></pre> <h3 id="user%20catchError%20Operator">user catchError Operator</h3> <pre class="has"><code class="language-javascript">.catchError(errorRes => { return throwError(errorRes); }</code></pre> <h2> </h2> <h2 id="Set%20Headers%2C%20add%20query%20params">Set Headers, add query params</h2> <pre class="has"><code class="language-javascript">import {HttpHeaders, HttpParams} from '@angular/common/http'; .get('url', { headers: new HttpHeaders({key: value}), params: new HttpParams().set('property','value') }) // or multiple params let serachParams = new HttpParams(); serachParams = searchParams.append('print','pretty'); searchParams = searchParams.append('custom','key');</code></pre> <h3> </h3> <h3 id="Observe%20different%20types%20of%20responses">Observe different types of responses</h3> <p>full response(body,headers,...)</p> <pre class="has"><code class="language-javascript">.post<{name: string}>( 'url', postData, { observe: 'response' } )</code></pre> <p> control the request status</p> <pre class="has"><code class="language-javascript">import { tap } from 'rxjs/operators'; // execute some code without ordering the response return this.http.delete( 'url', { observe: 'events' } ).pipe(tap(event => { event.type === HttpEventType.Sent event.type === HttpEventType.Response }));</code></pre> <h3 id="Change%20the%20response%20body%20type">Change the response body type</h3> <pre class="has"><code class="language-javascript">.post<{name: string}>( 'url', postData, { responseType: 'json' } )</code></pre> <h2> </h2> <h2 id="Interceptors">Interceptors</h2> <p>simplify the  requests ( process the requests like middleware in nodejs)</p> <p>create interceptors: e.g auth-interceptor-service.ts</p> <pre class="has"><code class="language-javascript">import { HttpInterceptor, HttpRequest } from '@angular/common/http'; export class AuthInterceptorService implements HttpInterceptor { intercept(req: HttpRequest<any>, next: HttpHandler) { //manipulate request object const modifiedRequest = req.clone({headers: req.headers.append('xx','yy')}); // return an observable // manipulate the response // let the request continue return next.handle(modifiedRequest).pipe(); } }</code></pre> <p>in app.module.ts</p> <pre class="has"><code class="language-javascript">providers: [{provide: HTTP_INTERCEPTORS, useClass: AuthInterceptorService, multi: true}]</code></pre> <h3> </h3> <h1 id="Authentication">Authentication</h1> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/f2d8e3d271d74fc5a0aa2c4f13de99b0.jpg" target="_blank"><img alt="Angular Notes_第21张图片" class="has" height="390" src="http://img.e-com-net.com/image/info8/f2d8e3d271d74fc5a0aa2c4f13de99b0.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <h2 id="Dynamic%20Components">Dynamic Components</h2> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/a8fa63be47104c3bad232cf9b0d6dc7c.jpg" target="_blank"><img alt="Angular Notes_第22张图片" class="has" height="316" src="http://img.e-com-net.com/image/info8/a8fa63be47104c3bad232cf9b0d6dc7c.jpg" width="650" style="border:1px solid black;"></a></p> <p>Use *ngIf whenever possible.</p> <p> </p> <h2 id="Modules">Modules</h2> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/2bedc77e061f457b92a866fde5afd287.jpg" target="_blank"><img alt="Angular Notes_第23张图片" class="has" height="352" src="http://img.e-com-net.com/image/info8/2bedc77e061f457b92a866fde5afd287.jpg" width="650" style="border:1px solid black;"></a></p> <p> modules generally don't communicate with each other, unless export it to another module.</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/991675a5ef0145299fff9648e50fc587.jpg" target="_blank"><img alt="Angular Notes_第24张图片" class="has" height="368" src="http://img.e-com-net.com/image/info8/991675a5ef0145299fff9648e50fc587.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p> </p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/f4dbf2b485114c8cb609e12f7bf4ad06.jpg" target="_blank"><img alt="Angular Notes_第25张图片" class="has" height="350" src="http://img.e-com-net.com/image/info8/f4dbf2b485114c8cb609e12f7bf4ad06.jpg" width="650" style="border:1px solid black;"></a></p> <h3> </h3> <h3 id="Lazy%20Loading">Lazy Loading</h3> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/3976ddc17a404c7180daaecc2b7226b4.jpg" target="_blank"><img alt="Angular Notes_第26张图片" class="has" height="362" src="http://img.e-com-net.com/image/info8/3976ddc17a404c7180daaecc2b7226b4.jpg" width="650" style="border:1px solid black;"></a></p> <p>initially only load the root route, then only when visit the other modules, we load the module and the components belong to that module.</p> <p> </p> <p style="text-align:center;"></p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/052a4bf0d85b45f08e9c0145206d8817.jpg" target="_blank"><img alt="Angular Notes_第27张图片" class="has" height="346" src="http://img.e-com-net.com/image/info8/052a4bf0d85b45f08e9c0145206d8817.jpg" width="650" style="border:1px solid black;"></a></p> <h1 id="NgRx">NgRx</h1> <p>state management in bigger Angular applications (replacement for services and subjects)</p> <h3 id="application%20state">application state</h3> <p>So basically, any data, any information that controls what should be visible on the screen, that is state.</p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/b43beea01d544fcb9882ad1643bab6d0.jpg" target="_blank"><img alt="Angular Notes_第28张图片" class="has" height="324" src="http://img.e-com-net.com/image/info8/b43beea01d544fcb9882ad1643bab6d0.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/4aab368e1be44939b76125b92ceeef80.jpg" target="_blank"><img alt="Angular Notes_第29张图片" class="has" height="371" src="http://img.e-com-net.com/image/info8/4aab368e1be44939b76125b92ceeef80.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/bbf0323194d345999fb94e7df4da01d0.jpg" target="_blank"><img alt="Angular Notes_第30张图片" class="has" height="372" src="http://img.e-com-net.com/image/info8/bbf0323194d345999fb94e7df4da01d0.jpg" width="650" style="border:1px solid black;"></a></p> <p> </p> <p style="text-align:center;"><a href="http://img.e-com-net.com/image/info8/7fc1897d7d0c4e888acf00a69870ddb6.jpg" target="_blank"><img alt="Angular Notes_第31张图片" class="has" height="368" src="http://img.e-com-net.com/image/info8/7fc1897d7d0c4e888acf00a69870ddb6.jpg" width="650" style="border:1px solid black;"></a></p> <pre class="has"><code class="language-bash">npm install --save @ngrx/store</code></pre> <h2 id="An%20example%20of%20using%20NgRx%20to%20Add%20Ingredient%20to%20the%20shoppinglist.">An example of using NgRx to Add Ingredient to the shoppinglist.</h2> <h3 id="define%20the%20action%20and%20reducer">define the action and reducer</h3> <p>in store folder</p> <p>shopping-list.reducer.ts</p> <p>Now that reducer as you learned here is just a function and now the important thing about that reducer function is that NgRx will automatically pass in the <strong>current state</strong> and an <strong>action</strong> it received, so it will execute this function whenever a new action is received and then this function executes and gets both the current state and the action that was received. In the reducer, I then use a switch case statement and this is a typical setup you see in the Redux and NgRx world, where we check the type of action we got because action is actually a Javascript object with a type property and depending on the type which we have, we <strong>return</strong> a <strong>new state</strong> and that is how a reducer function always works, data in data out, no asynchronous code, it's all synchronous, so we only have synchronous code in here and we always return a new object which will be used to replace the old state for this part of the application, so for the shopping list here and this return state is what NgRx will in the end register for the shopping list slice of the overall AppState, of the App store it manages here.</p> <pre class="has"><code class="language-javascript">import { Ingredient } from '../../shared/ingredient.model'; import * as ShoppingListActions from './shopping-list.actions'; const initialState = { ingredients: [ new Ingredient('Apple', 5), new Ingredient('kiwi', 10) ] }; // set default value to function argument export function shoppingListReducer( state = initialState, action: ShoppingListActions.AddIngredient ) { switch (action.type) { case ShoppingListActions.ADD_INGREDIENT: return { ...state, ingredients: [...state.ingredients, action.payload] }; // for the initial state default: return state; } } </code></pre> <p>shopping-list.actions.ts</p> <p>we also added an actions file where we for one defined unique identifiers for all our actions, these are simply strings that identify each action and then the action itself is not just this identifier but it's a complete object based on classes we define in here. Each action needs to have a type property where we do store the string identifier for the action but in addition, we might also have a payload, so a property which can be set to attach data to that action and we needed</p> <pre class="has"><code class="language-javascript">import {Action} from '@ngrx/store'; import { Ingredient } from '../../shared/ingredient.model'; export const ADD_INGREDIENT = 'ADD_INGREDIENT'; export class AddIngredient implements Action { readonly type = ADD_INGREDIENT; payload: Ingredient; } // typescript feature // export the type // multiple actions export type ShoppingListActions = AddIngredient | AddIngredients;</code></pre> <p>in app.module</p> <p>So we added NgRx to our application by including the store module and calling for root. For root then needs a map, so basically an object that tells NgRx which reducers we have in our application because all these reducers and the state they generate make up the store of this application, make up the NgRx store. Now we add a feature for that with an identifier of our choice and then the reducer for that feature.</p> <pre class="has"><code class="language-javascript">imports: [ // structure of the store StoreModule.forRoot({shoppingList: shoppingListReducer}), ]</code></pre> <p>use in shopping-list.component (to select state)</p> <pre class="has"><code class="language-javascript">@Component({ }) export class ShoppingListComponent implements OnInit, OnDestroy { ingredients: Observable<{ingredients: Ingredient[]}>; private subscription: Subscription; // injectable // key name should match the one defined in app.module // the type of data stored in shoppinglist is what the reducer function yields constructor( private slService: ShoppingListService, private store: Store<{ shoppingList: { ingredients: Ingredient[] } }> ) { } // the purpose is to get access to the ingredient stored in the store ngOnInit() { // return an observable // select the shopping list part of the global store this.ingredients = this.store.select('shoppingList'); } onEditItem(index: number) { this.slService.startedEditing.next(index); } ngOnDestroy() { } } </code></pre> <p> in shopping-edit component</p> <pre class="has"><code class="language-javascript">onSubmit(form: NgForm) { const value = form.value; const newIngredient = new Ingredient(value.name, value.amount); if (this.editMode) { this.slService.updateIngredient(this.editedItemIndex, newIngredient); } else { // this.slService.addIngredient(newIngredient); // dispatch the new actions to our store this.store.dispatch(new ShoppingListActions.AddIngredient(newIngredient)); } this.editMode = false; form.reset(); } </code></pre> <h3 id="The%20flow%20of%20this%20add%20ingredient%20process">The flow of this add ingredient process</h3> <p>if we add an ingredient, we dispatch this action which is defined in the actions file to that store, to the @ngrx/store, we only have one such store in the entire application, setup in the app-module and that store is aware of the shoppingListReducer because we have to create such a store with all the reducers that matter. So then the action automatically reaches all the reducers that our store knows, so in this case this one reducer here and in that reducer, the action is therefore passed in as a second argument and now we can check the different types of actions and react appropriately.</p> <h2> </h2> <h2 id="Effects">Effects</h2> <pre class="has"><code class="language-bash">npm install --save @ngrx/effects</code></pre> <p>aysnc code and side effects</p> <p> </p> <h3 id="Router%20Store">Router Store</h3> <pre class="has"><code class="language-bash">npm install --save @ngrx/router-store</code></pre> <p>in app.module</p> <pre class="has"><code class="language-javascript">StoreRouterConnectingModule.forRoot(),</code></pre> <p>give you a quick and easy way of reacting to different routing events and different data attached to these events.</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1292552875637022720"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script> <!-- 文章页-底部 动态广告位 --> <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad"> <!-- 文章页-右侧1 动态广告位 --> <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div> <!-- 文章页-右侧2 动态广告位 --> <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div> <!-- 文章页-右侧3 动态广告位 --> <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(SDE)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835448366310453248.htm" title="光盘文件系统 (iso9660) 格式解析" target="_blank">光盘文件系统 (iso9660) 格式解析</a> <span class="text-muted">穷人小水滴</span> <a class="tag" taget="_blank" href="/search/%E5%85%89%E7%9B%98/1.htm">光盘</a><a class="tag" taget="_blank" href="/search/%E6%96%87%E4%BB%B6%E7%B3%BB%E7%BB%9F/1.htm">文件系统</a><a class="tag" taget="_blank" href="/search/iso9660/1.htm">iso9660</a><a class="tag" taget="_blank" href="/search/deno/1.htm">deno</a><a class="tag" taget="_blank" href="/search/GNU%2FLinux/1.htm">GNU/Linux</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>越简单的系统,越可靠,越不容易出问题.光盘文件系统(iso9660)十分简单,只需不到200行代码,即可实现定位读取其中的文件.参考资料:https://wiki.osdev.org/ISO_9660相关文章:《光盘防水嘛?DVD+R刻录光盘泡水实验》https://blog.csdn.net/secext2022/article/details/140583910《光驱的内部结构及日常使用》ht</div> </li> <li><a href="/article/1835446723661623296.htm" title="tiff批量转png" target="_blank">tiff批量转png</a> <span class="text-muted">诺有缸的高飞鸟</span> <a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/1.htm">图像处理</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/opencv/1.htm">opencv</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E5%83%8F%E5%A4%84%E7%90%86/1.htm">图像处理</a> <div>目录写在前面代码完写在前面1、本文内容tiff批量转png2、平台/环境opencv,python3、转载请注明出处：https://blog.csdn.net/qq_41102371/article/details/132975023代码importnumpyasnpimportcv2importosdeffindAllFile(base):file_list=[]forroot,ds,fsin</div> </li> <li><a href="/article/1835395040264941568.htm" title="leetcode-124 Binary Tree Maximum Path Sum" target="_blank">leetcode-124 Binary Tree Maximum Path Sum</a> <span class="text-muted">乐观的大鹏</span> <a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a> <div>Givenanon-emptybinarytree,findthemaximumpathsum.Forthisproblem,apathisdefinedasanysequenceofnodesfromsomestartingnodetoanynodeinthetreealongtheparent-childconnections.Thepathmustcontainatleastonenodea</div> </li> <li><a href="/article/1835363428143820800.htm" title="代码的执行效果" target="_blank">代码的执行效果</a> <span class="text-muted">高天</span> <div>packagecom20210409;publicclassdemo04{publicstaticvoidmain(String[]args){//////&&当前的条件不满足,则最后结果一定不满足,后面的条件不再执行////&不管条件是否满足所有条件均作判断//intx=1,y=1;//if(++y==2&&x++==2){//x=7;//}//System.out.println("x="+x</div> </li> <li><a href="/article/1835335914407161856.htm" title="Linux下使用U盘" target="_blank">Linux下使用U盘</a> <span class="text-muted">WittXie</span> <a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>第一步：插入U盘，如果能够识别出U盘，则会打印出一些信息；第二步：查看U盘系统分配给U盘的设备名；输入如下命令进行查看：fdisk-l/dev/sda如果打印出如下信息：Disk/dev/sda:4233MB,4233101312bytes165heads,34sectors/track,1473cylindersUnits=cylindersof5610*512=2872320bytesDevi</div> </li> <li><a href="/article/1835296775422963712.htm" title="由于直接在一个回答中提供完整且多语言的游戏商城代码是不现实的（因为每种语言都有其独特的语法和库），我将为你概述一个游戏商城的核心概念，并提供几种不同编程语言的基本框架或示例代码段。" target="_blank">由于直接在一个回答中提供完整且多语言的游戏商城代码是不现实的（因为每种语言都有其独特的语法和库），我将为你概述一个游戏商城的核心概念，并提供几种不同编程语言的基本框架或示例代码段。</a> <span class="text-muted">uthRaman</span> <a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>商城系统概述hailiangwang.com游戏商城系统通常包含以下部分：用户系统（登录、注册、用户信息）商品列表（游戏、DLC、虚拟货币等）购物车系统支付系统订单系统2.示例框架（伪代码）首先，我们给出一个伪代码框架，描述商城的核心逻辑。plaintextclassUser:deflogin(username,password):#验证用户登录passdefregister(username,p</div> </li> <li><a href="/article/1835240686560047104.htm" title="day12 控制流程 if switch while do...while 猜数字游戏" target="_blank">day12 控制流程 if switch while do...while 猜数字游戏</a> <span class="text-muted">卓越小Y</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%AD%A6%E4%B9%A0%E6%97%A5%E5%BF%97/1.htm">JAVA学习日志</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>控制流程顺序结构所有的程序都是按顺序执行if语句选择结构单选择语句if(a>0){System.out.println(“hello”);}packagecom.ckw.blog.select;importjava.util.Scanner;publicclassdemo01{publicstaticvoidmain(String[]args){intscore=0;Scannerscanner=</div> </li> <li><a href="/article/1835239174261796864.htm" title="Vector和Stack的用法" target="_blank">Vector和Stack的用法</a> <span class="text-muted">蟹道人</span> <a class="tag" taget="_blank" href="/search/JavaSe/1.htm">JavaSe</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>/***作者：*日期：*功能：vector的用法*/packagecom.cg;importjava.util.*;publicclassDemo5{publicstaticvoidmain(String[]args){//Vector的使用Vectorvec=newVector();Empemp=newEmp("2011",25,"zhang");vec.add(emp);for(inti=0;</div> </li> <li><a href="/article/1835018893530329088.htm" title="Mac上有哪些虚拟机软件？性能兼容性都怎么样该如何下载安装" target="_blank">Mac上有哪些虚拟机软件？性能兼容性都怎么样该如何下载安装</a> <span class="text-muted">Hot1422</span> <a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>Mac上常用的虚拟机软件大概有三个，一个是VMwareFusionVM虚拟机，一个是ParallelsDesktopPD虚拟机，还有一个是CrossOver其中PD与VM都是纯正的虚拟机软件，通过安装windows操作系统来运行windows软件，而CrossOver是无需安装操作系统的，但兼容性比较差，下面详细介绍一下：ParallelsDesktop（PD虚拟机）PD虚拟机对于RAM架构的Ma</div> </li> <li><a href="/article/1835015614557679616.htm" title="在Mac上更好的运行Windows，推荐这几款Mac虚拟机 mac运行windows虚拟机性能" target="_blank">在Mac上更好的运行Windows，推荐这几款Mac虚拟机 mac运行windows虚拟机性能</a> <span class="text-muted">是软妹子呀</span> <a class="tag" taget="_blank" href="/search/%E6%9E%9C%E7%B2%89%E6%96%B0%E6%BD%AE/1.htm">果粉新潮</a><a class="tag" taget="_blank" href="/search/macos/1.htm">macos</a><a class="tag" taget="_blank" href="/search/Mac%E8%BF%90%E8%A1%8CWindows/1.htm">Mac运行Windows</a><a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA%E8%BD%AF%E4%BB%B6/1.htm">虚拟机软件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a> <div>想要在MacOS上更好的运行Windows系统吗？推荐你使用mac虚拟机。虚拟机通过生成现有操作系统的全新虚拟镜像，它具有真实windows系统完全一样的功能，进入虚拟系统后，所有操作都是在这个全新的独立的虚拟系统里面进行，可以独立安装运行软件，保存数据，拥有自己的独立桌面，不会对真正的系统产生任何影响。ParallelsDesktop19forMac虚拟机ParallelsDesktop是一款功</div> </li> <li><a href="/article/1834924324490932224.htm" title="NoClassDefFoundError: org.apache.poi.POIXMLDocument问题排查解决" target="_blank">NoClassDefFoundError: org.apache.poi.POIXMLDocument问题排查解决</a> <span class="text-muted">qinmingjun718</span> <a class="tag" taget="_blank" href="/search/apache/1.htm">apache</a> <div>java.lang.NoClassDefFoundError:org/apache/poi/POIXMLDocumentPart这错很明显就是没找到这个类POIXMLDocumentPart就是找不到类问题原因是大概是因为poi从3.1.X低版本版本升级到pio4.1.2高版本的后与org.apache.poi.xwpf.converter.core-1.0.6.jar不兼容问题，导致这个情况的主</div> </li> <li><a href="/article/1834808355558879232.htm" title="python--排错--AttributeError: 'str' object has no attribute 'decode'，关于python3的字符串" target="_blank">python--排错--AttributeError: 'str' object has no attribute 'decode'，关于python3的字符串</a> <span class="text-muted">我不是庸医</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E9%94%99%E8%AE%B0%E5%BD%95/1.htm">排错记录</a> <div>AttributeError:'str'objecthasnoattribute'decode'一般是因为str的类型本身不是bytes，所以不能解码两个概念:普通str：可理解的语义字节流str（bytes）（0101010101，可视化显示）两个语法Encode:把普通字符串转为机器可识别的bytesDecode:把bytes转为字符串两个差异Python3的str默认不是bytes，所以不能</div> </li> <li><a href="/article/1834805203291959296.htm" title="Scala学习之旅－对Option友好的flatMap" target="_blank">Scala学习之旅－对Option友好的flatMap</a> <span class="text-muted">喝冰咖啡</span> <a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>聊点什么OptionflatMapvs.OptionOption的作用在Java/Scala中,Optional/Option(本文还是以scala代码为例)是用来表示某个对象存在或者不存在，也就是说,Option是某个类型T的Wrapper,如果T!=null,Option(T).isDefined==true如果T==null,Option(T).isEmpty==true有了Option这层</div> </li> <li><a href="/article/1834789577399824384.htm" title="Linux下apache的安装" target="_blank">Linux下apache的安装</a> <span class="text-muted">轴儿</span> <div>1.获取软件：http://httpd.apache.org/httpd-2.4.25.tar.gz并上传至服务器。运行以上命令时，可能会出现“APRnotfound.”的错误。此时需要下载依赖包。2.下载安装依赖包：创建文件夹：mkdir/usr/httpd-refercd/usr/httpd-refer/下载依赖包：wgethttp://p5osdejt4.bkt.clouddn.com/ap</div> </li> <li><a href="/article/1834750503045656576.htm" title="webpack 配置" target="_blank">webpack 配置</a> <span class="text-muted">weixin_44101835</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>webpack.base.jsconstpath=require('path');constHtmlWebpackPlugin=require('html-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');modules.export=function(isDev){return{//入口文件</div> </li> <li><a href="/article/1834562559613693952.htm" title="Error: No STM32 target found! If your product embeds Debug Authentication, please perform a discover" target="_blank">Error: No STM32 target found! If your product embeds Debug Authentication, please perform a discover</a> <span class="text-muted">BABA8891</span> <a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a> <div>这个错误信息“Error:NoSTM32targetfound!IfyourproductembedsDebugAuthentication,pleaseperformadiscoveryusingDebugAuthentication”通常出现在使用STM32微控制器的开发过程中，尤其是在尝试通过调试接口（如SWD或JTAG）与设备通信时。这个错误表明调试器或开发工具无法识别或连接到STM32目</div> </li> <li><a href="/article/1834500922668052480.htm" title="springboot~注册不同级别包里的bean~scanBasePackages" target="_blank">springboot~注册不同级别包里的bean~scanBasePackages</a> <span class="text-muted">老飞949</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a> <div>对于springboot来说，它会把当前应用程序所在的包装载到ioc容器里，让使用者可以直接Autowired注入它们，一般的项目结果是这样的，这个项目包下有main方法，它将会把nacosdemo这个包里面所有的bean都扫描出来，然后在程序启动时，nacosdemo里的bean就会被自动注册了。目前我们做一个测试，在nacosdemo包外层再建立一个包common，在里面写个组件，然后在nac</div> </li> <li><a href="/article/1834492725551001600.htm" title="Antimalware Service Executable 高内存高CPU拒绝访问的处理办法解决方案，无脑安全省事轻松，亲测完全有效，最新2024可用长期有效，改文件所有者提权失效后处理办法" target="_blank">Antimalware Service Executable 高内存高CPU拒绝访问的处理办法解决方案，无脑安全省事轻松，亲测完全有效，最新2024可用长期有效，改文件所有者提权失效后处理办法</a> <span class="text-muted">醒了不起的盖茨比Z</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95/1.htm">学习方法</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E6%BA%90%E8%BD%AF%E4%BB%B6/1.htm">开源软件</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%AE%89%E5%85%A8/1.htm">系统安全</a> <div>不废话，别的所有方法都试过了，没一个有效的，包括提TrustedInstaller权限，折腾了一下午一晚上都没有任何效果，还给电脑环境变量污染了，最后发现最简单最有效的方法是直接火绒粉碎，比啥都好使，几分钟搞定了。软件已经上传了大家直接下载把下面这个路径整个文件夹删除。C:\ProgramFiles\WindowsDefender或者怕出问题的可以找到其中的MsMpEng.exe这个给粉碎掉，如果</div> </li> <li><a href="/article/1834473409468264448.htm" title="圣索菲亚大教堂变身清真寺，意味着什么？" target="_blank">圣索菲亚大教堂变身清真寺，意味着什么？</a> <span class="text-muted">茶与酒</span> <div>位于土耳其伊斯坦布尔的圣索菲亚大教堂，是世界上最伟大的古迹之一。它具有一千五百多年历史，被列入教科文组织的世界遗产名录。圣索菲亚大教堂地处亚欧大陆交界处，不仅是东西方文化的混合体，还见证了基督教和伊斯兰教的对峙与融合。它在历史上曾经历过数次身份转变：基督教堂、清真寺、博物馆……最近，土耳其宣布它的身份将再一次发生变化，引来国际上的广泛关注。正文ErdogansignsdecreeallowingH</div> </li> <li><a href="/article/1834349027194400768.htm" title="Python 对文件的加密和解密" target="_blank">Python 对文件的加密和解密</a> <span class="text-muted">Jinx Boy</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%93%88%E5%B8%8C%E7%AE%97%E6%B3%95/1.htm">哈希算法</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>cryptography库中的Fernet模块提供了一种简单的方法来加密和解密数据。它使用对称加密算法，其中相同的密钥用于加密和解密数据。以下是用Fernet模块对文件进行的加密和解密。加密：importhashlibimportbase64fromcryptography.fernetimportFernetimportosdefstring_to_fernet_key(input_string</div> </li> <li><a href="/article/1834219935493091328.htm" title="Python——渐变色" target="_blank">Python——渐变色</a> <span class="text-muted">星和月</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>在Python的turtle模块中，可以使用colorsys库来创建渐变色。importturtleimportcolorsysdefdraw_gradient(start_color,end_color):screen=turtle.Screen()screen.colormode(255)turtle.speed(0)turtle.penup()turtle.goto(-200,-200)tu</div> </li> <li><a href="/article/1834077372249370624.htm" title="vue前端性能优化之cdn的使用" target="_blank">vue前端性能优化之cdn的使用</a> <span class="text-muted">不cong明的亚子</span> <a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a><a class="tag" taget="_blank" href="/search/vue%2Belement/1.htm">vue+element</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>优化原因项目中首页加载过慢，原因是js,css静态资源第一次加载的时间长vue.config.js'usestrict'......constcdn={js_cdn:['https://cdn.jsdelivr.net/npm/moment@2.27.0/moment.min.js','https://unpkg.com/vue@2.6.10/dist/vue.js','https://unpkg</div> </li> <li><a href="/article/1834063511483936768.htm" title="Spring-IOC容器-Bean管理-基于XML方式超详解！" target="_blank">Spring-IOC容器-Bean管理-基于XML方式超详解！</a> <span class="text-muted">2401_86367123</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E8%BE%85%E5%AF%BC%E5%A4%A7%E5%8E%82%E5%86%85%E6%8E%A8/1.htm">面试辅导大厂内推</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a> <div>注入属性-内部bean①在实体类之间表示一对多关系，员工表示所属部门，使用对象类型属性进行表示//部门类publicclassDept{privateStringdname;publicvoidsetDname(Stringdname){this.dname=dname;}}//员工类publicclassEmp{privateStringename;privateStringgender;//员</div> </li> <li><a href="/article/1834043473041387520.htm" title="极简之美：探索Minimal Linux Live的开源之旅" target="_blank">极简之美：探索Minimal Linux Live的开源之旅</a> <span class="text-muted">芮妍娉Keaton</span> <div>极简之美：探索MinimalLinuxLive的开源之旅minimalMinimalLinuxLive(MLL)isatinyeducationalLinuxdistribution,whichisdesignedtobebuiltfromscratchbyusingacollectionofautomatedshellscripts.MinimalLinuxLiveoffersacoreenvi</div> </li> <li><a href="/article/1834029099715227648.htm" title="idea2023版使用Free MyBatis plugin插件报错" target="_blank">idea2023版使用Free MyBatis plugin插件报错</a> <span class="text-muted">涛哥是个大帅比</span> <a class="tag" taget="_blank" href="/search/%E9%97%AE%E9%A2%98/1.htm">问题</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a> <div>项目场景：新版的idea使用FreeMyBatisplugin插件报错问题描述错误信息java.lang.Throwable:'#LineMarkerInfo(T,TextRange,Icon,int,Function,GutterIconNavigationHandler,Alignment)'isdeprecatedandgoingtoberemovedsoon.Pleaseuse`LineM</div> </li> <li><a href="/article/1833970369250291712.htm" title="Construction plan for electronic management of non tax revenue and receiptscatalogue1. Electronic" target="_blank">Construction plan for electronic management of non tax revenue and receiptscatalogue1. Electronic</a> <span class="text-muted">用数据说话用数据决策</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a> <div>Constructionplanforelectronicmanagementofnontaxrevenueandreceiptscatalogue1.Electronicmanagementofnontaxincomeandreceipts181.1BusinessDescription181.2BusinessProcess191.2.1OverallBusinessProcessofNonT</div> </li> <li><a href="/article/1833930263005065216.htm" title="因 Mysql root 密码过于简单导致 Mysql 连接失败的解决方法" target="_blank">因 Mysql root 密码过于简单导致 Mysql 连接失败的解决方法</a> <span class="text-muted">bigdata-rookie</span> <a class="tag" taget="_blank" href="/search/MySql/1.htm">MySql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>问题：Accessdeniedforuser‘root’@‘192.168.xx.xx’(usingpassword:YES)用户“root”@“192.168.xx.xx”的访问被拒绝（使用密码：YES）解决方法：1、使用root用户登录mysql，通过下面的命令给root用户设置权限即可解决。($yourpassword替换为自己的root密码)GRANTALLPRIVILEGESON*.*T</div> </li> <li><a href="/article/1833880963885658112.htm" title="鸿蒙开发（NEXT/API 12）【NetConnection开发】 网络篇" target="_blank">鸿蒙开发（NEXT/API 12）【NetConnection开发】 网络篇</a> <span class="text-muted">移动开发技术栈</span> <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E5%BC%80%E5%8F%91/1.htm">鸿蒙开发</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/openharmony/1.htm">openharmony</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99/1.htm">鸿蒙</a><a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99%E7%B3%BB%E7%BB%9F/1.htm">鸿蒙系统</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a> <div>场景介绍NetConnection模块提供了常用网络信息查询的能力。接口说明接口名描述OH_NetConn_HasDefaultNet(int32_t*hasDefaultNet)检查默认数据网络是否被激活，判断设备是否有网络连接，以便在应用程序中采取相应的措施。OH_NetConn_GetDefaultNet(NetConn_NetHandle*netHandle)获得默认激活的数据网络。OH_</div> </li> <li><a href="/article/1833674071309643776.htm" title="JDom解析xml文件的java.lang.NoClassDefFoundError问题" target="_blank">JDom解析xml文件的java.lang.NoClassDefFoundError问题</a> <span class="text-muted">轻口味</span> <a class="tag" taget="_blank" href="/search/%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98/1.htm">常见问题</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/exception/1.htm">exception</a><a class="tag" taget="_blank" href="/search/encoding/1.htm">encoding</a><a class="tag" taget="_blank" href="/search/class/1.htm">class</a><a class="tag" taget="_blank" href="/search/list/1.htm">list</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a> <div>java代码为：importjava.io.IOException;importjava.util.List;importorg.jdom.Document;importorg.jdom.Element;importorg.jdom.JDOMException;importorg.jdom.input.SAXBuilder;importorg.jdom.xpath.XPath;publicclas</div> </li> <li><a href="/article/1833668961598795776.htm" title="LeetCode | 0235. 二叉搜索树的最近公共祖先【Python】" target="_blank">LeetCode | 0235. 二叉搜索树的最近公共祖先【Python】</a> <span class="text-muted">Wonz</span> <div>ProblemLeetCodeGivenabinarysearchtree(BST),findthelowestcommonancestor(LCA)oftwogivennodesintheBST.AccordingtothedefinitionofLCAonWikipedia:“Thelowestcommonancestorisdefinedbetweentwonodespandqasthelo</div> </li> <li><a href="/article/96.htm" title="怎么样才能成为专业的程序员？" target="_blank">怎么样才能成为专业的程序员？</a> <span class="text-muted">cocos2d-x小菜</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a> <div>  如何要想成为一名专业的程序员？仅仅会写代码是不够的。从团队合作去解决问题到版本控制，你还得具备其他关键技能的工具包。当我们询问相关的专业开发人员，那些必备的关键技能都是什么的时候，下面是我们了解到的情况。   关于如何学习代码，各种声音很多，然后很多人就被误导为成为专业开发人员懂得一门编程语言就够了？！呵呵，就像其他工作一样，光会一个技能那是远远不够的。如果你想要成为</div> </li> <li><a href="/article/223.htm" title="java web开发 高并发处理" target="_blank">java web开发 高并发处理</a> <span class="text-muted">BreakingBad</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91/1.htm">开发</a><a class="tag" taget="_blank" href="/search/%E5%A4%84%E7%90%86/1.htm">处理</a><a class="tag" taget="_blank" href="/search/%E9%AB%98/1.htm">高</a> <div>java处理高并发高负载类网站中数据库的设计方法（java教程,java处理大量数据，java高负载数据） 一：高并发高负载类网站关注点之数据库 没错,首先是数据库,这是大多数应用所面临的首个SPOF。尤其是Web2.0的应用，数据库的响应是首先要解决的。 一般来说MySQL是最常用的，可能最初是一个mysql主机，当数据增加到100万以上，那么，MySQL的效能急剧下降。常用的优化措施是M-S（</div> </li> <li><a href="/article/350.htm" title="mysql批量更新" target="_blank">mysql批量更新</a> <span class="text-muted">ekian</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>mysql更新优化： 一版的更新的话都是采用update set的方式，但是如果需要批量更新的话，只能for循环的执行更新。或者采用executeBatch的方式，执行更新。无论哪种方式，性能都不见得多好。 三千多条的更新，需要3分多钟。 查询了批量更新的优化，有说replace into的方式，即： replace into tableName(id,status) values</div> </li> <li><a href="/article/477.htm" title="微软BI（3）" target="_blank">微软BI（3）</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E8%BD%AFBI+SSIS/1.htm">微软BI SSIS</a> <div>1) Q：该列违反了完整性约束错误；已获得 OLE DB 记录。源:“Microsoft SQL Server Native Client 11.0” Hresult: 0x80004005 说明:“不能将值 NULL 插入列 'FZCHID'，表 'JRB_EnterpriseCredit.dbo.QYFZCH'；列不允许有 Null 值。INSERT 失败。”。 A：一般这类问题的存在是 </div> </li> <li><a href="/article/604.htm" title="Java中的List" target="_blank">Java中的List</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>        List是一个有序的 collection（也称为序列）。此接口的用户可以对列表中每个元素的插入位置进行精确地控制。用户可以根据元素的整数索引（在列表中的位置）访问元素，并搜索列表中的元素。         与 set 不同，列表通常允许重复</div> </li> <li><a href="/article/731.htm" title="读书笔记" target="_blank">读书笔记</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>   1.  K是一家加工厂,需要采购原材料,有A,B,C,D 4家供应商,其中A给出的价格最低,性价比最高,那么假如你是这家企业的采购经理,你会如何决策?          传统决策: A:100%订单  B,C,D:0%     &nbs</div> </li> <li><a href="/article/858.htm" title="centos 安装 Codeblocks" target="_blank">centos 安装 Codeblocks</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/codeblocks/1.htm">codeblocks</a> <div>1.安装gcc,需要c和c++两部分,默认安装下,CentOS不安装编译器的,在终端输入以下命令即可yum install gccyum install gcc-c++   2.安装gtk2-devel,因为默认已经安装了正式产品需要的支持库,但是没有安装开发所需要的文档.yum install gtk2* 3. 安装wxGTK    yum search w</div> </li> <li><a href="/article/985.htm" title="23种设计模式的形象比喻" target="_blank">23种设计模式的形象比喻</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>1、ABSTRACT FACTORY—追MM少不了请吃饭了，麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西，虽然口味有所不同，但不管你带MM去麦当劳或肯德基，只管向服务员说“来四个鸡翅”就行了。麦当劳和肯德基就是生产鸡翅的Factory 　　工厂模式：客户类和工厂类分开。消费者任何时候需要某种产品，只需向工厂请求即可。消费者无须修改就可以接纳新产品。缺点是当产品修改时，工厂类也要做相应的修改。如：</div> </li> <li><a href="/article/1112.htm" title="开发管理 CheckLists" target="_blank">开发管理 CheckLists</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%AE%A1%E7%90%86+CheckLists/1.htm">开发管理 CheckLists</a> <div>开发管理 CheckLists(23) -使项目组度过完整的生命周期 开发管理 CheckLists(22) -组织项目资源 开发管理 CheckLists(21) -控制项目的范围开发管理 CheckLists(20) -项目利益相关者责任开发管理 CheckLists(19) -选择合适的团队成员开发管理 CheckLists(18) -敏捷开发 Scrum Master 工作开发管理 C</div> </li> <li><a href="/article/1239.htm" title="js实现切换" target="_blank">js实现切换</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E6%A0%8F%E7%9B%AE%E5%88%87%E6%8D%A2/1.htm">栏目切换</a> <div>js主要功能之一就是实现页面的特效,窗体的切换可以减少页面的大小,被门户网站大量应用思路: 1,先将要显示的设置为display:bisible 否则设为none 2,设置栏目的id ,js获取栏目的id,如果id为Null就设置为显示 3,判断js获取的id名字;再设置是否显示   代码实现:   html代码: <di</div> </li> <li><a href="/article/1366.htm" title="周鸿祎在360新员工入职培训上的讲话" target="_blank">周鸿祎在360新员工入职培训上的讲话</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/%E6%84%9F%E6%82%9F/1.htm">感悟</a><a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AE%A1%E7%90%86/1.htm">项目管理</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E7%94%9F/1.htm">人生</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a> <div>        这篇文章也是最近偶尔看到的，考虑到原博客发布者可能将其删除等原因，也更方便个人查找，特将原文拷贝再发布的。“学东西是为自己的，不要整天以混的姿态来跟公司博弈，就算是混，我觉得你要是能在混的时间里，收获一些别的有利于人生发展的东西，也是不错的，看你怎么把握了”，看了之后，对这句话记忆犹新。  &</div> </li> <li><a href="/article/1493.htm" title="前端Web开发的页面效果" target="_blank">前端Web开发的页面效果</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/Microsoft/1.htm">Microsoft</a> <div>1.IE6下png图片的透明显示： <img src="图片地址" border="0" style="Filter.Alpha(Opacity)=数值(100),style=数值(3)"/> 或在<head></head>间加一段JS代码让透明png图片正常显示。 2.<li>标</div> </li> <li><a href="/article/1620.htm" title="【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)" target="_blank">【JVM五】老年代垃圾回收：并发标记清理GC(CMS GC)</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E5%9E%83%E5%9C%BE%E5%9B%9E%E6%94%B6/1.htm">垃圾回收</a> <div>  CMS概述 并发标记清理垃圾回收(Concurrent Mark and Sweep GC）算法的主要目标是在GC过程中，减少暂停用户线程的次数以及在不得不暂停用户线程的请夸功能，尽可能短的暂停用户线程的时间。这对于交互式应用，比如web应用来说，是非常重要的。   CMS垃圾回收针对新生代和老年代采用不同的策略。相比同吞吐量垃圾回收，它要复杂的多。吞吐量垃圾回收在执</div> </li> <li><a href="/article/1747.htm" title="Struts2技术总结" target="_blank">Struts2技术总结</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a> <div>  必备jar文件 早在struts2.0.*的时候，struts2的必备jar包需要如下几个： commons-logging-*.jar   Apache旗下commons项目的log日志包 freemarker-*.jar          </div> </li> <li><a href="/article/1874.htm" title="Jquery easyui layout应用注意事项" target="_blank">Jquery easyui layout应用注意事项</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/easyui/1.htm">easyui</a><a class="tag" taget="_blank" href="/search/layout/1.htm">layout</a> <div>在jquery easyui中提供了easyui-layout布局，他的布局比较局限，类似java中GUI的border布局。下面对其使用注意事项作简要介绍：      如果在现有的工程中前台界面均应用了jquery easyui，那么在布局的时候最好应用jquery eaysui的layout布局，否则在表单页面（编辑、查看、添加等等）在不同的浏览器会出</div> </li> <li><a href="/article/2001.htm" title="java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？" target="_blank">java-拷贝特殊链表：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> public class CopySpecialLinkedList { /** * 题目：有一个特殊的链表，其中每个节点不但有指向下一个节点的指针pNext，还有一个指向链表中任意节点的指针pRand，如何拷贝这个特殊链表？ 拷贝pNext指针非常容易，所以题目的难点是如何拷贝pRand指针。 假设原来链表为A1 -> A2 ->... -> An，新拷贝</div> </li> <li><a href="/article/2128.htm" title="color" target="_blank">color</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">    <HTML>    <HEAD>&nbs</div> </li> <li><a href="/article/2255.htm" title="[信息与战争]移动通讯与网络" target="_blank">[信息与战争]移动通讯与网络</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>      两个坚持:手机的电池必须可以取下来                光纤不能够入户,只能够到楼宇       建议大家找这本书看看:<&</div> </li> <li><a href="/article/2382.htm" title="oracle flashback query(闪回查询)" target="_blank">oracle flashback query(闪回查询)</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/flashback+query/1.htm">flashback query</a><a class="tag" taget="_blank" href="/search/flashback+table/1.htm">flashback table</a> <div>在Oracle 10g中，Flash back家族分为以下成员： Flashback Database Flashback Drop Flashback Table Flashback Query(分Flashback Query,Flashback Version Query，Flashback Transaction Query) 下面介绍一下Flashback Drop 和Flas</div> </li> <li><a href="/article/2509.htm" title="zeus持久层DAO单元测试" target="_blank">zeus持久层DAO单元测试</a> <span class="text-muted">deng520159</span> <a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>zeus代码测试正紧张进行中,但由于工作比较忙,但速度比较慢.现在已经完成读写分离单元测试了,现在把几种情况单元测试的例子发出来,希望有人能进出意见,让它走下去. 本文是zeus的dao单元测试: 1.单元测试直接上代码   package com.dengliang.zeus.webdemo.test; import org.junit.Test; import o</div> </li> <li><a href="/article/2636.htm" title="C语言学习三printf函数和scanf函数学习" target="_blank">C语言学习三printf函数和scanf函数学习</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/printf/1.htm">printf</a><a class="tag" taget="_blank" href="/search/scanf/1.htm">scanf</a><a class="tag" taget="_blank" href="/search/language/1.htm">language</a> <div>printf函数 /* 2013年3月10日20:42:32 地点：北京潘家园 功能： 目的： 测试%x %X %#x %#X的用法 */ # include <stdio.h> int main(void) { printf("哈哈！\n"); // \n表示换行 int i = 10; printf</div> </li> <li><a href="/article/2763.htm" title="那你为什么小时候不好好读书?" target="_blank">那你为什么小时候不好好读书?</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/life/1.htm">life</a> <div>dady, 我今天捡到了十块钱, 不过我还给那个人了 good girl! 那个人有没有和你讲thank you啊 没有啦....他拉我的耳朵我才把钱还给他的, 他哪里会和我讲thank you   爸爸, 如果地上有一张5块一张10块你拿哪一张呢.... 当然是拿十块的咯... 爸爸你很笨的, 你不会两张都拿   爸爸为什么上个月那个人来跟你讨钱, 你告诉他没</div> </li> <li><a href="/article/2890.htm" title="iptables开放端口" target="_blank">iptables开放端口</a> <span class="text-muted">Fanyucai</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/iptables/1.htm">iptables</a><a class="tag" taget="_blank" href="/search/%E7%AB%AF%E5%8F%A3/1.htm">端口</a> <div>1，找到配置文件 vi /etc/sysconfig/iptables   2，添加端口开放，增加一行，开放18081端口 -A INPUT -m state --state NEW -m tcp -p tcp --dport 18081 -j ACCEPT   3，保存 ESC :wq!   4，重启服务 service iptables </div> </li> <li><a href="/article/3017.htm" title="Ehcache（05）——缓存的查询" target="_blank">Ehcache（05）——缓存的查询</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E7%BB%9F%E8%AE%A1/1.htm">统计</a><a class="tag" taget="_blank" href="/search/query/1.htm">query</a> <div>缓存的查询 目录 1.    使Cache可查询 1.1     基于Xml配置 1.2     基于代码的配置 2     指定可搜索的属性 2.1     可查询属性类型 2.2 &</div> </li> <li><a href="/article/3144.htm" title="通过hashset找到数组中重复的元素" target="_blank">通过hashset找到数组中重复的元素</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/hashset/1.htm">hashset</a> <div>  如何在hashset中快速找到重复的元素呢?方法很多，下面是其中一个办法： int[] array = {1,1,2,3,4,5,6,7,8,8}; Set<Integer> set = new HashSet<Integer>(); for(int i = 0</div> </li> <li><a href="/article/3271.htm" title="使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL" target="_blank">使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL</a> <span class="text-muted">lanrikey</span> <a class="tag" taget="_blank" href="/search/history/1.htm">history</a> <div>后退时关闭当前页面 <script type="text/javascript"> jQuery(document).ready(function ($) {         if (window.history && window.history.pushState) {</div> </li> <li><a href="/article/3398.htm" title="应用程序的通信成本" target="_blank">应用程序的通信成本</a> <span class="text-muted">netkiller.github.com</span> <a class="tag" taget="_blank" href="/search/%E8%99%9A%E6%8B%9F%E6%9C%BA/1.htm">虚拟机</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E9%99%88%E6%99%AF%E5%B3%B0/1.htm">陈景峰</a><a class="tag" taget="_blank" href="/search/netkiller/1.htm">netkiller</a><a class="tag" taget="_blank" href="/search/neo/1.htm">neo</a> <div>应用程序的通信成本 什么是通信 一个程序中两个以上功能相互传递信号或数据叫做通信。 什么是成本 这是是指时间成本与空间成本。 时间就是传递数据所花费的时间。空间是指传递过程耗费容量大小。 都有哪些通信方式 全局变量 线程间通信 共享内存 共享文件 管道 Socket 硬件（串口，USB） 等等 全局变量 全局变量是成本最低通信方法，通过设置</div> </li> <li><a href="/article/3525.htm" title="一维数组与二维数组的声明与定义" target="_blank">一维数组与二维数组的声明与定义</a> <span class="text-muted">恋洁e生</span> <a class="tag" taget="_blank" href="/search/%E4%BA%8C%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">二维数组</a><a class="tag" taget="_blank" href="/search/%E4%B8%80%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">一维数组</a><a class="tag" taget="_blank" href="/search/%E5%AE%9A%E4%B9%89/1.htm">定义</a><a class="tag" taget="_blank" href="/search/%E5%A3%B0%E6%98%8E/1.htm">声明</a><a class="tag" taget="_blank" href="/search/%E5%88%9D%E5%A7%8B%E5%8C%96/1.htm">初始化</a> <div>/**  *  */ package test20111005; /**  * @author FlyingFire  * @date:2011-11-18 上午04:33:36  * @author ：代码整理  * @introduce :一维数组与二维数组的初始化  *summary：  */ public c</div> </li> <li><a href="/article/3652.htm" title="Spring Mybatis独立事务配置" target="_blank">Spring Mybatis独立事务配置</a> <span class="text-muted">toknowme</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>在项目中有很多地方会使用到独立事务，下面以获取主键为例   （1）修改配置文件spring-mybatis.xml  <!-- 开启事务支持 -->  <tx:annotation-driven transaction-manager="transactionManager" />   &n</div> </li> <li><a href="/article/3779.htm" title="更新Anadroid SDK Tooks之后，Eclipse提示No update were found" target="_blank">更新Anadroid SDK Tooks之后，Eclipse提示No update were found</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a> <div>使用Android SDK Manager 更新了Anadroid SDK Tooks 之后， 打开eclipse提示 This Android SDK requires Android Developer Toolkit version 23.0.0 or above, 点击Check for Updates  检测一会后提示 No update were found  </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </div> </div> </footer> <!-- 代码高亮 --> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>