├── .bowerrc
├── app
    └── src
    │   ├── partials
    │       ├── user-detail.html
    │       ├── me.html
    │       ├── followers.html
    │       └── friends.html
    │   ├── controllers
    │       ├── FriendsCtrl.es6.js
    │       ├── UserDetailCtrl.es6.js
    │       ├── FollowersCtrl.es6.js
    │       ├── main.es6.js
    │       └── MainCtrl.es6.js
    │   ├── services
    │       ├── main.es6.js
    │       └── VkApiProvider.es6.js
    │   ├── directives
    │       ├── main.es6.js
    │       ├── UserItem.es6.js
    │       └── UserList.es6.js
    │   ├── components
    │       ├── UserList.es6.js
    │       └── UserItem.es6.js
    │   ├── animations
    │       └── main.es6.js
    │   └── app.es6.js
├── .gitignore
├── README.md
├── bower.json
├── package.json
├── index.html
└── gulpfile.js


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |     "directory": "vendors"
3 | }


--------------------------------------------------------------------------------
/app/src/partials/user-detail.html:
--------------------------------------------------------------------------------
1 | <h1>User profile</h1>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | *.iml
2 | .idea
3 | node_modules
4 | vendors
5 | app/dist


--------------------------------------------------------------------------------
/app/src/partials/me.html:
--------------------------------------------------------------------------------
1 | <div user-item ng-if="m.user" user="{{ m.user }}"></div>


--------------------------------------------------------------------------------
/app/src/partials/followers.html:
--------------------------------------------------------------------------------
1 | <div user-list ng-if="f.followers" users="{{ f.followers | limitTo:10 }}"></div>


--------------------------------------------------------------------------------
/app/src/controllers/FriendsCtrl.es6.js:
--------------------------------------------------------------------------------
1 | class FriendsCtrl {
2 |     constructor($scope, friends) {
3 |         var self = this;
4 |         self.$scope = $scope;
5 |         self.friends = friends;
6 |     }
7 | }
8 | 
9 | export default FriendsCtrl;


--------------------------------------------------------------------------------
/app/src/controllers/UserDetailCtrl.es6.js:
--------------------------------------------------------------------------------
1 | class UserDetailCtrl {
2 |     constructor($scope, user) {
3 |         var self = this;
4 |         self.$scope = $scope;
5 |         self.user = user;
6 |     }
7 | }
8 | 
9 | export default UserDetailCtrl;


--------------------------------------------------------------------------------
/app/src/controllers/FollowersCtrl.es6.js:
--------------------------------------------------------------------------------
1 | class FollowersCtrl {
2 |     constructor($scope, followers) {
3 |         var self = this;
4 |         self.$scope = $scope;
5 |         self.followers = followers;
6 |     }
7 | }
8 | 
9 | export default FollowersCtrl;


--------------------------------------------------------------------------------
/app/src/services/main.es6.js:
--------------------------------------------------------------------------------
1 | import * as angular from 'angular';
2 | import VkApiProvider from './VkApiProvider.es6';
3 | 
4 | angular.module('app.services', [])
5 |     .factory('VK', ['$window', $window => angular.isDefined($window.VK) ? $window.VK : null])
6 |     .provider('VKApi', VkApiProvider);


--------------------------------------------------------------------------------
/app/src/directives/main.es6.js:
--------------------------------------------------------------------------------
1 | import * as angular from 'angular';
2 | import UserItem from './UserItem.es6';
3 | import UserList from './UserList.es6';
4 | 
5 | angular.module('app.directives', [])
6 | 	   .directive('userItem', ['$timeout', UserItem])
7 | 	   .directive('userList', ['$timeout', UserList]);


--------------------------------------------------------------------------------
/app/src/components/UserList.es6.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @jsx React.DOM
 3 |  */
 4 | import * as React from 'react';
 5 | import UserItem from './UserItem.es6';
 6 | import { map } from 'lodash';
 7 | 
 8 | var UserList = React.createClass({
 9 | 
10 | 	render() {
11 | 		var userItems = map(this.props.users, user => <UserItem user={user}/>);
12 | 		
13 | 		return <ul className="list-group">{userItems}</ul>;
14 | 	}
15 | });
16 | 
17 | export default UserList;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ### This project use [Gulp](http://gulpjs.com), [Webpack](http://webpack.github.io), [6to5](https://github.com/sebmck/6to5), [ReactJS](http://facebook.github.io/react) and also ES6 features. It's just a very easy starterkit :D ###
2 | 
3 | ####You need execute several commands: ####
4 | - npm install or npm i
5 | - bower install or bower i
6 | - gulp or gulp webpack
7 | 
8 | ###[A new version with more better functional available here](https://github.com/xgrommx/angular-vk-app/tree/babel)


