Day 1 - TypeScript
Course Price$ 299.00
|1||Angular Introduction - Angular fundamentals, Typescript, Compilation||
Understanding about Angular fundamentals like What is Angular, why and where to use it. Along with Typescript concepts and syntax and how TS is compiled to JS to get executed on browser
|2||Angular Getting Started - Environment setup, Writing basic programs||
Understanding about how to start working with a very basic Angular application
|3||Components - Creating Components, styling components, Templates||
As components are the basic building blocks of angular, we'll cover the basic operations with components, such as creating and styling a component, passing template to a component
|4||Routing - SPA, Passing / Reading query strings, Route Guards||
In this module, you'll learn how to create single page applications using Angular by routing. Also, you'll learn how to pass values through query string and reading the values from wuery string on different components
|5||Component Life Cycle||
Will learn about various life cycle hooks where we can find ways of writing code for different purposes during a component life cycle
Will learn various ways using which one component can send the values to anouther component
|7||Forms - Create reaactive / template driven forms, Forms Validation||
We'll learn how to take data from users using reactive and template driven Forms and put validations for taking the valid data only.
You can initialize a select box with options on page load by using ng-init directive
AngularJS has several advantages in web development.
Automatic synchronization of data between the model and view components is referred as data binding in AngularJS. There are two ways for data binding
Advantages of using Angular.js as framework are
Templates are the rendered view with information from the controller and model. These can be a single file (like index.html) or multiple views in one page using "partials".
When the page is loaded in the browser, following things happen:
Next we tell what part of the HTML contains the AngularJS app. This done by adding the ng-app attribute to the root HTML element of the AngularJS app. You can either add it to html element or body element as shown below:
In order to build a high-performance application is the first foremost factor in the Web development industry. Also, building a powerful website with developer’s most loved language will always give the perfect platform to build highly functional sites. Angular is one of the top emerging and well-established framework.
Traditional-Web Application vs Single-page Application
If you recall our old days, whenever you request any web-page from the browser. For each and every request, the page reloads to display the data.
This model is called Traditional-Web Application (TWA). The main problem of the TWA model was that the page rendering process for each & every request was time-consuming and it eventually disrupted the user experience.
To overcome all these, Single-Page Application model was introduced in late 2002. SPA model resolved frequent reloading of the webpages for each and every request forwarded by the use of making a web application to respond faster than before.
So, what is the SPA model? Let us understand this in more detail.
In the SPA model, the client requests a URL, and then the complete page is loaded to the client’s browser. Now, this does not require page reloading.
Multi-national companies around the globe have their website based on SPA Model such as Google, Facebook, PayPal, etc.
Now that you have understood how Single Page Applications resolved the problem with TWA.
The execution of the app can also be determined by HTML. The developers directly define what they want, instead of scrutinizing the flow of the program and what gets loaded first. Angular takes into consideration all of the dependencies.
In numerous frameworks require the developer to split the application into MVC components. The developer has to further write a code to join them up.
MVC in Angular can be implemented easily and efficiently as it only requires the user to split the application into MVC components. Angular manages and takes care of the rest by serving as a pipeline that connects them.
Since we don’t need to write the code for the MVC pipeline, therefore the length and the complexity of our code decreases. Additionally, we define the view by using HTML, which proves to be concise. We also use data binding, which simply means that we do not have to put the data into the view manually. Filters, on the other hand, allow the user to manipulate data on the view level without changing the controllers.
The data models defined in Angular are POJO i.e. Plain Old Java Objects. They do not require functions such as getter and setter. Properties can be added or altered directly in addition to looping over objects and arrays.
AngularJS consists of a feature knows as Directives that allow the developer to build custom HTML tags that serve as new as well as custom widgets. Additionally, they can manipulate DOM attributes.
A built-in dependency injection subsystem is present in AngularJS. Dependency Injection can be defined as a software design pattern that deals with how the components get hold of their dependencies.
The AngularJS injector subsystem assists the developer in creating components, resolving their dependencies and providing them to the other components as requested.
Robust features such as Filters, Animations, Form Validation, API Client and Routing make AngularJS a powerful framework. These features enhance the web development and make it efficient and simple.
Filters in AngularJS allow the developer to format the data without changing the original format. Angular contains multiple filters to format data of different data types.