AngularJS is an open-source JavaScript framework created by Google, which is called as Single Page Applications (SPA). It should be an extension of standard HTML attributes with Directives. It fixes data to HTML with Expressions. It is a Superheroic JavaScript MVC (Model-View-Controller) structure. Angular JS will handle common web development tasks like routing, HTTP requests, testing, and animations. First AngularJS inspects the HTML page with custom HTML Tags. Then besides the labels, interacts with the AngularJS library to make Rich Internet Applications.
Course outline
AngularJS is one of the most popular Javascript framework used in front-end development. By registering for this course, you will learn how to setup, build and deploy AngularJS applications in addition to having a deep understanding on dependency injection, custom directives, custom filters and isolate scopes in directives.
Note: The topics covered in this course might get slightly adjusted depending on the cumulative decision made by the candidates who have signed up for the course.
Target Audience
Developers who are using AngularJS 1.0 and would like to learn about the upgraded features, web developers, front-end developers, mobile app developers, students
Pre-requisites
We expect candidates to have basic knowledge in using REST APIs, either through POSTMAN or a command-line interface.
-
Getting Started
IntroductionWhat is in AngularJSCreating an AngularJS ProjectEditing our First AppUnderstanding the Project StructureWhy TypeScript. What is TypeScript -
Components, Templates & Databinding
Getting Started with ComponentsHow an Angular JS App gets startedUnderstanding App ModulesUsing Templates & StylesFirst SummaryCreating a new ComponentAbout Unique SelectorsUsing multiple ComponentsView Encapsulation and StylingInserting Content with ng-contentDatabinding OverviewString InterpolationProperty Binding & Event Binding OverviewProperty BindingBinding to Custom PropertiesEvent BindingBinding to Custom EventsTwo-Way Binding -
Directives
What are DirectivesAttribute DirectivesBuilding a Custom Attribute DirectiveElement Interaction with HostListener & HostBindingDirective Property BindingngIfngForngSwitch -
Services & Dependency Injection
What are ServicesExample – Logging ServiceWhat is Dependency InjectionExample – Injecting the Logging ServiceServices & App ModulesMultiple Instances vs One InstanceUsing NgModules -
Routing
Introduction to the Angular JS RouterSetting up RoutesLoading RoutesNavigation with LinksUnderstanding Navigation PathsImperative Routing (Triggered in Code)Route ParametersExtracting Route ParametersQuery ParametersExtracting Query ParametersQuery Parameters and the routerLink DirectiveChild RoutesRedirecting RequestStyling Active Route LinksUsing Guards with AppModulesGuards – CanActivateGuards – CanDeactivate -
Forms
Introduction to Forms in Angular JSApproach BasicsRegistering ControlsSubmitting a Form and Using the OutputForm PropertiesInput ValidationForm State & CSS ClassesDefault Values with ngModelTwo-Way Binding with ngModelForm GroupsRadio Button ControlsUsing the Form State, Providing a better UXIntro The Data-Driven Approach -
Pipes
What are PipesUsing PipesParametrizing PipesPipe DocumentationChaining PipesCustom Pipes -
Http
Http & ObservablesRequired Adjustments in this ModuleDemo Data Source – Firebase SetupSending a GET RequestUsing NgModulesThe Power of Observables Operators – Map (ping Data)Sending a POST RequestRetrieving and Transforming Data with Observables -
Deploying an Angular JS Application
IntroNew Project StructureWhat to DeploySetting up an App for DeploymentDeploying to Github Pages with the Angular JS CLIDeploying to Github Pages Manually -
Angular JS CLI
IntroInstallationNew Project – ng new and ng initBuilding your Project – ng build & ng serveUnderstanding the Project StructureLinting your Code – ng lintUnit Tests – ng testManaging Project Content – ng generate & ng destroyPutting it into Production – ng build and ng github-pagesLearning More – ng –help and Wrap Up -
Example Project & Workflow Setup
IntroDependencies & TypingsApp Setup & TsconfigGulpBasic App Code