Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Projects in AngularJS - Learn by building 10 Projects

Learn professional web development in AngularJS while building ten unique web apps

Created byEduonix Learning Solutions, Eduonix-Tech .

Last updated 12/2018

English

What you'll learn

Build Angular JS Apps and Websites
Implement JS concepts learned during the course
Build professional websites using cutting edge Angular JS techniques
Learn professional web development using Angular JS
Get royalty free apps to build money making websites

Course content

11 sections • 72 lectures • 13h 22m total length

Introduction3:58

Project Intro0:55
Create Facebook App12:09
Facebook App UI18:47
Learn to graft a bootstrap UI into an Angular seed app using Bouwer, update index, include bootstrap CSS, and craft layout with login, user info, and status update form.
Facebook Login - Initial Design10:39
Rename the app to ngi social, set up an Angular Facebook module with routes and a controller, and load the sdk with app id and permissions.
Facebook Login - Implementation11:59
Display User Info & Posts - Implementation Steps10:05
Implement a refresh function to fetch user data from Facebook, including name and email, manage login state, and update the welcome message and user UI.
Display User Info & Posts - Final View12:40
Posting From ngSocial8:04
Chapter 4 Quiz

Project Intro0:53
Launch a job directory project using the mean stack, building a backend API with Express and MongoDB, and developing front end controllers and views with Angular and Node.js.
Implementing the MEAN Stack14:27
Backend Job API Setup16:42
Set up a backend job API by mirroring the articles endpoints, implementing create, read, update, and delete with mongoose, and wiring Angular to consume the JSON.
Frontend Controller - Design11:13
Frontend Controller - Final Implementation9:36
Create a job form in the AngularJS frontend, wire the controller to post new jobs with title, company, description, requirements, wage, state, and contact email, and save to MongoDB.
Frontend Views16:25
Chapter 5 Quiz

Project Intro0:58
NodeJS & MongoDB Setup12:28
Backend GET Routes - Design13:00
Backend GET Routes - Implementation13:21
Backend POST Routes14:21
Learn to implement backend post routes for creating, updating, and deleting articles, wire them to an Angular app, and persist changes via the article model's save and remove methods.
Angular Routes & Views12:03
Explore building the angular front end by configuring routes and views, installing angular and bootstrap with bouwer, editing index.html, and wiring controllers to create a knowledge base page.
Angular Routes & Views - Final Steps11:47
Frontend Data Display - Basic Design13:24
Fetch categories and latest articles with $http.get and bind them to the scope. Display lists with ng-repeat and Bootstrap, linking to category pages and article details.
Frontend Data Display - Final views14:36
Add, Edit & Delete Articles - Initial Steps11:55
Add, Edit & Delete Articles - Final Points12:29
Chapter 6 Quiz

Project Intro1:28
Sails Server Setup20:04
Create a full-stack registration and login system using Sails as the MVC back end, with MongoDB, RESTful APIs, and an Angular front end.
Frontend Signup19:51
Develop a functional sign-up view in AngularJS by wiring ng-app, ng-controller, ng-model, and ng-submit, implementing a post request to the sign-up endpoint with form validation and styling via Foundation.
Backend Signup19:22
Build the backend signup flow in an Angular app by wiring a post signup route to the user controller, encrypting passwords, and using Gravatar via email for account creation.
Frontend Login17:44
Build an AngularJS frontend login module and controller that mirrors the sign-up flow, add a login view and routes, and submit login with HTTP put and toaster notifications.
Backend Login Controller12:49
Dashboard Design14:17
Create a dashboard view loaded after a successful login, with a navigation bar and a /dashboard route, then guard access via a back-end login check and session handling.
Dashboard Implementation13:14
Logging Out5:24
Switching to MongoDB5:37
Chapter 7 Quiz

Project Intro1:08
Build a real-time chat app with Angular and a data streaming API. Cover join and main controllers, channel access, and Yeoman scaffolding to fetch messages from a channel.
Create App With Yeoman - Initial Steps12:09
Build a real-time chat app using PubNub's Angular module, with presence and storage to manage login, user lists, channels, and message history.
Create App With Yeoman - Implementation9:10
Join Controller19:50
Main Controller12:03
Main Controller - Final implementation9:31
Adding Page Functionality9:59
Add page functionality to display dynamic data and the user name from root scope, and enable real-time chat with channels, users, and publish messages.
Chapter 9 Quiz

