#meanjs

The getting started with CleverStack video (via http://bit.ly/1YmDT4R)

MeanJS 1시간 체험후기

Dependencies 때문에 골머리를 썩긴했지만 설치를 완료하고 yeoman을 이용하여 설치하는 것 까진 좋았다.

설치를 끝내자 홈페이지 하나가 완성되어 있었다

bootstrap, jquery등등 여러가지 라이브러리가 포함되어 있을 뿐만 아니라 기본적인 네비게이션과 로그인, 회원가입(심지어 소셜-페이스북, 트위터, github, linkedin 로그인 기능)까지 구축이 되어 있었다

좋은데... yo 커맨드를 이용하면 CRUD 모델, 컨트롤러, 뷰, Route 등등 모두 명령어 하나로 구축 가능하다

그런데 아직 전체적인 구조를 몰라서 그런건지 틀이 너무 완벽하게 촘촘하게 짜여있어서 그런건지 모르겠지만 어떻게 커스터마이징을 해야할지 감이 잡히지 않았다

일반적인 게시판 구조의 웹사이트라면 이걸 쓰는게 좋을거 같다고 생각되었다

Before We Start:

We are going to use npm and mean.js. If you’re not already familiar with the MEAN stack or node.js, I suggest you take some time to catch up with this trendy and amazing platform for writing web applications. 

Installing socket.io:

Assuming you have already read the suggested article or have the mentioned packages installed on your machine, let’s fire up a terminal window and create a new Mean.js project by running the following command

$ mkdir awesome-realtime-app && cd $_ $ yo meanjs

The generator will ask you the following questions(I have included my answers below, feel free to write down yours instead). Make sure that you include the default article module though, we will bind our realtime feature with that module.

[?] What would you like to call your application? Awesome Realtime Application [?] How would you describe your application? Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js [?] How would you describe your application in comma seperated key words? MongoDB, Express, AngularJS, Node.js [?] What is your company/author name? VEXXHOST [?] Would you like to generate the article example CRUD module? Yes [?] Which AngularJS modules would you like to include? ngCookies, ngAnimate, ngTouch, ngSanitize

Now just run $ grunt and you should have the app running on your localhost through port 3000. Let’s include the awesome socket.io module from npm in our app. Run $ npm install socket.io --save, this will install the package and add this in our package.json file. 

Binding socket.io With Express:

To initiate the server side socket connection, we need to integrate it with express.js. Let’s start by opening up the file config/express.js in your favorite code editor and require the http and socket.io modules. I am adding this between line 6 and 7, right after the require of express – 

var express = require('express'), http = require('http'), socketio = require('socket.io'), .......

Now, let’s tie it up with the app instance so that we can access it from anywhere in our app by taking advantage of the circular dependency of express.js. Go to the end of the file and add the following code right before the line where it reads return app;-

// Attach Socket.io var server = http.createServer(app); var io = socketio.listen(server); app.set('socketio', io); app.set('server', server);

We are simply instantiating socket.io here and attaching our express server with it in the first 2 lines. In the next two, we are storing the socket.io and the server instance in our app container.

Easy, right? awesome! Just one more thing, open the server.js file in the root directory and find where it reads app.listen(config.port); and replace it with app.get('server').listen(config.port);. This will make sure we don’t mess up our http server instance of express.

That’s all. Now we get to use it in our app. We will do something simple, we will notify all connected clients when a new article is created. To keep our code clean and easily maintainable, we can modularize the socket transmission and abstract it into a factory and there are many other techniques but for now we will just place it in our controller.

Open up the article server controller, open up the file app/controllers/articles.server.controller.js and find the create method. This method gets called when a new article is created. After the article is saved and there is no error we can notify everyone about it. So the following block of code goes inside the else block and right before res.jsonp(article); – 

var socketio = req.app.get('socketio'); // tacke out socket instance from the app container socketio.sockets.emit('article.created', article); // emit an event for all connected clients

This first parameter in the emit method is an event name and the second parameter is the data that will get sent along with the event. That’s all our server needs to do.

Connecting socket.io With Angular:

So far, we have implemented socket.io on the server but that doesn’t mean it already works on the browser. We need to do that separately. We need listen for server emitted events from the browser.

We will use the angular component for Socket.io built by btford. We can take advantage of bower for that. Running $ bower install angular-socket-io --save will install it and add it in our bower.json file.

Next we will to create an angular factory that will handle our websocket connection on the browser. Create a new file public/modules/core/services/socket.js and place the following code in it – 

'use strict'; //socket factory that provides the socket service angular.module('core').factory('Socket', ['socketFactory', function(socketFactory) { return socketFactory({ prefix: '', ioSocket: io.connect('http://localhost:3000') }); } ]);

We are making this a part of the core module since we will want to use it across our app. Now we can use this socket connection inside our angular app. We forgot two vital things though, injecting the dependency and include necessary javascript files on our webpage. Open up the file app/views/layout.server.view.htmland add the following code before the closing </body> tag – 

<!-- Socket.io --> <script type="text/javascript" src="/socket.io/socket.io.js"></script> <script type="text/javascript" src="/lib/angular-socket-io/socket.min.js"></script>

Next up, dependency injection; Open the file public/config.js and append 'btford.socket-io' at the of the list of dependencies array variable named – var applicationModuleVendorDependencies.

That’s it, now we have socket.io integrated with our angular app. But that’s just integration, let’s see if it works. Open up public/modules/articles/controllers/article.client.controller.js and on line 3 and 4 insert the Socket dependency. It should look something like – 

angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Socket', 'Authentication', 'Articles', function($scope, $stateParams, $location, Socket, Authentication, Articles) {

We just added the 'Socket' in the list of arrays and Socket in the list of function parameters. Now, place the following code inside the controller – 

Socket.on('article.created', function(article) { console.log(article); });

Just started blogging, need to get focused and spend time productively. Recently started with freelancer So, far was able to complete all the things in time. Just accepted a big project need to clone a website. Thinking of to use MEAN stack for this as I have got some previous experience on that. lets see how far it goes. 

Following things are on top of the list

Building a videochat application using webrtc.

Using All best practices in building MEAN applications.

ID3 Reader and editor for node and GO

1. Install git from http://git-scm.com/download/win

2. Install bower 

npm install -g bower

3. Install grunt

npm install -g grunt-cli

4. Download meanjs.org boilterplate from its website

5. Update dependencies for project

npm install

6. Run sample