How to implement social media into your web using Angular ?
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11 students enrolled
Wishlisted Wishlist

Please confirm that you want to add How to implement social media into your web using Angular ? to your Wishlist.

Add to Wishlist

How to implement social media into your web using Angular ?

A practical guideline how to implement YouTube and Instagram API into your website with a user social media profile.
0.0 (0 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
11 students enrolled
Last updated 5/2017
English
Curiosity Sale
Current price: $10 Original price: $50 Discount: 80% off
30-Day Money-Back Guarantee
Includes:
  • 4 hours on-demand video
  • 28 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • write code using angular.js
  • enhance javascript knowledge with emphasis on Object Oriented Programming
  • implementing social media API to display on your portfolio website
  • getting to know the Local Storage as an alternative to Database Storage
  • step by step project ready to use on-line
View Curriculum
Requirements
  • basics of javascript.
  • some html knowledge
  • basics of css and css3 animation
Description

In this course You will learn how to make a use of YouTube and Instagram API.   But what it API ? 

 An API is a list of commands that one program can send to another.In this case a browser sends You information from social media database. In our example You tube API will send information about your playlists,channels and a general  YouTube profile as name, email etc. Instagram will sent information about the photographs You uploaded. Our Application will allow to excess above information and display them on your private website. If you a blogger, designer or you just You run your website for business purposes, your potential buyer does not need to go to your Youtube or Instagram Channel the media will be already there, ready to be explored. This feature gives an extra wow factor to you website for sure ! With simple steps I will walk You through that process.This projects will use Angular as main programming library. Happy coding ! 

Who is the target audience?
  • front-end developers
  • graphic design students
  • self-tough web programmes that want to step into market
  • junior programmes that need to progress in career
  • Angular Learners
Students Who Viewed This Course Also Viewed
Curriculum For This Course
36 Lectures
03:54:09
+
Introduction
1 Lecture 02:45
+
Bootstrapping, routing and project structure the angular way
10 Lectures 52:31
What do we need to start ?
02:12

Project structure
05:44

Implementing Bootstrap CSS Library
04:37


Adding angular routes via ui-router
07:13

Creating user login and sign up form in Bootswatch template
03:15

Logic behind ng-controller setup
06:56

Introducing Angular animation via ng-animate
03:39

Limit animation to the specific routes
03:24

+
Creating a user and storing data in HTML5 Local Storage
7 Lectures 48:38
what is Local Storage ?
02:20

Angular providers. Service v Factory
04:10

User setup in Angular Service
10:43


User database check with Angular promise
10:19

User validation interface via custom bootstrap messages
04:30

User authentication process debugging and testing
08:32
+
How to use youtube API to display playlist and youtube player ?
10 Lectures 01:05:26
What is Angular Directive ?
06:07

Directive transclusion and its scope
06:07

Getting Youtube API credentials
02:51


GET request for youtube API playlist
07:00

Link API results to the Angular Controller
07:26

Display API results in custom template
07:52

ng-click assigned to playlist videos and video autoplay
04:10

Global user with youtube playlist assigned
07:30

Default player setup with specific playlists (debugging and testing)
07:42
+
How to use Instagram API to display images in template?
5 Lectures 40:44
Requesting Instagram API credentials
04:24

Setting Instagram API in a Directive
06:47

Instagram API results link to Directive Controller
08:42

A short task...

In the video I mentioned that we are going to assign a default Instagram profile for our application so even if no one is logged in , the application will still display Instagram profile. Try come up with the solution, I will give a hint , We already did that for youtube in previous chapter. Please refer to the video 'Global user with youtube playlist assigned'. Happy coding !

Preview 10:46

Instagram public key linked to client ID
10:05
+
Background-Changer in Angular Directive (additional)
3 Lectures 24:05
Background-changer directive setup
09:48

Background-changer directive code and testing
11:51

About the Instructor
Senior front-end Developer Greg Gil
0.0 Average rating
0 Reviews
11 Students
1 Course
Senior front-end Developer in London

Hello I am Greg, a senior front-end Developer working for Avid Global Media which is part of f Dentsu Aegis Network. I have over 10 years experience working with Web Technologies and  graphics as well. I am an expert  in native content advertising using all sort of technologies with Angular and React as main choice for front-end support. I am a head of front-end Department. I have to admit I do love my job !