--------------------------------------------------------------------------------
/app/src/components/UserItem.es6.js:
--------------------------------------------------------------------------------
 1 | /**
 2 | * @jsx React.DOM
 3 | */
 4 | 
 5 | import * as React from 'react';
 6 | 
 7 | var UserItem = React.createClass({
 8 | 	render() {
 9 | 		return (<li className="list-group-item">
10 | 					<div>
11 | 						<a data-ng-href="#/friends/1"><img src={this.props.user.photo_big} /></a>
12 | 					</div>
13 |         			<div>{this.props.user.first_name}</div> 
14 |         			<div>{this.props.user.last_name}</div>
15 |     			</li>);
16 | 	}
17 | });
18 | 
19 | export default UserItem;


--------------------------------------------------------------------------------
/app/src/partials/friends.html:
--------------------------------------------------------------------------------
 1 | <!--<ul class="list-group">-->
 2 |     <!--<li class="list-group-item" ng-repeat="friend in f.friends">-->
 3 |         <!--<div>-->
 4 |             <!--<a ng-href="#/friends/detail/{{friend.uid}}"><img ng-src="{{friend.photo_big}}" /></a>-->
 5 |         <!--</div>-->
 6 |         <!--<div>{{friend.first_name}}</div>-->
 7 |         <!--<div>{{friend.last_name}}</div>-->
 8 |     <!--</li>-->
 9 | <!--</ul>-->
10 | <div user-list ng-if="f.friends" users="{{ f.friends | limitTo:10 }}"></div>


--------------------------------------------------------------------------------
/app/src/directives/UserItem.es6.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import UserItemComponent from '../components/UserItem.es6';
 3 | 
 4 | var UserItem = ($timeout) => ({
 5 | 	restrict: "AE",
 6 | 	scope: {
 7 | 		user: '@'
 8 | 	},
 9 | 	link: (scope, element, attributes) => {
10 |         attributes.$observe('user', user => {
11 |             $timeout(() => {
12 |                 React.renderComponent(UserItemComponent({user: angular.fromJson(user)}), element[0]);
13 |             }, 0);
14 |         });
15 | 	}
16 | });
17 | 
18 | 
19 | export default UserItem;


--------------------------------------------------------------------------------
/app/src/controllers/main.es6.js:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import MainCtrl from './MainCtrl.es6';
 3 | import FriendsCtrl from './FriendsCtrl.es6';
 4 | import FollowersCtrl from './FollowersCtrl.es6';
 5 | import UserDetailCtrl from './UserDetailCtrl.es6';
 6 | 
 7 | angular.module('app.controllers', []).controller({
 8 |     'MainCtrl': ['$scope', 'VKApi', MainCtrl],
 9 |     'FriendsCtrl': ['$scope', 'friends', FriendsCtrl],
10 |     'FollowersCtrl': ['$scope', 'followers', FollowersCtrl],
11 |     'UserDetailCtrl': ['$scope', 'user', UserDetailCtrl]
12 | });


