Tweet real-time web application – Frontend Development

MEAN – Members Tweet real-time web application – Frontend Development

Our Quick First step to initiate our static directory path into server.js file.

Now as we are working on Angular JS, I am here rearranging the location of my index.html file.
So create new directory “app” under your public directory and move the “views” directory into that.
so now you index.html file at public/app/views/index.html

don’t forgot to correct your path in your server.js file

Now create app.js file under your public/app/ directory that will init our Angular module.

Our index.html

You can test from browser by running server from powershell “node server.js” and URL : http://localhost:3000

Next step to create Angular service called “authService” to verify login,set token, logout remove token and get member login information
public\app\services\authService.js

Creating our first controller public\app\controllers\mainCtrl.js

READ MORE  What is Single-page Applications(SPA) ?

Need to define our routes
Include the all angular modules and angular routes CDN js path to your index.html like here

Add your modules dependencies to app.js file

prepare your rendering div under body tag

create our route file at public\app\app.routes.js

crete your home tempalte at app/views/pages/home.html

create your login template app/views/pages/login.html

Now we are going to build our sign up services, controller and template file.
First step don’t forget to include service file our main index.html

Also in your app.js file

public\app\services\memberService.js

public\app\controllers\memberCtrl.js

Updating your header and navigation logic in your main index.html file

Build you signup.html file at public\app\views\pages\signup.html

Define your sign up template route in public\app\app.routes.js

Next we modified some code to keep checking if header have token or not at file public\app\app.js

So now everything works fine here for us signup and login, If not for you just connect with me with your issue.

Finally we are going to work for real time tweets from users, so Let’s create tweet service and controllers.
public\app\app.js

public\app\views\index.html

READ MORE  MEAN - Members Tweet real-time web application - Backend Development

public\app\services\tweetService.js

public\app\controllers\tweetCtrl.js

public\app\views\pages\home.html

Now adding real time capbility into the posting tweet, Let’s install socket dependencies into our package.json file

Include the socket.io js file into public\app\views\index.html

Now you have to add them as require with your server.js file and do some variable amendments like i suggesting below.
\server.js

app\routes\api.js

Create a socketio factory public\app\services\tweetService.js
public\app\controllers\tweetCtrl.js

All Tweets Dashboard

Create Reverse Directive to show the data to latest one.
public\app\directives\reverse.js

Don’t forget to include directive to you app.js file and index.html page

Hope, you enjoy the tutorial and make your working application, if not contact to me.

Leave a Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

powered by proof factor - increase conversions with social proof notifications
Share via
Copy link
Powered by Social Snap