tarlepp / angular-sailsjs-boilerplate-frontend

Frontend side for angular-sailsjs-boilerplate

Frontend side for angular-sailsjs-boilerplate

This frontend code is used on angular-sailsjs-boilerplate

This is an example AngularJS application to demonstrate how to use separate back- and frontend applications. Currently this demo contains following features:

• Login with backend
• JWT token authentication after login
• Simple list view (Books / Authors) to demonstrate socket communications
• Generic error handler which is attached to $http and $sailsSocket
• Message service to show specified messages to users
• Live chat to demonstrate subscribe actions

Used components

This frontend application uses following 3rd party libraries to make all this magic happen.

• slush-angular (https://github.com/slushjs/slush-angular)
• AngularJS (https://github.com/angular/angular.js)
• AngularUI Router (https://github.com/angular-ui/ui-router)
• AngularUI Bootstrap (https://github.com/angular-ui/bootstrap)
• angular-moment (https://github.com/urish/angular-moment)
• Angular Bootstrap Show Errors (https://github.com/paulyoder/angular-bootstrap-show-errors)
• angular-linkify (https://github.com/scottcorgan/angular-linkify)
• angularSails (https://github.com/balderdashy/angularSails)
• Bootstrap (https://github.com/twbs/bootstrap)
• bootswatch (https://github.com/thomaspark/bootswatch/)
• Font Awesome (https://github.com/FortAwesome/Font-Awesome)
• noty - A jQuery Notification Plugin (https://github.com/needim/noty)
• Sails JavaScript Client SDK (https://github.com/balderdashy/sails.io.js)

Development

To start developing in the project run:

gulp serve

or

npm start

Then head to http://localhost:3001 in your browser.

The serve tasks starts a static file server, which serves the AngularJS application, and a watch task which watches all files for changes and lints, builds and injects them into the index.html accordingly.

Tests

To run tests run:

gulp test

Or first inject all test files into karma.conf.js with:

gulp karma-conf

Then you're able to run Karma directly. Example:

karma start --single-run

Production ready build - a.k.a. dist

To make the app ready for deploy to production run:

gulp dist

Now there's a ./dist folder with all scripts and stylesheets concatenated and minified, also third party libraries installed with bower will be concatenated and minified into vendors.min.js and vendors.min.css respectively.

To run your deployment code run:

gulp production

Then head to http://localhost:3000 in your browser.

License

The MIT License (MIT)

Copyright (c) 2015 Tarmo Leppänen

angular-sailsjs-boilerplate-frontend's Issues

Node 4 compatibility

Is there any plans to update many of the dev dependencies any time soon? Some of them are not Node 4 compatible like gulp-sass.

datepicker options

Where can I find the datepicker options? Is it possible to change to Spanish language?

<datepicker
   ...
></datepicker>

Thanks in advance.

Where is the correct way to add a js vendor?

I need to add 'angular-locale_es-es.js' to the frontend.
Where is the correct way to add this file to the project?
I make 'bower install angular-i18n' but in this way don't appear in the project.

Thanks in advance.

integration with ionic

I would like to integrate the frontend in ionic , I tried to add

$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}});

in app.js , in the angular.module('frontend').run....
but it don't work : any idea for integrating it in ionic???? Have I to change something in ui-router?

I know that I will have to change my html and css files for the project , but for index.html I just have what is provided by ionic and I don't have the ionic tab with 'ionic blank starter' as if I begin a blank ionic project

error in gulp dist

When I try to make 'gulp dist' appear the next error:

[00:44:19] Starting 'scripts-dist'...

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
 Error: Broken @import declaration of "http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700" - timeout

/admin/loginHistory gets redirected

Hi! What a great work you shared here, thanks! I'm going to use this for my next project.

Just a question, cause I don't know if this is the expected behavior: There's a folder admin under src/app with a module which defines a route to /admin/loginHistory. When I try to reach that via the browser address bar, the app redirects to the login page then to the page where I was. Judging by the code, it seems to me that this shouldn't happen. Am I wrong?

Integration with gulp-ejs

Any chance you might be willing to include gulp-els in this project for those who have to support templates and want to follow your good work in this area?

_fetchData() behavior

I have a controller that depends if the user is a normal user or is an admin/manager user load diferent data:

                resolve: {
                  _items: [
                    'ListConfig',
                    'IncidenceModel',
                    'UserService',
                    function resolve(
                      ListConfig,
                      IncidenceModel,
                      UserService
                    ) {
                      var config = ListConfig.getConfig();
                      var user = UserService.user();
                      var parameters = {
                        populate: 'users',
                        limit: config.itemsPerPage,
                        sort: 'createdAt DESC'
                      };
                      if (!user.admin && !user.gestorIncidencias) {
                        parameters.user = user.id;
                      }
                      return IncidenceModel.load(parameters);
                    }
                  ],

This work ok for me and load the correct data but in the list.html view when you try to make a search in the 'search filter' the _fechData() load all the items from IncidenceModel:

        function _fetchData() {
          $scope.loading = true;

          // Common parameters for count and data query
          var commonParameters = {
            where: SocketHelperService.getWhere($scope.filters)
          };

          // Data query specified parameters
          var parameters = {
            populate: 'users',
            limit: $scope.itemsPerPage,
            skip: ($scope.currentPage - 1) * $scope.itemsPerPage,
            sort: $scope.sort.column + ' ' + ($scope.sort.direction ? 'ASC' : 'DESC')
          };


          // Fetch data count
          var count = IncidenceModel
            .count(commonParameters)
            .then(
              function onSuccess(response) {
                $scope.itemCount = response.count;
              }
            )
          ;

          // Fetch actual data
          var load = IncidenceModel
            .load(_.merge({}, commonParameters, parameters))
            .then(
              function onSuccess(response) {
                  $scope.items = response;
              }
            )

          // And wrap those all to promise loading
          $q
            .all([count, load])
            .finally(
              function onFinally() {
                $scope.loaded = true;
                $scope.loading = false;
              }
            )
          ;
        }

How can I resolve this? I try to introduce another condition (user: $scope.user.id) in count and load vars but I'm unable.

Can anyone help me please?

[enhancement] DataModel to be much faster

I have a suggestion to make. I already implemented it into my project, and it works as expected.

I noticed that the DataModel was always reloading/refetching the models from the backend in the handlerCreated, handlerUpdated, handlerDestroyed methods.

However, this is unnecessary, since their message parameter already contains the created, updated, or destroyed object in message.data (and its id in message.id).

Thus, what I am doing instead of reloading the objects is simply this:

For handlerCreated:
self.objects.push(message.data);
++self.scope[self.itemNames.count];

For handlerUpdated:
var idx = self._findIndexById(message.id);
self.objects.splice(idx, 1, message.data);

For handlerDestroyed:
var idx = self._findIndexById(message.id);
self.objects.splice(idx, 1);
--self.scope[self.itemNames.count];

My _findIndexById() method is as follow:

DataModel.prototype._findIndexById = function findIndexById(id) {
    var self = this;

    for(var idx = 0; idx < self.objects.length; ++idx) {
        if(self.objects[idx].id === id) {
              return idx;
         }
     }
}

This way, it behaves exactly the same way as before, but does not reload/refetch/recounts everything on every event.

Let me know your opinion on this. If interested I will PR it.

P.S:
I also added an update to the count on the load() function:

if (fromCache && self.scope && self.itemNames.count) {
    self.scope[self.itemNames.count] = self.objects.length;
}

DataModel.setScope behavior

My resolve variable in ui-router:

            _votesSurvey: [
                    '$stateParams',
                    'AnswerModel',
                    'VoteModel',
                    function resolve(
                      $stateParams,
                      AnswerModel,
                      VoteModel
                    ) {
                      return AnswerModel.load({survey: $stateParams.survey, populate: 'votes'});
                    }
                  ]

My controller:

VotoModel.setScope($scope, false, 'votesSurvey');
$scope.votesSurvey = _votesSurvey;

At first the $scope.votesSurvey format is (contain the fields of AnswerModel with populate votes):

0:Object
  createdAt:"2016-08-22T08:52:30.000Z"
  createdUser:3
  survey:8
  id:33
  text:"respuesta1"
  updatedAt:"2016-08-22T08:52:30.000Z"
  updatedUser:3
  votes:Array[2]
  __proto__:Object
1:Object
  createdAt:"2016-08-22T08:52:39.000Z"
  createdUser:3
  survey:8
  id:34
  text:"respuesta2"
  updatedAt:"2016-08-22T08:52:39.000Z"
  updatedUser:3
  votes:Array[0]
  __proto__:Object
...

But when another user make a vote (create a register in votes table) the format of $scope.votesSurvey change (contain only the fields of VoteModel).
What is happening here? What am I doing wrong?
Thanks

LiveReload causing net::ERR_CONNECTION_REFUSED

I've been using this boilerplate for quite a while now, I love it!

LiveReload seems to be giving throwing an error in the console:

GET http://localhost:35729/livereload.js?snipver=1 net::ERR_CONNECTION_REFUSED

It used to work perfectly before upgrading its version in package.json.

Also, in the terminal, it now reads:

Server started at http://:::3001

instead of

Server started at http://localhost:3001

as if it doesn't detect the hostname properly anymore (it showed fine with older version of gulp-serve).

Maybe those issues are somehow related?

Suggestions: Would it be better to move to https://github.com/BrowserSync/browser-sync ? I can try and PR if it works well.

datepicker refresh error

When you select to modify a book and change the released year, if you 'Cancel' the changes the view show the date that you select in the calendar, not the date in the database. If you refresh the page, them you can see the correct value of the date.

Thanks.

gulp dist do not create well a page

I'm testing my project and in 'gulp serve' works fine but after make a gulp dist and production there is a page that is no complete. No errors in console.
With gulp serve:

With gulp dist + gulp production:

https server in the frontend

I need that Frontend response through HTTPS instead of HTTP (due to ServiceWorker). My production server is working with HTTPS without problems but, is there an easy way to do that on my local machine (developer environment)? Thanks