--------------------------------------------------------------------------------
/app/src/directives/UserList.es6.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import UserItemComponent from '../components/UserItem.es6';
 3 | import UserListComponent from '../components/UserList.es6';
 4 | 
 5 | var UserList = ($timeout) => ({
 6 | 	restrict: "AE",
 7 | 	scope: {
 8 | 		users: '@'
 9 | 	},
10 | 	link: (scope, element, attributes) => {
11 | 		attributes.$observe('users', users => {
12 |             $timeout(() => {
13 |                 React.renderComponent(UserListComponent({users: angular.fromJson(users)}), element[0]);
14 |             }, 0);
15 |         });
16 | 	}
17 | });
18 | 
19 | 
20 | export default UserList;


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-vk-app",
 3 |   "version": "0.0.0",
 4 |   "homepage": "https://github.com/xgrommx/angular-vk-app",
 5 |   "authors": [
 6 |     "Denis Stoyanov <stoyanov.gr@email.com>"
 7 |   ],
 8 |   "license": "MIT",
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "app/vendors",
14 |     "test",
15 |     "tests"
16 |   ],
17 |   "dependencies": {
18 |     "angular": "latest",
19 |     "angular-ui-router": "latest",
20 |     "react": "latest",
21 |     "angular-animate": "latest",
22 |     "angular-messages": "latest",
23 |     "jquery": "latest",
24 |     "angular-breadcrumb": "latest"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/app/src/controllers/MainCtrl.es6.js:
--------------------------------------------------------------------------------
 1 | class MainCtrl {
 2 |     constructor($scope, VKApi) {
 3 |         var self = this;
 4 |         var fields = ['uid', 'first_name', 'last_name', 'nickname', 'sex',
 5 |             'birthdate', 'city', 'country', 'timezone', 'photo', 'photo_medium',
 6 |             'photo_big', 'domain', 'has_mobile', 'rate', 'contacts', 'education', 'online', 'counters'];
 7 | 
 8 |         self.$scope = $scope;
 9 |         self.VKApi = VKApi;
10 | 
11 |         VKApi.getUser(fields).then(user => {
12 |             self.user = user;
13 |             self.countFriends = user.counters.friends;
14 |             self.countFollowers = user.counters.followers;
15 |         });
16 |     }
17 | }
18 | 
19 | export default MainCtrl;


--------------------------------------------------------------------------------
/app/src/animations/main.es6.js:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import * as $ from 'jquery';
 3 | import 'angular-animate';
 4 | 
 5 | angular.module('app.animations', [])
 6 |        .animation('.view-animation', () => ({
 7 |             enter: (element, done) => {
 8 |                 $(element).css("display", "none");
 9 |                 $(element).fadeIn(2000, done);
10 | 
11 |                 return function() {
12 |                     $(element).stop();
13 |                 }
14 |             },
15 |             leave: (element, done) => {
16 |                 $(element).css("display", "none");
17 | 
18 |                 return function() {
19 |                     $(element).stop();
20 |                 }
21 |             }
22 |     }));


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-vk-app",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "main": "gulpfile.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "https://github.com/xgrommx/angular-vk-app.git"
12 |   },
13 |   "author": "",
14 |   "license": "ISC",
15 |   "bugs": {
16 |     "url": "https://github.com/xgrommx/angular-vk-app/issues"
17 |   },
18 |   "homepage": "https://github.com/xgrommx/angular-vk-app",
19 |   "dependencies": {
20 |     "lodash": "^2.4.1",
21 |     "rx": "latest",
22 |     "rx-angular": "latest"
23 |   },
24 |   "devDependencies": {
25 |     "6to5": "latest",
26 |     "6to5-loader": "latest",
27 |     "exports-loader": "latest",
28 |     "gulp": "latest",
29 |     "gulp-load-plugins": "latest",
30 |     "gulp-webpack": "latest",
31 |     "gulp-webserver": "latest",
32 |     "run-sequence": "latest",
33 |     "webpack": "latest"
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head lang="en">
 4 |     <meta charset="UTF-8">
 5 |     <title>AngularJS VK application</title>
 6 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 7 |     <script src="//vk.com/js/api/openapi.js"></script>
 8 |     <script src="./app/dist/bundle.js"></script>
 9 | </head>
10 | <body ng-app="app">
11 |     <div class="container" ng-controller="MainCtrl as m">
12 |         <div id="react-component"></div>
13 |         <div class="page-header">
14 |             <h1>AngularJS and VK api together <small>:D</small></h1>
15 |         </div>
16 |         <div class="col-md-3">
17 |             <div class="list-group">
18 |                 <a ui-sref="me" ui-sref-active="active" class="list-group-item active">
19 |                     My Profile
20 |                     <img ng-src="{{ ::m.user.photo }}" class="pull-right" style="width:20px;" />
21 |                 </a>
22 |                 <a ui-sref="friends" ui-sref-active="active" class="list-group-item"><span class="badge">{{ ::m.countFriends }}</span>Friends</a>
23 |                 <a ui-sref="followers" ui-sref-active="active" class="list-group-item"><span class="badge">{{ ::m.countFollowers }}</span>Followers</a>
24 |             </div>
25 |         </div>
26 |         <div class="col-md-9">
27 |             <div ncy-breadcrumb></div>
28 |             <div ui-view class="view-animation"></div>
29 |         </div>
30 |     </div>
31 | </body>
32 | </html>


--------------------------------------------------------------------------------
/app/src/app.es6.js:
--------------------------------------------------------------------------------
 1 | import * as angular from 'angular';
 2 | import 'angular-animate';
 3 | import 'ui-router';
 4 | import 'angular-breadcrumb';
 5 | 
 6 | import './controllers/main.es6';
 7 | import './services/main.es6';
 8 | import './directives/main.es6';
 9 | import './animations/main.es6';
10 | 
11 | var app = angular.module('app', ['ui.router', 'ncy-angular-breadcrumb', 'ngAnimate', 'app.controllers', 'app.services', 'app.directives', 'app.animations']);
12 | 
13 | app.constant('fields', ['uid', 'first_name', 'last_name', 'nickname', 'sex',
14 |     'birthdate', 'city', 'country', 'timezone', 'photo', 'photo_medium',
15 |     'photo_big', 'domain', 'has_mobile', 'rate', 'contacts', 'education', 'online', 'counters']);
16 | 
17 | app.config(['VKApiProvider', VKApiProvider => {
18 |     VKApiProvider.setSettings({
19 |         apiId: 4150267,
20 |         apiVersion: '5.10'
21 |     });
22 | }]).config(['$stateProvider', '$urlRouterProvider', 'fields', ($stateProvider, $urlRouterProvider, fields) => {
23 |     $urlRouterProvider.otherwise('/me');
24 | 
25 |     $stateProvider.state('me', {
26 |         url: '/me',
27 |         templateUrl: './app/src/partials/me.html',
28 |         data: {
29 |             ncyBreadcrumbLabel: 'Home page'
30 |         }
31 |     });
32 |     $stateProvider.state('friends', {
33 |         url: '/friends',
34 |         templateUrl: './app/src/partials/friends.html',
35 |         controller: 'FriendsCtrl as f',
36 |         resolve: {
37 |             friends: VKApi => VKApi.getFriends(fields)
38 |         },
39 |         data: {
40 |             ncyBreadcrumbLabel: 'Friends page'
41 |         }
42 |     });
43 |     $stateProvider.state('followers', {
44 |         url: '/followers',
45 |         templateUrl: './app/src/partials/followers.html',
46 |         controller: 'FollowersCtrl as f',
47 |         resolve: {
48 |             followers: VKApi => VKApi.getFollowers().then(response => VKApi.getUser(fields, response.items))
49 |         },
50 |         data: {
51 |             ncyBreadcrumbLabel: 'Followers page'
52 |         }
53 |     })
54 | }]);


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp = require("gulp");
 2 | var webpack = require("webpack");
 3 | 
 4 | var $ = require('gulp-load-plugins')({
 5 |     camelize: true
 6 | });
 7 | 
 8 | gulp.task('webserver', function() {
 9 | 	gulp.src(['./', '!./node_modules/**', '!./vendors/**'])
10 | 		.pipe($.webserver({
11 | 			livereload: true,
12 | 			directoryListing: false,
13 | 			open:false,
14 | 			fallback: 'index.html'
15 | 		}));
16 | });
17 | 
18 | gulp.task("webpack", function() {
19 |     return gulp.src("./app/src/app.es6.js")
20 |         .pipe($.webpack({
21 |             cache: true,
22 |             target: "web",
23 |             debug: true,
24 |             watch: true,
25 |             devtool: "#inline-source-map",
26 |             resolve: {
27 |                 modulesDirectories: ["vendors", "node_modules"],
28 |                 alias: {
29 |                     "angular": "angular/angular.min",
30 |                     "ui-router": "angular-ui-router/release/angular-ui-router.min",
31 |                     "angular-animate": "angular-animate/angular-animate.min",
32 |                     "angular-messages": "angular-messages/angular-messages.min",
33 |                     "angular-breadcrumb": "angular-breadcrumb/dist/angular-breadcrumb.min",
34 |                     "jquery": "jquery/dist/jquery.min",
35 |                     "react": "react/react.min"
36 |                 }
37 |             },
38 |             plugins: [
39 |                 new webpack.ResolverPlugin([
40 |                     new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
41 |                 ])
42 |             ],
43 |             module: {
44 |                 loaders: [
45 |                     {test: /angular.min.js$/, loader: "exports?angular"},
46 |                     {test: /.es6.js$/, loader: '6to5-loader'},
47 |                 ]
48 |             },
49 |             output: {
50 |                 filename: "bundle.js"
51 |             }
52 |         }))
53 |         .pipe(gulp.dest('./app/dist/'));
54 | });
55 | 
56 | gulp.task("default", ["webserver", "webpack"]);
57 | 


--------------------------------------------------------------------------------
/app/src/services/VkApiProvider.es6.js:
--------------------------------------------------------------------------------
  1 | function VKApi() {
  2 |     var settings = {};
  3 | 
  4 |     this.setSettings = (vkSettings) => {
  5 |         settings = vkSettings;
  6 |     };
  7 | 
  8 |     this.$get = ['$rootScope', '$q', '$log', '$timeout', 'VK', ($rootScope, $q, $log, $timeout, VK) => {
  9 |         if(typeof VK === "undefined")
 10 |             throw new Error("You forgot include VK script");
 11 |         if(typeof settings.apiId === "undefined" && typeof settings.apiVersion === "undefined")
 12 |             throw new Error("You forgot initialize settings in a config function");
 13 |         VK.init({ apiId: settings.apiId, apiVersion: settings.apiVersion });
 14 | 
 15 |         var authenticate = () => 
 16 |             $q((resolve, reject) => {
 17 |                 VK.Auth.getLoginStatus(response => {
 18 |                     if(response.session) {
 19 |                         var mid = response.session.mid;
 20 |                         $timeout(() => resolve(mid), 0);
 21 |                     } else {
 22 |                         VK.Auth.login(response => $log.info(response, 'response'), 2 + 4 + 8 + 16);
 23 |                     }
 24 |                 });
 25 |             });
 26 | 
 27 |         var getMid = () => authenticate().then(mid => mid);
 28 | 
 29 |         var getSession = () => authenticate().then(mid =>
 30 |             $q((resolve, reject) => {
 31 |                 if(VK.Auth.getSession() != null) {
 32 |                     var session = VK.Auth.getSession();
 33 | 
 34 |                     if(session.mid === mid) {
 35 |                         resolve(session);
 36 |                     } else {
 37 |                         reject(new Error("This session does not correct for current user"));
 38 |                     }
 39 |                 }
 40 |             })
 41 |         );
 42 | 
 43 |         var getUser = (fields, uid) => authenticate().then(mid =>
 44 |             $q((resolve, reject) => {
 45 |                 VK.api('users.get', {
 46 |                     user_ids: typeof uid === 'undefined' ? mid: uid.join(","),
 47 |                     fields: fields.join(',')
 48 |                 }, response => {
 49 |                     if(response.response) {
 50 |                         $timeout(() => resolve(typeof uid !== 'undefined' ? response.response: response.response[0]), 0);
 51 |                     }
 52 |                 });
 53 |             })
 54 |         );
 55 | 
 56 |         var getFollowers = params => authenticate().then(mid => {
 57 |             params = params || {};
 58 |             params.mid = mid;
 59 | 
 60 |             return $q((resolve, reject) => {
 61 |                 VK.api('users.getFollowers', params, response => {
 62 |                     if(response.response) {
 63 |                         $timeout(() => resolve(response.response), 0);
 64 |                     }
 65 |                 });    
 66 |             })
 67 |         });
 68 | 
 69 |         var getFriends = fields => authenticate().then(mid =>
 70 |             $q((resolve, reject) => {
 71 |                 VK.api('friends.get', {
 72 |                     user_id: mid,
 73 |                     fields: fields.join(',')
 74 |                 }, response => {
 75 |                     if (response.response) {
 76 |                         $timeout(() => resolve(response.response), 0);
 77 |                     }
 78 |                 });
 79 |             })
 80 |         );
 81 | 
 82 |         var photosSearch = (lat, long) => authenticate().then(mid =>
 83 |             $q((resolve, reject) => {
 84 |                 VK.api('photos.search', { lat, long }, (response) => {
 85 |                     if (response.response) {
 86 |                         $timeout(() => resolve(response.response), 0);
 87 |                     }
 88 |                 });
 89 |             })
 90 |         );
 91 | 
 92 |         return {
 93 |             authenticate,
 94 |             getMid,
 95 |             getUser,
 96 |             getSession,
 97 |             getFollowers,
 98 |             getFriends,
 99 |             photosSearch
100 |         };
101 |     }];
102 | }
103 | 
104 | export default VKApi;


--------------------------------------------------------------------------------