Giter Site home page Giter Site logo

cookie-chat's Introduction

Overview

Objective

ChatRoom

Build a simple chatroom using Angular, services, and the $http service

We're going to be dealing with a 'back-end' and now all of our data is going to persist. For Example when you refresh, the data will still be there.

We're going to be building a basic chatroom so by the end of class, you'll all be able to chat with each other. Here's what you'll be working towards (http://jaredbeauchamp.com/experiments/chatroom/index.html). You'll have to do some CSS magic to make it look that good, but feel free to get creative with the styling once you finish the core project.

alt text

The concepts this project will cover are

  1. Angular Services
  2. $http
  3. Injecting a service into a controller

Instructions

Clone and Dissect the Repo

  • Fork and clone this repository.
  • You should only touch mainCtrl.js and messageService.js, everything else is already set up for you
  • Although very convenient, because other parts of the application are already set for you, you need to understand what that code is doing in order to work with it.
  • Go and check out the index.html page. You'll notice that in the message-container class there's an ng-repeat looping over messages. This means that somehow, you need to have 'messages' on the scope. Each message should have a 'message' property.

Build your messageService

  • In Angular we use 'services' to outsource some of our heavy lifting. That's exactly what we're going to do with this app.
  • Open up messageService.js and read the instructions. The bigger picture is that this service is going to have two methods, getMessages and postMessage. getMessages will get the chats from our backend, and postMessage will be able to post new messages to the backend.

Tie in your Controller

  • Now that your messageService is finished, we somehow need a way to tie the data we're getting from messageService.getData to our scope to show in our view. This sounds like the perfect use case for a controller.
  • Open up mainCtrl.js and follow the instructions. The bigger picture here is that we're going to utilize the methods that we added to messageService to do some of the 'heavy' lifting, then just add what we get back from those methods to the $scope

Review

  • If all went well you should be able to open up your index.html page and chat with those who also finished. If you got this far, great job! Review angular promises and $http. They're fundamental to any apps built with Angular.

Additional HTTP calls

Add Some Flavor

  • Right now it just shows the message. The object you get back from the server also has a createdAt property. Change the UI to show the message, and what time it was created at in normal, human readable formats. The server also assigns each user a Cookie type. Change the UI to display which type of cookie each message came from.
  • Make the Chatroom filterable by message
  • Be able to order the chatroom by date posted
  • Make the styling look more...professional.

Contributions

If you see a problem or a typo, please fork, make the necessary changes, and create a pull request so we can review your changes and merge them into the master repo and branch.

Copyright

© DevMountain LLC, 2015. Unauthorized use and/or duplication of this material without express and written permission from DevMountain, LLC is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to DevMountain with appropriate and specific direction to the original content.

cookie-chat's People

Contributors

tylermcginnis avatar brackcarmony avatar cahlan avatar cameroneldongale avatar asbrettisay avatar jrobber avatar hathawayjess avatar skylersb avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.