Introduction to Angular covers everything you need to start developing with this next-generation web framework. Angular version 4 and above uses TypeScript to make single-page application development more accessible and powerful. You'll learn to use Angular Directives and create Angular Components and Services based on the Model-View-Controller architecture. The course teaches HTML Templates for defining views and connecting them with code using various binding approaches: output, two-way, event, and property bindings. You'll understand the benefits and challenges of single-page applications and how Angular Router addresses those challenges. The course also provides comprehensive TypeScript coverage, a programming language built on JavaScript specifically for creating Angular applications.
By completing this training, you'll be able to:
- Create single-page web applications using Angular's MVC pattern
- Understand how to write and organize Angular code effectively
- Build and design Angular View Components and Services
- Implement Angular output, two-way, event, and property bindings
- Use Angular Pipes to format data presentation
- Create and manage Angular Forms for user input
- Implement Angular Component Router for navigation
Prerequisites and Course Structure:
You should have a prior understanding of web development fundamentals, including HTML, CSS, and JavaScript. Basic programming experience in at least one language, such as HTML, C#, VB, VB.net, CSS, JavaScript, TypeScript, ASP, or ASP.net, is required. Prior experience with AngularJS or earlier Angular versions is not required. Lab exercises throughout the course provide essential, real-world, practical hands-on experience for each topic covered.
Course Content Outline:
Section 1: Introducing Angular
- Creating a simple Reddit clone application
- Understanding requirements and recommendations for Angular 4 applications
- Running applications and working with components
- Adding data to components
- Working with arrays in components
- Using the User Item Component
- Understanding Bootstrap initialization
- Working with the main Application Component
- Deploying applications to production
Section 2: How Angular Works
- Building applications and navigation components
- Using the Breadcrumbs Component
- Creating Product List Components
- Building a Product Model
- Using the Component Decorator
- Adding products to applications
- Understanding View and Controller separation
- Using the Product Row Component
- Creating image, display, and department product components
- Using NgModule and application bootstrapping
- Introducing data architecture concepts
Section 3: Built-In Directives
- Using the NgIf directive for conditional rendering
- Using the NgSwitch directive for multiple conditions
- Using the NgStyle directive for dynamic styling
- Using the NgClass directive for CSS class binding
- Using the NgFor directive and array indexing
- Using the NgNonBindable directive
Section 4: Forms in Angular
- Implementing forms in Angular applications
- Working with FormControl and FormGroups
- Loading the FormsModule for form support
- Using the FormBuilder service
- Understanding the reactive forms approach
- Adding form validation logic
- Using ngModel with forms for two-way binding
Section 5: Routing
- Determining when to use routing in applications
- How client-side routing works in single-page applications
- Writing routes in Angular
- Understanding the components of Angular routing
- Routing strategies and best practices
- Understanding route parameters
- Using router hooks for lifecycle management
- Nesting routes for hierarchical navigation
Section 6: Dependency Injection
- Using dependency injectors in Angular
- Understanding dependency injection components and parts
- Providing dependencies with NgModule
- Understanding class and factory providers
- Implementing dependency injection in applications
