Angular 2 Training

Angular 2 Training

  • Course Description
The Angular 2 training course is designed to teach developers how to use AngularJS to facilitate the development of the Single Page Applications. It provides the knowledge and skills required to become a successful Front-End full stack developer. It starts with the fundamental concepts of AngularJS like Directives, Filters, Controllers, Services and then move to the advanced concepts like Dependency Injection, Custom Services, Routing, Templates, TypeScript, REST Exposure and Angular2 features.

  • Course Objective

After the completion of this course, Trainee will:

  • Hands on experience of developing Single Page Applications using Angular
  • Creating custom directives and services required for complex applications
  • Working with Dependency Injection (DI)
  • Using AngularJS 2 features like pipes, templates, cross platform features
  • Exposure to RESTful web services
  • Understand how to use Node.JS, MongoDB (MEAN Stack)

  • Why learn and get certified in Angular 2?

  • AngularJS is a powerful JavaScript MVC framework developed and maintained by Google. Ever since its release, Angular ecosystem has grown beyond imagination with a growth rate of 1400%. It currently boasts the biggest community of developers and is most used JavaScript framework for developing Single Page Applications
  • With Angular 2.0 is a complete-rewrite with massive changes like internationalization, tight integration with ES6, TypeScript, comprehensive routing , mobile support and more
  • AngularJS is listed with more job opportunities compared to the other JavaScript framework. Average Salary of an Angular developer is $102,000 per year

  • Who should attend this training

AngularJS is one of the fastest growing client side technology and maintained by Google. There is an increasing demand for AngularJS professionals in the market. This professional course is ideally suited for:

  • Junior and Senior Front end/Web/Javascript Developers
  • MEAN Stack Developers
  • AngularJS 1.X Developers upgrading to newer Angular version
  • Technical Leads and Architects
  • Quality and Testing Professionals
  • Graduates aiming to build a career in Web or Front end Development

  • How will I perform the Practicals?