Project Intro1:01
MeanJS & Homepage Setup19:42
Creating the Cars Files - Initial Implementation14:40
Creating the Cars Files - Heavy Lifting10:11
Creating the Cars Files - Final Implementation12:24
Fetch & Displaying Cars - View Design11:23
Build a working API with MongoDB by creating a cards collection, inserting sample cars, and fetch and display them in an AngularJS view via the /cars endpoint using ng-repeat.
Fetch & Displaying Cars - View Implementation11:30
Fetch and display cars with a view implementation by car id for a dynamic detail page. Prepare the home page to render car cards and plan an image upload form.
Add, Update & Delete Cars - Design11:40
Add, Update & Delete Cars - Implementation10:14
Car Search Functionality18:07
Chapter 10 Quiz

Requirements

Basic knowledge of HTML, CSS and JS is must for the course

Description

PLEASE NOTE THIS COURSE TEACHES ANGULAR 1. IF YOU WANT TO LEARN THE LATEST VERSION ANGULAR 2YOU CAN CHECK OUR COURSE "Learn Angular 2 Development By Building 12 Apps"

THIS COURSE IS GOOD FOR ANYONE WHO NEEDS TO MAINTAIN ANGULAR 1 CODE.

The most comprehensive AngularJS training program is here. We love this amazingly powerful framework for web apps and we promise you will love this course. By the end of it you will understand the concepts behind Angular design and will be able to create you own websites and apps. AngularJS was initially released in 2009 and it has been growing rapidly ever since. If you want to be a web developer you must learn AngularJS and with time it is going to be as essential as HTML. Our Angular course will focus on important features such as decoupling DOM manipulation and to decouple client side from the server side implementation in web apps.

So why use AngularJS?

• AngularJS uses directives to add new mark-ups to HTML and turns static HTML files in to something dynamic. It is an innovative approach to incorporating HTML and developing big web applications.

• AngularJS organizes views, controllers, directives, filters and such other elements in to separate modules. This division becomes convenient for building and managing an application.

• AngularJS has a built-in dependency injection system and is unit-testable.

• AngularJS uses data-binding directives to provide a projection of the model to the application view. It automates synchronization of data between model and view components. This allows developers to avoid writing a considerable amount of boilerplate code.

• AngularJS has a built-in template engine consisting of plain HTML pages (views) as well as controllers written in JavaScript to build rich user interfaces.

• AngularJS uses directives to extend HTML dialect by creating new HTML elements and attributes as well as custom HTML tags that work as new widgets.

The Projects Developed for the Course includes:

Basic Angular Website

Learn to create Angular Websites and concepts such as two way binding, url routing and directives

Web Template Store

Learn creation of store based Apps with the project. Implement payment using paypal

myContactsApp

A complete CRUD application in Angular JS. Learn the use of Firebase API

ngSocialApp

Learn to use facebook APIs with Angular JS. The App uses facebook's graph API to authenticate the users

Job Directory

A complete MEAN stack project where user can post search and apply for jobs. There will also be login subscription feature.

Knowledgebase

Learn to build an Article repository with nodejs, MongoDB and Angular JS. It will teach you major aspects of both front end and backend programming using JS technologies.

User Authentication App

Learn to build a hybrid app. Learn the use of Sails framework for backend node server. learn professional web development techniques.

Intagram Gallery

Build a full fledged photo gallery application. Learn to integrate Instagram APIs

PubNub Chat

Build a real time chat application. Learn the use of PubNub data streaming API with Angular JS

All the above web apps have been selected to provide our students a complete walk through of Angular development environment. You can also use the source code for each project to build your own commercial apps completely royalty free. So join us now and start building the next awesome web app using AngularJS.

Who this course is for:

Students who want to build websites using Angular JS
Students looking to learn professional web development

Projects in AngularJS - Learn by building 10 Projects

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 4min

Basic Angular Website6 lectures • 1hr 6min

Web Template Store6 lectures • 1hr 2min

ngSocial Facebook App8 lectures • 1hr 25min

Job Directory6 lectures • 1hr 9min

KnowledgeBase11 lectures • 2hr 10min

User Authentication App10 lectures • 2hr 10min

Instagram Gallery5 lectures • 58min

PubNub Chat7 lectures • 1hr 14min

AutoFind10 lectures • 2hr 1min

Requirements

Description

Who this course is for: