Welcome to Front-End JavaScript Frameworks: Angular

Loading...

En provenance du cours de The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

500 notes

The Hong Kong University of Science and Technology

Front-End JavaScript Frameworks: Angular

500 notes

Cours 2 sur 5 dans Specialization Full Stack Web and Multiplatform Mobile App Development

This course concentrates mainly on Javascript based front-end frameworks, and in particular the Angular framework (Currently Ver. 4.x). This course will use Typescript for developing Angular application. Typescript features will be introduced in the context of Angular as part of the exercises. You will also get an introduction to the use of Angular Material and Angular Flex-Layout for responsive UI design. You will be introduced to various aspects of Angular including components, directives and services. You will learn about data binding, Angular router and its use for developing single-page applications. You will also learn about designing both template-driven forms and reactive forms. A quick introduction to Observables, reactive programming and RxJS in the context of Angular is included. You will then learn about Angular support for client-server communication and the use of REST API on the server side. You will use Restangular for communicating with a server supporting the REST API. A quick tour through Angular animation support and Angular testing rounds off the course. You must have either completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of front end web-UI frameworks to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript frameworks and the Angular framework - Be able to implement single page applications in Angular - Be able to use various Angular features including directives, components and services - Be able to implement a functional front-end web application using Angular - Be able to use Angular Material and Angular Flex-Layout for designing responsive Angular applications - Be able to use Observables and RxJS in the context of Angular applications

À partir de la leçon

Front-End JavaScript Frameworks Overview: Angular

In this module we get a quick introduction to front-end JavaScript frameworks, followed by an introduction to Angular. We will also learn about Angular components and their templates.

Welcome to Front-End JavaScript Frameworks: Angular11:33

How to Use the Learning Resources10:03

Rencontrer les enseignants

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

[MUSIC]

Welcome to this course on Front-End JavaScript Frameworks: Angular.

This is the second course in the specialization on full stack web and

multi-platform mobile applications.

This course deals with JavaScript frameworks, Angular in particular.

You must be wondering, is it Angular two, or is it Angular?

We will clarify that in the very first lesson on introduction to Angular

in this course.

I'm glad you decided to join this course.

And I hope you have fun going through this course.

Before you embark on this course,

I want to make sure that you have sufficient knowledge of HTML and CSS.

And also good working knowledge of JavaScript, especially ES 5 JavaScript.

Now, this course we'll be using Typescript as the language for

writing our Angular applications.

Now if you are wondering should I know Typescript and

should I know ES 2015+, the newer version of JavaScript?

Well, your mileage may vary.

My approach to learning these new languages is to use them and

then learn along the way.

So that is what we'll do in this course.

I won't explicitly introduce you to Typescript specifically in this course.

But instead as we write the code, I will illustrate various

features of Typescript in the context of Angular as you develop

the Angular application, in the exercises as part of this course.

Another point that I would strongly like to clarify at this stage

is that I look at web development and design as two parts.

The first part is the Web Design itself, the User Experience or

User Inferface Design, the Visual Design, the Prototyping, the colors,

graphics and animation.

And all those aspects of how a website or

even a mobile application should be designed.

Now there is the other aspect which is building and

deployment of web applications and mobile applications.

Now in this course, we will be concentrating more on building and

deployment of web applications.

If you are looking for the design aspect of web design and development,

then this is not the right course for you.

When I talk about that deployment, building, and

development of web applications, we are talking about learning skills

that are essential for translating a design into a working code.

So here, in this specialization, we have already learned about Bootstrap 4.

In this course, we will learn about Angular.

Then we'll learn about Ionic and NativeScript.

And then also Server-side development using Node and Node ecosystem.

So that is the concentration of this particular course.

So we are talking about real coding, rather than website design.

The other question that will arise in your mind is what exactly is full stack

web development?

If you have already taken the previous course,

I have introduced you to full stack web development.

If you haven't, the very first lesson in this

course would be a quick introduction to full stack web development.

And we will place this course in the context of full stack web development.

So that's why in the first course we covered Bootstrap 4,

in this course we're going to concentrate on Angular.

Then in the next course, we will look at Ionic and Cordova for

doing multiplied for mobile development.

Then we'll look at NativeScript in the fourth course.

And then finally, we will look at the server side development,

including both doing the business logic layer using the Node ecosystem.

