Introduction to Angularjs [Around 30-45 Days]
Introduction to AngularJS
- What does AngularJS do for me?
- Who controls AngularJS?
- How can I get AngularJS?
Our first AngularJS application
- A basic application
- Using angular-seed
- The pieces of the puzzle
- How it fits together
- Model, View, Controller from the AngularJS Perspective
Single Page Applications
- What do we mean by Single Page Application?
- Creating Angular Modules
- Using Angular’s Routing Service
- Creating a Skeleton Single Page Application
Controllers
- Where Controllers fit in, and what they do, from Angular’s perspective
- Managing Scope
- Setting up Behavior
- Building a basic controller
- A more advanced controller
Models
- How to create a model
- Explicit models
- Implicit models
Views
- Angular’s take on the View: a little bit different
- Tying a View to a Controller
- Tying a View to a model
Expressions
- Expressions are lightweight code snippets
- Expression capabilities
- Limitations
- The border between expressions and $eval
Filters
- Standard filters
- Writing your own filter
- Tying filters together
Scopes
- What are scopes?
- What do scopes provide?
- Scope lifecycle
- Scopes as glue between controller and view
- Scope hierarchies
- Scope and events
Angularjs 2 Training Institute in Ahmedabad
1 – Introduction to Angular 2
- What is Angular 2?
- Central Features of the Angular Framework
- Why Angular?
- Scope and Goal of Angular
- Angular 2 vs. AngularJS
- Installing and Using Angular 2
- Adding Angular 2 and Dependencies to Your App
- Building Blocks of and Angular 2 Application
- Angular 2 – Environment
- Architecture
- Modules
2 – Introduction to TypeScript and ES6
- Programming Languages for Use with Angular
- TypeScript Syntax
- The Type System – Defining Variables
- The Type System – Defining Arrays
- The Type System – Classes & Objects
- Class Constructors
- Class Constructors – Alternate Form
- Interfaces
- Parameter and Return Value Types
- Working with Modules
- TypeScript Transpilation
- Arrow Functions
- Template Strings
- Template Strings – Variables and Expressions
- Template Strings – Multiline
- Generics – Class
3 – Components in Angular 2
- What is a Component?
- An Example Component
- Component Starter
- Developing a Simple Login Component
- Login Component: Add HTML
- The HTML Component Template
4 – Data and Event Binding
- Binding Syntax
- One-Way Output Binding
- Binding Displayed Output Values
- Two-Way Binding of Input Fields
- Input Binding Examples
- Binding Events
- Binding Events Examples
- Setting Element Properties
- Setting Properties: Examples
5 – Attribute Directives and Property Bindings
- What are Directives
- Directive Types
- Apply Styles by Changing Classes
- Changing Classes – Example
- Applying Styles Directly
- Applying Styles Directly – Example
- Obsolete Directives and Property Binding
- Controlling Element Visibility
- Setting Image Source Dynamically
- Setting Hyperlink Source Dynamically
6 – Structural Directives
- Structural Directives
- Adding and Removing Elements Dynamically
- Looping Using ngFor
- ngFor – Basic Syntax
- ngFor – Full Template Syntax
- Creating Tables with ngFor
- ngFor Local Variables
7 – Template Driven Forms
- Template Driven Forms
- Note on Deprecated Forms APIs
- A Basic Angular Form
- Binding Input Fields
- Accessing the Form Object
- Binding the Form Submit Event
- The Submit Function
- Basic HTML5 Validation – “required” Attribute
- HTML5 vs. Angular Validation
- Angular Validation
- Displaying Form Validation State
- Displaying Field Validation State
- Displaying Validation State Using Classes
- Disabling Submit when Form is Invalid
- Submitting the Form
- Binding to Object Variables
- Additional Input Types
- Checkboxes
- Select(drop down) Fields
- Rendering Options for Select (drop down)
- Date fields
- Radio Buttons
8 – Service and Dependency Injection
- What is a Service?
- Creating a Basic Service
- What is Dependency Injection?
- What Dependency Injection Looks Like
- Injecting Services
- Using a Service in a Component: Dedicated Instance
- Using onInit to Initialize Component Data
- Using a Shared Service Instance
- Dependency Injection
10 – Pipes and Data Formatting
- What are Pipes?
- More on Pipes
- Formatting Changes in Angular 2
- Using a Built-in Pipe
- Built-In Pipes
- Using Pipes in HTML
- Chaining Pipes
- Using Pipes in JavaScript
- Some Pipe Examples
- Decimal Pipe
- CurrencyPipe
- Custom Pipes
11 – Introduction to Single Page Application
- What is a Single Page Application (SPA)
- SPA Workflow
- Traditional Web Application Capabilities
- Single Page Application Advantages
- SPA and Traditional Web Sites
- SPA Challanges
- Implementing SPA’s Using Angular 2
- Simple SPA Using Visibility Control
- SPA Using Angular Components
- SPA with Angular Components – Switching
- SPA with Angular Components – The Displayed Component
- Implement SPA Using an Angular Component Router
ANGULAR JS 4.0
Difference between Angular-1.X and Angular -4.0
Understanding component architecture
Dependency injection design pattern
NG SET UP
- Initializing Angular CLI.
- Initializing Web page.
- Set up VS code.
- Adding required templates to VS code.
- Set up GIT LAB
CREATING ANGULAR APPLICATION
- Understanding setup files
- Understanding Architecture of Application
- Building Hello World
CREATING THE GATHERING PROJECT REQUIREMENT
BUILDING THE COMPONENT
- Understanding the decorators
- Understanding the Selectors
- Understanding the Providers
- Referring the Component in the Application
- Adding Component to the module
BUILDING THE MODULE
- Understanding NG Module
- Declarations
- Imports
- Exports
- Providers
REFERRING A MODULE IN ANOTHER MODULE
COMPONENT LIFE CYCLE
- Understanding Component life cycle Hooks
- Understanding various Interfaces
- Consuming classes in component
- Consuming Interfaces in Component
- Consuming Component in a component
RX JS – REACTIVE PROGRAMING
- Understanding what is reactive programming
- What are Observables
- What is a Subject
- Map Method
WORKING WITH RXJS WITH ANGULAR 4.0
REST API CALLS
- HTTP Calls with Observables
- Error handling
- Streaming
- Integrating with third party API”s
BUILD IN DIRECTIVES
- * ngFor
- * ngIf , Else
- Show and hide elements
- Rendering Images in Angular 4.0
- Rendering Tables in Angular 4.0
PROVIDERS
- How to Use Providers
- Communicate with Component
- Working with RXJS in Providers
CREATING PIPES
- Understanding Build in pipes
- Creating Custom pipes
ADVANCES ANGULAR 4.0
- Working with Routing
- Authenticating and Authorization
- Component to component communication
- Understanding input output methods
- Understanding Subjects
- Understanding Event emitters
SETTING UP REVERSE PROXY WITH WEBSERVER
- Page nation
- Calendar