Projects in AngularJS - Learn by building 10 Projects

Build a basic Angular app for a fictional web design agency, demonstrating two-way binding, routing, and directives; set up plunker and fetch data with $http.

Design and implement a simple business website in AngularJS, creating index, about, services, and contact pages, loading location data from JSON, using Bootstrap templates and Plunker for in-browser hosting.

Discover how to implement an Angular app in Plunker, wiring Bootstrap resources, routing, and a main controller to load templates via ng-app and ng-route.

Configuring the main controller in Plunker AngularJS setup, we implement a template and view with ng-controller and ng-view, wire routes, and demonstrate scope binding to pass data to the template.

Create additional views for about, services, and contact, wire routes and controllers, and fetch services data with $http.get from a services.json file to display in the pages.

Learn to fetch data with http in AngularJS by dynamic rendering with ng-repeat, binding service data to the view via $http and scope, using JSON files or APIs.

build a simple web template store in AngularJS, listing templates with price and category, and include a PayPal button on the details page; learn AngularJS seed setup and fetching data.

learn how to bootstrap an angular seed project by cloning the repository, installing dependencies with npm, and configuring a templates store app with ngRoute and templates view.

Install bootstrap into an angular seed app using bouwer, link bootstrap assets, and enable ng-view to load templates on a bootstrap-based home page with a responsive grid.

Create and style template cards with bootstrap, implement a details view and navigation, and configure routes for templates; plan a json-driven list via a get request using the hgt service.

Fetch templates from a JSON file with $http, display them via ng-repeat with images and prices, and link to a detail view using the template id and currency formatting.

Build a functional AngularJS template store by displaying dynamic template details, creating an image gallery from template.images with a main image that updates on thumbnail click, and integrating PayPal.

Create a Facebook mobile app using the Graph API to authenticate, read the user’s wall, and post to it, covering app creation, UI, authentication, and posting workflows.

Learn to create a Facebook app by integrating the Facebook API with Angular using the Engy Facebook module, handle login, permissions, and display user data.

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.

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.

Learn to implement Facebook login in an AngularJS app by wiring the Facebook JS SDK, creating a login function, managing login status with scope, and handling permissions and cookies.

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.

Log in with Facebook to access user info, profile image, permissions, and posts, then display the picture and posts in an AngularJS app using me/picture, me/permissions, and me/posts.

Add login-gated posting to the ngi social app by hiding the post form until the user logs in. Post to Facebook Graph API /me/feed with the post body.

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.

Develop a mean stack job directory app with a back-end service and an Angular front end, enabling user registration, job posting, and CRUD operations for jobs.

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.

Design the frontend controller for AngularJS by configuring views, header, and a jobs module. Implement routes, menus, and services, and replace articles with jobs fields like company, description, and wage.

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.

Turn the jobs list into a bootstrap table and implement full CRUD for jobs. Link to individual job pages, use ng-repeat and ng-bind for details, and format dates.

Build a knowledge base article repository with Node.js and MongoDB. Develop the AngularJS front end, set up the backend API, routes, and views, and add, edit, delete articles.

Create a Node.js back end using Express and mongoose to power a knowledge base in MongoDB. Expose articles and categories as JSON via endpoints like /articles, /categories, with seeded data.

Build backend get routes for articles and categories using Node and Mongoose. Define article and category models with schemas, and support get articles, get by id, and get by category.

Implement backend get routes for articles and categories, including fetching by id and by category, wiring routes to return JSON articles and category data for the Angular frontend.

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.

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.

Instantiate the AngularJS app with ngRoute, configure routes for categories, articles, and details, connect templates and controllers, and create views with a default redirect to categories.

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.

Explore frontend data display in AngularJS by building article and category views, implementing truncated article bodies, category filtering, and a detailed article view with routing and actions.

Learn to create, edit, and delete articles in an AngularJS project by building a form connected to a controller, binding title, category, and body, and posting to /articles.

Deliver a complete angularjs article CRUD flow by adding, editing, reading, and deleting articles through controllers, views, and http requests, in a node-backed app.

Build a complete user authentication system with sign up, log in, and log out in an Angular app using the sales MVC framework on Node.

Create a full-stack registration and login system using Sails as the MVC back end, with MongoDB, RESTful APIs, and an Angular front end.

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.

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.

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.

Develop a backend login controller for an AngularJS project that finds a user by email, validates the password with machine passwords, and sets a session on success.

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.

Implement a dashboard in angularjs by fetching the current user from the session, displaying their name, email, avatar, and member since, and handling login redirects and errors.

Implement a server-side logout in your AngularJS project by adding a get /logout route that finds the logged-in user via session, clears the session, and redirects to the home page.

Switch the project from the default sales data to a MongoDB database on Mongul Lab, create a database and a user, and configure the app connection.

Build an Instagram gallery in AngularJS by fetching popular photos from the Instagram API, displaying photos with poster info, and adding a lightbox.

Build a Node.js server and Angular app that fetches popular Instagram images via the API, displays usernames and avatars in a photo gallery, and opens images in a Bootstrap lightbox.

Set up an angularjs app with routing, define the gallery route and its view, implement the gallery controller, and integrate the instagram service with bootstrap lightbox.

Build an Instagram service as an angular factory that fetches popular Instagram media via a public endpoint, then bind the data to a gallery with user details.

Add a lightbox to the AngularJS app by integrating the Bootstrap Lightbox, wiring ng-click to open the modal, and building an image array from Instagram data to navigate through images.

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.

Build a real-time chat app using PubNub's Angular module, with presence and storage to manage login, user lists, channels, and message history.

Build a dynamic AngularJS app interface with Yeoman and Bootstrap, using ng directives for channels and users and a toggleable create channel form.

Implement a join feature in an angularjs app by renaming the about controller to join, wiring routes, and building a login form with random username and PubNub angular integration.

Learn to configure the main controller in AngularJS, inject dependencies at the start, and manage channel creation, presence, and publish and subscribe flows with setTimeout initialization.

Implement the main controller final implementation to subscribe to channels, retrieve current users, handle message events and history, and enable the waiting room and publishing of messages.

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.

Build an auto finder app on the mean stack to search by make, model, and location, fetch and display cars, and add, update, and delete car records in MongoDB.

Explore building an automobile directory with mean.js, configuring development databases, and setting up a homepage search form. Filter by make, model, new/used, state, and location.

Convert the articles resource into a cars resource across client and server, updating modules, routes, models, controllers, and views to implement an initial cars API and UI.

Add the title, year, and price fields to the car model and wire them into the create form, edit view, and list view via the car controller and data-ng-model.

Learn final implementation of cars files in AngularJS, building a list and a detail view with bootstrap styling, routing to cars/:id, edit/delete actions, and a contact mailto link.

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 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 an image field to the car model on the backend and expose it in front-end forms. Enable image url input and uploading, and update create, edit, and list views.

Learn to implement a car search feature in AngularJS by adding a slash search route, wiring server and client controllers, and filtering results by type, make, model, and state.