And the data storage layer using MongoDB in this specialization.

This specific course, as you expect, concentrates on Angular.

You will be introduced to the various aspects of the Angular framework through

a set of exercises that build upon each other.

So it is a sequence of exercises where I will introduce various Angular concepts.

And then immediately show you how we apply these concepts in the context

of an Angular application that we will develop throughout this course.

Now along the way, when we designed Angular's views,

we will make use of Angular material, for doing the UI of our Angular components.

And we will do layouts using the Angular Flex-Layout in this course.

The alternative would be to use Bootstrap 4 that we have learned earlier.

But I figured that this course will also provide you

with an opportunity to learn yet another front end UI framework.

That is Angular Material and Angular Flex-Layout for

doing exactly the same things that we have done with Bootstrap 4.

So that way you learn two different ways of approaching the UI design

using either Bootstrap 4 or using Angular Material plus Angular Flex-Layout.

We'll also introduce you to TypeScript basics

through the exercises as we double up our Angular application.

The course itself will be organized into four modules.

The four modules are designed to correspond to four weeks of this course.

But of course, let me emphasize to you

that you don't need to be pressured by the deadlines that we have in this course.

You can take your own time to go through the course.

It is more important to understand each and every aspect of Angular.

If you need additional time, feel free to move to the next session of this course.

And then continue.

All the work that you have completed in one session will automatically be carried

over to the next session of the course.

So don't let the deadlines pressure you into hurrying to complete this course.

Now, having given that general idea,

let's look at what each of the four modules will cover in this course.

The very first module will introduce you to Full Stack Web Development,

the general idea and the big picture view.

Right after, we'll look at a brief overview of Git and Node.

If you have done the previous Bootstrap 4 course,

then you would have covered these two already in the previous course.

So then you can quickly skip to

the first lesson that introduces you to Angular, the introduction to Angular.

After the introduction to the Angular framework and then setting up our Angular

application using Angular material and Angular Flex-Layout.

Then we will move on to study more about angular components.

What is the role of Angular components in designing an Angular application and

designing the various views that'll be supported in your Angular application.

That should take you all the way to the very first assignment in this course.

The second module concentrates on Angular services,

routing, and single page applications.

We look at how the Angular feedback supports access to data and

how we can make use of services for accessing the data.

Furthermore, how we can make use of data in designing

our views for our various Angular components.

So that is where the data binding aspect comes into the picture.

Then we'll look at Angular routing and

how we can implement single page applications in Angular.

I'll explain to you what a single page application is and

then we will look at how we can design one using the Angular framework.

And that'll take you all the way to the second assignment in this course.

The third module concentrates on Angular forms.

Then we'll look at Angular Reactive Forms and

also how Angular and Reactive programming work together.

And how Angular leverages Reactive programming for

implementing various forms of support within the Angular application.

So we'll look at template driven forms, then we'll look at Angular Reactive forms,

then we'll look at how Angular supports promises.

And then also take a brief look at Reactive programming in RxJS in context

of how Angular leverages RxJS to support various features within the framework.

That'll take you all the way to the third assignment in this course.

The final module looks at Client-Server Communication.

How your Angular application can communicate with a server

that provides data that can be fetched from the server side and

then used to render the views within your Angular application.

Correspondingly, we'll also look at how any changes that you want to

make to the data can be reflected back to the server side,

from your Angular application.

We'll look at Angular and the HTTP module within Angular.

We'll look at how the REST API is leveraged for

designing your Angular application,

we'll also look at Animations and Directives in Angular.

In particular, attribute directives in Angular.

We will look at structure directives in the very first module.

We'll look at testing of Angular applications briefly, and then finally

look at how we will build and deploy our Angular application to a server.

And that should take you all the way to the final assignment in this course.

Along the way, we also have an honors track built into this course.

If you want to work on your own project using Angular,

then the honors track provides you with the opportunity to work

on your own project within this particular course.

So take a look at the honors track, and if that interests you, you can as well pursue

developing your own Angular project within the context of this course.

I hope you enjoy going through this course and learn Angular.

The last word which I will leave you with is be patient.

Angular requires a lot of patience to learn.

There will be a lot of concepts and

technologies that you will encounter as you go through this course.

Please don't hurry just to complete the course.

Take your own time to understand every single step before you finish this course.

I hope you enjoy taking this course.

[MUSIC]

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2018 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play