For practicing, completing the assignments and case studies provided in this training course for AngularJS 2, you will need the following tools. All these tools are Open source,

  • Editors – Sublime Text3, Brackets, Notepad++
  • Browsers – Google Chrome, Firefox, IE 9+
  • Apache Server – XAMPP Server

  • Pre-requisites

  • Moderate knowledge of HTML,CSS and JavaScript
  • The DOM ( Document Object Model
  • JavaScript functions, events, and error handling

Key features

  • 32 hours of instructor-led training
  • 5 simulation exams (250 questions each)
  • 8 domain-specific test papers (10 questions each)
  • 30 CPEs offered
  • 98.6% pass rate

Angular 2 Training                                                    Duration :- 4 Days

Day 1:

Introduction

Angular 2  V/S other popular JS frameworks

(Ext js/ Backbone / Ember /React)

Writing Our First Application:

  • Getting started  
  • TypeScript  
  • Example Project  
  • Angulars Dependencies                             
  • All Dependencies Loaded  
  • Adding CSS  
  • Our First TypeScript  
  • Making a Component   
  • Adding a template                                  
  • Booting Our Application   
  • Loading our Application   
  • Running The App                                                                    
  • Compiling the TypeScript Code to js                                                       
  • Using npm   
  • Serving The App   
  • Compiling on every change   
  • Adding Data to the Component                                  
  • Working with arrays   
  • Expanding our Application   
  • 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  

Introducing TypeScript :

  • Angular 2 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                                        

Angular Internals :

  • Application   
  • The Navigation Component   
  • The Breadcrumbs Component   
  • The Product List Component   
  • 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   
  • The ProductsList Component   
  • Configuring the ProductsList @Component Options   
  • Component inputs   
  • Component outputs   
  • Emitting Custom Events   
  • Writing the ProductsList Controller Class   
  • Writing the ProductsList View Template                       
  • The Full ProductsList Component    
  • The ProductRow Component    
  • ProductRow Component Configuration                                                
  • ProductRow Component Definition Class    
  • ProductRow template    
  • ProductRow Full Listing    
  • The ProductImage Component    
  • The PriceDisplay Component             
  • The ProductDepartment Component    
  • NgModule and Booting the App    
  • Booting the app                                                 
  • The Completed Project    
  • A Word on Data Architecture    

 Components Inbuilt :                                                                                 

  • Introduction    
  • NgIf                                                  
  • NgSwitch    
  • NgStyle    
  • NgClass    
  • NgFor    
  • Getting an index                                               
  • NgNonBindable

Day 2:

Working with Forms :

  • Forms are Crucial, Forms are Complex    
  • FormControls and FormGroups    
  • FormControl    
  • FormGroup    
  • Our First Form                                         
  • Loading the FormsModule    
  • Simple SKU Form: @Component Annotation    
  • 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    
  • Adding Validations                                                                             

Explicitly setting the sku FormControl as an instance variable                              

  • Custom Validations    
  • Watching For Changes                                   
  • ngModel

Working with HTTP Service:                                                                                                

  • Introduction                       
  • Using @angular/http    
  • import from @angular/http    
  • A Basic Request    

Building the SimpleHTTPComponent @Component                                              

  • Building the SimpleHTTPComponent template                           
  • Building the SimpleHTTPComponent Controller    
  • Full SimpleHTTPComponent    
  • Writing a YouTubeSearchComponent                                                        
  • Writing a SearchResult    
  • Writing the YouTubeService    
  • Writing the SearchBox    
  • Writing SearchResultComponent    
  • Writing YouTubeSearchComponent                           
  • @angular/http API    
  • Making a POST request    
  • PUT / PATCH / DELETE / HEAD                                                                
  • RequestOptions    

Working with Routes :                                                                                              

  • Why Do We Need Routing?    
  • How client-side routing works                                   
  • The beginning: using anchor tags    
  • The evolution: HTML client-side routing                                                    
  • Writing our first routes                                                                       
  • Components of Angular 2 routing    
  • Imports    
  • Routes    
  • Installing our Routes                                         
  • RouterOutlet using    
  • RouterLink using [routerLink]    
  • Putting it all together    
  • Creating the Components    
  • HomeComponent                                      
  • AboutComponent    
  • ContactComponent    
  • Application Component                                                                     
  • Configuring the Routes    
  • Routing Strategies             
  • Path location strategy    
  • 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    
  • ProductsComponent                                     

More on Dependency Injection:                                                                                  

  • Injections Example: PriceService    
  • Dependency Injection Parts    
  • Playing with an Injector    
  • Providing Dependencies with NgModule                                         
  • Providers    
  • Using a Class    
  • Using a Factory    
  • Using a Value    
  • Using an alias                                         
  • Dependency Injection in Apps    
  • Working with Injectors    
  • Substituting values    
  • NgModule    
  • NgModule vs JavaScript Modules                                                              
  • The Compiler and Components    
  • Dependency Injection and Providers    
  • Component Visibility                                                      
  • Specifying Providers

Day –3:

Data Architecture in Angular 2                                                                      

  • An Overview of Data Architecture    
  • Data Architecture in Angular 2                                                                 

Data Architecture with Observables –  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 UserService    
  • currentUser stream                                                         
  • Setting a new user    
  • UserService 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 currentThreadMessages)    
  • Our Completed ThreadsService    
  • Data Model Summary                                                                           

Data Architecture with Observables – : View Components                             

  • Building Our Views: The ChatApp Top-Level Component    
  • The ChatThreads Component    
  • ChatThreads Controller    
  • ChatThreads template    
  • The Single ChatThread Component                
  • ChatThread Controller and ngOnInit    
  • ChatThread template    
  • ChatThread Complete Code    
  • The ChatWindow Component    
  • The ChatMessage Component                              
  • Setting incoming    
  • The ChatMessage template    
  • The Complete ChatMessage Code Listing    
  • The ChatNavBar Component    
  • The ChatNavBar @Component    
  • The ChatNavBar Controller    
  • The ChatNavBar template    
  • The Completed ChatNavBar                             

Introduction to Redux with TypeScript                                                              

  • Redux    
  • Redux: Key Ideas    
  • Core Redux Ideas    
  • Whatis 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    
  • CounterApp Component                  
  • Providing the Store    
  • Bootstrapping the App    
  • The CounterComponent                                                              
  • imports    
  • The template    
  • The constructor    
  • Putting It All Together    

Using Redux with Angular                                                                        

  • 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 ChatApp    
  • The ChatPage    
  • Container vs Presentational Components                                                      
  • Building the ChatNavBar                             
  • Redux Selectors    
  • Threads Selectors    
  • Unread Messages Count Selector    
  • Building the ChatThreads Component    
  • ChatThreads Controller    
  • ChatThreads template    
  • The Single ChatThread Component    
  • ChatThread @Component and template    
  • Building the ChatWindow Component    
  • The ChatMessage Component    
  • Setting incoming    
  • The ChatMessage template                              

attribute 

Day –4:

Components – the next level :                                                                                

  • 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 Transclusion    
  • Changing the host CSS                                        
  • Using ng-content    
  • Querying Neighbor Directives – Writing Tabs    
  • Tab Component                                                                          
  • Tabset Component    
  • Using the Tabset    
  • Lifecycle Hooks    
  • OnInit and OnDestroy                                      
  • OnChanges    
  • DoCheck    
  • AfterContentInit, AfterViewInit, AfterContentChecked and AfterViewChecked    
  • Advanced Templates    
  • Rewriting ngIf               
  • Rewriting ngFor    
  • Change Detection    
  • Customizing Change Detection                                  
  • Zones    
  • Observables and OnPush    
  • Summary                                                                          

Testing our Application :                                                                                        

  • 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    
  • Http MockBackend    
  • 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 ArtistComponents 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 YouTubeService                                                  

Migrating an Angular 1 App to Angular  2    :                                                    

  • Peripheral Concepts    
  • What Weare Building    
  • Mapping Angular 1 to Angular 2    
  • Requirements for Interoperability                                    
  • The Angular 1 App    
  • The ng -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 Well 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
  • End.          

You can enroll for this classroom training online. Payments can be made using any of the following options and receipt of the same will be issued to the candidate automatically via email.

1. Online ,By deposit the mildain bank account

2. Pay by cash team training center location

Highly qualified and certified instructors with 20+ years of experience deliver more than 200+ classroom training.
Venue is finalized few weeks before the training and you will be informed via email. You can get in touch with our 24/7 support team for more details. Contact us Mob no:- 8447121833, Mail id: [email protected] . If you are looking for an instant support, you can chat with us too.
We provide transportation or refreshments along with the training.
Contact us using the form on the right of any page on the mildain website, or select the Live Chat link. Our customer service representatives will be able to give you more details.

Find This Training in Other Cities:-

Kolkata,Bangalore,Mumbai,Hyderabad,Pune ,Delhi,Chennai,

Drop Us A Query

Your Name (required)

Your Email (required)

Contact Number

Course

Location

Query

For Business

Corporate Training Solutions

  • Blended learning delivery model (self-paced eLearning and/or instructor-led options)
  • Course, category, and all-access pricing
  • Enterprise-class learning management system (LMS)
  • Enhanced reporting for individuals and teams
  • 24×7 teaching assistance and support

Any Enquiry contacts us:

Contact us 

good session..!!
will be useful to improve my technical Knowledge..
Parveen
The concepts of the Instructor was mind-blowing…Lots of Industry examples…Very well organized…
Ajay Nunna
“Nice session…!! enjoyed learning new things”
Gaurav
“Really good training. It helped me to clear a lot of doubts which were present in my mind for a long time.”
Raghav
“ The course content is very good and satisfactory. The trainer is also good with his teaching abilities.”
Sameer
“Apply the knowledge in understanding the new 11b framework setup in our system.
Apply the skill in day to day operational maintenance of our IT infrastrututre.”
Saleel

You can reach us for Following locations in India

noidadelhijaipur IndoreChennai HyderabadPuneBangalorechandigarhmumbai

Globally

usa ukAustraliaSingaporecanada