![](https://coding-bootcamps.com/wp-content/uploads/2024/01/Learn-JavaScript-Angular-framework-by-examples.jpg)
Learn JavaScript Angular framework by examples
-
Free
-
-
About Course
In this self-paced course you learn how to build elegant front-end applications with JavaScript Angular framework.
The AngularJS course provides a thorough introduction to the Angular JavaScript Framework including coverage of its latest versions. You will learn the fundamental skills necessary to build Web Applications using Angular and the MVVM (Model-View-ViewModel) design pattern. Topics include using TypeScript and ECMAScript 6 to create components, using directives and components to define UI elements, routes and screens, applying dependency injection, designing views/templates, routing, data binding and pipes, applying directives, as well as form integration and validation. You will also use the Angular services to communicate with RESTful web services and provide CRUD database operations.
Learning Objectives
You will learn the following:
- Using TypeScript and ECMAScript 6 to create components
- Using directives and components to define UI elements, routes and screens
- Working effectively with component lifecycle events
- Injecting dependencies to lessen coupling and increase testability
- Unit testing Angular applications with Karma and Jasmine
- Using property binding to link DOM elements with model data
- Building Single Page Applications using Angular
- Integrating forms with Angular
- Organizing code using modules
- Communicating with RESTful Web services
Topics and Subtopics
The following outline is covered in this course:
Session 1: Getting started with Angular 2+
Section 1.1: Getting started with Angular 2 with node.js/expressjs backend (http example included)
Section 1.2: Install angular2 with angular-cli
Section 1.3: Getting started with Angular 2 without angular-cli
Section 1.4: Getting through that pesky company proxy
Section 1.5: Keeping Visual Studios in sync with NPM and NODE Updates
Section 1.6: Let’s dive into Angular 4!
Session 2: Components
Section 2.1: A simple component
Section 2.2: Templates & Styles
Section 2.3: Testing a Component
Section 2.4: Nesting components
Session 3: Component interactions
Section 3.1: Pass data from parent to child with input binding
Section 3.2: Parent – Child interaction using @Input & @Output properties
Section 3.3: Parent – Child interaction using ViewChild
Section 3.4: Bidirectional parent-child interaction through a service
Session 4: Directives
Section 4.1: *ngFor
Section 4.2: Attribute directive
Section 4.3: Component is a directive with template
Section 4.4: Structural directives
Section 4.5: Custom directive
Section 4.6: Copy to Clipboard directive
Section 4.7: Testing a custom directive
Session 5: Page title
Section 5.1: changing the page title
Session 6: Templates
Section 6.1: Angular 2 Templates
Session 7: Commonly built-in directives and services
Section 7.1: Location Class
Section 7.2: AsyncPipe
Section 7.3: Displaying current Angular 2 version used in your project
Section 7.4: Currency Pipe
Session 8: Directives & components : @Input @Output
Section 8.1: Angular 2 @Input and @Output in a nested component
Section 8.2: Input example
Section 8.3: Angular 2 @Input with asynchronous data
Session 9: Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.
Section 9.1: @HostBinding
Session 10: How to Use ngif
Section 10.1: To run a function at the start or end of *ngFor loop Using *ngIf
Section 10.2: Display a loading message
Section 10.3: Show Alert Message on a condition
Section 10.4: Use *ngIf with*ngFor
Session 11: How to use ngfor
Section 11.1: *ngFor with pipe
Section 11.2: Unordered list example
Section 11.3: More complext template example
Section 11.4: Tracking current interaction example
Section 11.5: Angular 2 aliased exported values
Requirements
Basic knowledge of HTML and CSS as well as good knowledge of JavaScript.
Related Courses
- Intro to React.JS Framework
- Vue.JS Framework
- Web Design with WordPress
- Intro to Joomla CMS
- Introduction to Drupal CMS
- Web Design with Bootstrap
Complete Training Bundle
If you are serious about learning web design and development, you should enroll in Coding Bootcamps school Web Design and Development Training Bundle. This bundle covers all essential and practical topics related to web development. For $290 monthly subscription, you can have access to 300+ hours of hands-on project-based training covering all courses related to web development like JavaScript, PHP, JavaScript frameworks like React or Angular and many more. Click here to learn more.
Private Tutoring Classes
To take skills you learn from this course to the next level, taking the following tutoring classes are highly recommended. It is also a great opportunity to discuss your questions and problems related to this course with an experienced instructor:
- Web design and development tutoring sessions- Weekly and monthly plans
- Angular JS framework- Private tutoring sessions
What Is Next?
After finishing this course, you can enroll in any of following classes:
- Learn Node.JS, Express.JS and MongoDB
- Learn PHP Programming
- Intro to PHP OOP
- Web Development with PHP & MySQL
- User Experience Best Practices
- Intro to Search Engine Optimization
Recommended Free Courses
If you are new to the IT or programming, we suggest the following free courses: