(MVC) MVC (2022)

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 Overview
Writing 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 Help
TypeScript
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 up
How 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 Architecture
Built-in Directives
Introduction
NgIf
NgSwitch
NgStyle
NgClass
NgFor
	Getting an index
NgNonBindable
Conclusion
Forms 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 Up
Dependency 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 Resources
HTTP
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
	Summary
Routing
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
Summary 
Data Architecture in Angular
An Overview of Data Architecture
	Data Architecture in Angular
Data 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 Summary
Data 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
Summary
Introduction 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
References
Intermediate 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
Summary
Advanced 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
Summary
Testing
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
Conclusion
Converting 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
References
NativeScript: 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>