Murray N. ng-book. The Complete Book on Angular 11 2020
How to Read This Book
Running Code Examples Angular CLI Code Blocks and Context Code Block Numbering A Word on Versioning Getting Help Emailing Us Chapter OverviewWriting Your First Angular Web Application
Simple Reddit Clone Getting started Node.js and npm TypeScript Browser Special instruction for Windows users Angular CLI Example Project Running the application Making a Component Importing Dependencies Component Decorators Adding a template with templateUrl Adding a template Adding CSS Styles with styleUrls Loading Our Component Adding Data to the Component Working With Arrays Using the User Item Component Rendering the UserItemComponent Accepting Inputs Passing an Input value Bootstrapping Crash Course declarations imports providers bootstrap Expanding our Application Adding CSS The Application Component Adding Interaction Adding the Article Component Rendering Multiple Rows Creating an Article class Storing Multiple Articles Configuring the ArticleComponent with inputs Rendering a List of Articles Adding New Articles Finishing Touches Displaying the Article Domain Re-sorting Based on Score Deployment Building Our App for Production Uploading to a Server Installing now Full Code Listing Wrapping Up Getting HelpTypeScript
Angular is built in TypeScript What do we get with TypeScript? Types Trying it out with a REPL Built-in types Classes Properties Methods Constructors Inheritance Utilities Fat Arrow Functions Template Strings Wrapping upHow Angular Works
Application The Navigation Component The Breadcrumbs Component The Product List Component How to Use This Chapter Product Model Components Component Decorator Component selector Component template Adding A Product Viewing the Product with Template Binding Adding More Products Selecting a Product Listing products using <products-list> The ProductsListComponent Configuring the ProductsListComponent @Component Options Component inputs Component outputs Emitting Custom Events Writing the ProductsListComponent Controller Class Writing the ProductsListComponent View Template The Full ProductsListComponent Component The ProductRowComponent Component ProductRowComponent Configuration ProductRowComponent template The ProductImageComponent Component The PriceDisplayComponent Component The ProductDepartmentComponent NgModule and Booting the App Booting the app The Completed Project Deploying the App A Word on Data ArchitectureBuilt-in Directives
Introduction NgIf NgSwitch NgStyle NgClass NgFor Getting an index NgNonBindable ConclusionForms in Angular
Forms are Crucial, Forms are Complex FormControls and FormGroups FormControl FormGroup Our First Form Loading the FormsModule Reactive- vs. template-driven Forms Simple SKU Form: @Component Decorator Simple SKU Form: template Simple SKU Form: Component Definition Class Try it out! Using FormBuilder Reactive Forms with FormBuilder Using FormBuilder Using myForm in the view Try it out! Adding Validations Explicitly setting the sku FormControl as an instance variable Custom Validations Watching For Changes ngModel Wrapping UpDependency Injection
Injections Example: PriceService Dependency Injection Parts Playing with an Injector Providing Dependencies with NgModule Providers are the Key Providers Using a Class Using a Factory Dependency Injection in Apps More ResourcesHTTP
Introduction Using @angular/common/http import from @angular/common/http A Basic Request Building the SimpleHttpComponent Component Definition Building the SimpleHttpComponent template Building the SimpleHttpComponent Controller Full SimpleHttpComponent Writing a YouTubeSearchComponent Writing a SearchResult Writing the YouTubeSearchService Writing the SearchBoxComponent Writing SearchResultComponent Writing YouTubeSearchComponent @angular/common/http API Making a POST request PUT / PATCH / DELETE / HEAD Custom HTTP Headers SummaryRouting
Why Do We Need Routing? How client-side routing works The beginning: using anchor tags The evolution: HTML5 client-side routing Writing our first routes Components of Angular routing Imports Routes Installing our Routes RouterOutlet using <router-outlet> RouterLink using [routerLink] Putting it all together Creating the Components HomeComponent AboutComponent ContactComponent Application Component Configuring the Routes Routing Strategies Running the application Route Parameters ActivatedRoute Music Search App First Steps The SpotifyService The SearchComponent Trying the search TrackComponent Wrapping up music search Router Hooks AuthService LoginComponent ProtectedComponent and Route Guards Nested Routes Configuring Routes ProductsModule SummaryData Architecture in Angular
An Overview of Data Architecture Data Architecture in AngularData Architecture with Observables - Part 1: Services
Observables and RxJS Note: Some RxJS Knowledge Required Learning Reactive Programming and RxJS Chat App Overview Components Models Services Summary Implementing the Models User Thread Message Implementing UsersService currentUser stream Setting a new user UsersService.ts The MessagesService the newMessages stream the messages stream The Operation Stream Pattern Sharing the Stream Adding Messages to the messages Stream Our completed MessagesService Trying out MessagesService The ThreadsService A map of the current set of Threads (in threads) A chronological list of Threads, newest-first (in orderedthreads) The currently selected Thread (in currentThread) The list of Messages for the currently selected Thread (in current-ThreadMessages) Our Completed ThreadsService Data Model SummaryData Architecture with Observables - Part 2: View Components
Building Our Views: The AppComponent Top-Level Component The ChatThreadsComponent ChatThreadsComponent template The Single ChatThreadComponent ChatThreadComponent Controller and ngOnInit ChatThreadComponent template The ChatWindowComponent The ChatMessageComponent The ChatMessageComponent template The ChatNavBarComponent The ChatNavBarComponent @Component The ChatNavBarComponent template SummaryIntroduction to Redux with TypeScript
Redux Redux: Key Ideas Core Redux Ideas What’s a reducer? Defining Action and Reducer Interfaces Creating Our First Reducer Running Our First Reducer Adjusting the Counter With actions Reducer switch Action “Arguments” Storing Our State Using the Store Being Notified with subscribe The Core of Redux A Messaging App Messaging App state Messaging App actions Messaging App reducer Trying Out Our Actions Action Creators Using Real Redux Using Redux in Angular Planning Our App Setting Up Redux Defining the Application State Defining the Reducers Defining Action Creators Creating the Store Providing the Store Bootstrapping the App The AppComponent imports The template The constructor Putting It All Together What’s Next ReferencesIntermediate Redux in Angular
Context For This Chapter Chat App Overview Components Models Reducers Summary Implementing the Models User Thread Message App State A Word on Code Layout The Root Reducer The UsersState The ThreadsState Visualizing Our AppState Building the Reducers (and Action Creators) Set Current User Action Creators UsersReducer - Set Current User Thread and Messages Overview Adding a New Thread Action Creators Adding a New Thread Reducer Adding New Messages Action Creators Adding A New Message Reducer Selecting A Thread Action Creators Selecting A Thread Reducer Reducers Summary Building the Angular Chat App The top-level AppComponent The ChatPage Container vs. Presentational Components Building the ChatNavBarComponent Redux Selectors Threads Selectors Unread Messages Count Selector Building the ChatThreadsComponent ChatThreadsComponent Controller ChatThreadsComponent template The Single ChatThreadComponent ChatThreadComponent template Building the ChatWindowComponent The ChatMessageComponent Setting incoming The ChatMessageComponent template SummaryAdvanced Components
Styling View (Style) Encapsulation Shadow DOM Encapsulation No Encapsulation Creating a Popup - Referencing and Modifying Host Elements Popup Structure Using ElementRef Binding to the host Adding a Button using exportAs Creating a Message Pane with Content Projection Changing the Host’s CSS Using ng-content Querying Neighbor Directives - Writing Tabs ContentTabComponent ContentTabsetComponent Component Using the ContentTabsetComponent Lifecycle Hooks OnInit and OnDestroy OnChanges DoCheck AfterContentInit, AfterViewInit, AfterContentChecked and After-ViewChecked Advanced Templates Rewriting ngIf - ngBookIf Rewriting ngFor - NgBookFor Change Detection Customizing Change Detection Zones Observables and OnPush SummaryTesting
Test driven? End-to-end vs. Unit Testing Testing Tools Jasmine Karma Writing Unit Tests Angular Unit testing framework Setting Up Testing Testing Services and HTTP HTTP Considerations Stubs Mocks HttpClient HttpTestingController TestBed.configureTestingModule and Providers Testing getTrack Testing Routing to Components Creating a Router for Testing Mocking dependencies Spies Back to Testing Code fakeAsync and advance inject Testing ArtistComponent’s Initialization Testing ArtistComponent Methods Testing ArtistComponent DOM Template Values Testing Forms Creating a ConsoleSpy Installing the ConsoleSpy Configuring the Testing Module Testing The Form Refactoring Our Form Test Testing HTTP requests Testing a POST Testing DELETE Testing HTTP Headers Testing YouTubeSearchService ConclusionConverting an AngularJS 1.x App to Angular
Peripheral Concepts What We’re Building Mapping AngularJS 1 to Angular Requirements for Interoperability The AngularJS 1 App The ng1-app HTML Code Overview ng1: PinsService ng1: Configuring Routes ng1: HomeController ng1: / HomeController template ng1: pin Directive ng1: pin Directive template ng1: AddController ng1: AddController template ng1: Summary Building A Hybrid Hybrid Project Structure Bootstrapping our Hybrid App What We’ll Upgrade A Minor Detour: Typing Files Writing ng2 PinControlsComponent Using ng2 PinControlsComponent Downgrading ng2 PinControlsComponent to ng1 Adding Pins with ng2 Upgrading ng1 PinsService and $state to ng2 Writing ng2 AddPinComponent Using AddPinComponent Exposing an ng2 service to ng1 Writing the AnalyticsService Downgrade ng2 AnalyticsService to ng1 Using AnalyticsService in ng1 Summary ReferencesNativeScript: Mobile Applications for the Angular Developer
What is NativeScript? Where NativeScript Differs from Other Popular Frameworks What are the System and Development Requirements for NativeScript? Creating your First Mobile Application with NativeScript and Angular Adding Build Platforms for Cross Platform Deployment Building and Testing for Android and iOS Installing JavaScript, Android, and iOS Plugins and Packages Understanding the Web to NativeScript UI and UX Differences Planning the NativeScript Page Layout Adding UI Components to the Page Styling Components with CSS Developing a Geolocation Based Photo Application Creating a Fresh NativeScript Project Creating a Multiple Page Master-Detail Interface Creating a Flickr Service for Obtaining Photos and Data Creating a Service for Calculating Device Location and Distance Including Mapbox Functionality in the NativeScript Application Implementing the First Page of the Geolocation Application Implementing the Second Page of the Geolocation Application Try it out! NativeScript for Angular Developers
Comments (
)
<00>
<01>
<02>
<03>
<04>
<05>
<06>
<07>
<08>
<09>
<10>
<11>
<12>
<13>
<14>
<15>
<16>
<17>
<18>
<19>
<20>
<21>
<22>
<23>
Link to this page:
http://www.vb-net.com/AngularStart2/5.htm
<SITEMAP> <MVC> <ASP> <NET> <DATA> <KIOSK> <FLEX> <SQL> <NOTES> <LINUX> <MONO> <FREEWARE> <DOCS> <ENG> <CHAT ME> <ABOUT ME> < THANKS ME> |