angularjs-in-action/angello

Angello

Welcome to Angello, the AngularJS storyboard! Based off the Trello App, this repo holds the code for the app built in the AngularJS in Action book. Read on to get started!

Prerequisites

You'll need git, a web browser, and a local web server.

Running Angello

Install it

Run the following command to check out a local copy of the code.

git clone [email protected]:angularjs-in-action/angello.git

Set up the backend

There are two options for the backend of the app: NodeJS and Firebase.

Using Firebase

1. If you do not have one already, set up an account with firebase.com
   
2. Create an app (name it whatever you want)
   
3. Click on your new app's URL
   
   
4. Click on the Login & Auth section of the resulting page on the left hand side, and check the checkbox that says Enable Email & Password Authentication
   
5. Copy the URL from the address bar of the page you are on
6. Open the file /client/src/angello/app/services/EndpointConfigService.js and update the URI property of the firebase object to your copied URL.
   

You're done! Skip to the Start it section

Using NodeJS

1. Go to the Angello Express API and follow the directions to get the API running.
2. Once the API is running, open /client/src/angello/app/services/EndpointConfigService.js in a text editor, uncomment // .constant('CURRENT_BACKEND', 'node') and comment out .constant('CURRENT_BACKEND', 'firebase').

You're done! Go ahead and move on to the Start it section.

Start it

If you have a local web server that you use, simply serve the client directory of the project. If you do not, you will need to install Node.js and NPM.

Once you have installed Node.js and NPM, run the following commands in your terminal. Make sure you are in the angello directory.

npm install -g serve
serve client/

These commands install the serve package on your system globally and then serve the client directory of the angello application for your viewing pleasure.

Use it!

At this point, you should see the login portion of the site. We've made it to the fun part! Go ahead and play around with the app and see what it does. Read on for a tour of the app.

Registering a client

Adding a user to the storyboard

Adding a story

View stories for a specific user

View stories by status

View stories by type

License

MIT

angello's Issues

getting 404

{"error":{"name":"Error","status":404,"message":"could not find a model with id auth0|551553a8d8a22b5d101666dc","statusCode":404,"stack":"Error: could not find a model with id auth0|551553a8d8a22b5d101666dc\n

CORS & auth0

I got the following message with Chrome version 40.0.2214.94 (64-bit):

Client configuration loaded
bean.js:199 'KeyboardEvent.keyLocation' is deprecated. Please use 'KeyboardEvent.location' instead.
3c2aa1b7d4a13b7f6759a5ef9b17a5f7:1 GET https://www.gravatar.com/avatar/3c2aa1b7d4a13b7f6759a5ef9b17a5f7?d=404 404 (Not Found)
reqwest.js:226 POST https://angello.auth0.com/dbconnections/signup reqwest.js:226 getRequestreqwest.js:365 initreqwest.js:235 Reqwestreqwest.js:429 reqwestindex.js:380 Auth0.signupindex.js:250 SignupPanel.submitindex.js:189 SignupPanel.onsubmitindex.js:12 bindedbean.js:254 callbean.js:269 handlerbean.js:434 rootListener
(index):1 XMLHttpRequest cannot load https://angello.auth0.com/dbconnections/signup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8081' is therefore not allowed access. The response had HTTP status code 400.
angular.js:11413 There's an error logging in Error: Unknown error.
    at LoginError.Error (native)
    at new LoginError (http://cdn.auth0.com/js/lock-6.js:5710:19)
    at fail (http://cdn.auth0.com/js/lock-6.js:6156:17)
    at Object.Auth0.signup.reqwest.error (http://cdn.auth0.com/js/lock-6.js:6185:7)
    at http://cdn.auth0.com/js/lock-6.js:8885:20
    at error (http://cdn.auth0.com/js/lock-6.js:8963:36)
    at XMLHttpRequest.headers (http://cdn.auth0.com/js/lock-6.js:8691:11)angular.js:11413 (anonymous function)LoginController.js:11 (anonymous function)auth0-angular-4.js:360 $get.auth.signin.errorFnauth0-angular-4.js:53 $get.authUtils.callbackify.callbackauth0-angular-4.js:101 (anonymous function)angular.js:14204 $get.k.$evalangular.js:14302 $get.k.$applyauth0-angular-4.js:44 $get.authUtils.safeApplyauth0-angular-4.js:100 $get.authUtils.appliedindex.js:276 (anonymous function)index.js:364 failindex.js:388 Auth0.signup.reqwest.errorreqwest.js:282 (anonymous function)reqwest.js:360 errorreqwest.js:88 headers
extensions::messaging:70 Uncaught Error: Attempting to use a disconnected port object

I'm using superstatic with nodejs and following configuration superstatic.json:

{
  "headers": {
    "/**": {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET,POST,OPTIONS,HEAD",
      "Access-Control-Allow-Credentials": "true"
    }
  },
  "redirects": {
    "/": {
      "status": 302,
      "url": "/client"
    }
  }
}

why setup the application with "serve", not other string

hi,
I have gitted pull the amazing project and installed it. After several time boot up, I am doubt why I should always use "serve" to start, other than other words, and where is the definition of "serve".
Thanks

Consider breaking app into 3-4 stages...

To demonstrate to the readers how the application features can be aggregated and enhanced, I would suggest that you have 3 distinct stages of the application:

Stage 1: Features a single-view applications

• No animations
• No routing
• Separate, simple apps for each of the major features:
• story browser,
• story dashboard/charts
• No live/real dataservices. Use mock data

Stage 2: Routing

Add routing and logging

Stage 3:

Add animations and transitions

Stage 4:

Add real dataservices (Firebase, etc)

Poor usages of $scope in MainCtrl and HMTL

Consider the code:

myModule.controller('MainCtrl', function ($scope, AngelloModel, AngelloHelper) {
    $scope.currentStory = null;
    $scope.currentStatus = null;
    $scope.currentType = null;
    $scope.editedStory = {};

    $scope.types = AngelloModel.getTypes();
    $scope.statuses = AngelloModel.getStatuses();
    $scope.stories = AngelloModel.getStories();
    $scope.typesIndex = AngelloHelper.buildIndex($scope.types, 'name');
    $scope.statusesIndex = AngelloHelper.buildIndex($scope.statuses, 'name');

    $scope.setCurrentStory = function (story) {
        $scope.currentStory = story;
        $scope.editedStory = angular.copy($scope.currentStory);

        $scope.currentStatus = $scope.statusesIndex[story.status];
        $scope.currentType = $scope.typesIndex[story.type];
    };

    $scope.createStory = function () {
        AngelloModel.createStory($scope.editedStory);
        $scope.resetForm();
    };

    $scope.setCurrentStatus = function (status) {
        $scope.editedStory.status = status.name;
    };

    $scope.setCurrentType = function (type) {
        $scope.editedStory.type = type.name;
    };

});

Command not found: mongod

I tried to setup the project according to this guide:
https://github.com/angularjs-in-action/angello-express-api

So I run npm install, but afterwards it can't find the command 'mongod'
Do I have to install mongodb separately and manually?

Strange behavior dragging story 3 under story 2

http://screencast.com/t/mTsn6sZJ

Can not login angello. Help me ...

I cannot login and signin from local network

I test angello with angello-express-api.
Setup well done.
But cannot signup and login.
Help me.

Added Angelo to comparison of starters

Hi,

I have added this project to my collection of things one can use to get started building an app. If you would like to help fill in the details about this approach, let me know and I will add you as an editor.

Regards,
Dan

"There was an error processing the signup."

I have been trying to get Angello running using Firebase. The app brings up the sign up/sign in screen without any errors.

However on trying to create a new account, I get the following error messages from the application serving Angello (Netbeans) -

Failed to load resource: the server responded with a status of 404 (Not Found) (14:27:00:938 | error, network)
at https://www.gravatar.com/avatar/95a900435ca16f23512f418175856480?d=404
'KeyboardEvent.keyLocation' is deprecated. Please use 'KeyboardEvent.location' instead. (14:27:01:222 | warning, deprecation)
at http://cdn.auth0.com/js/lock-6.js:9883
Failed to load resource: the server responded with a status of 400 (Bad Request) (14:27:24:222 | error, network)
at https://angello.auth0.com/dbconnections/signup
XMLHttpRequest cannot load https://angello.auth0.com/dbconnections/signup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8383' is therefore not allowed access. The response had HTTP status code 400. (14:27:24:223 | error, javascript)
at index.html

Trying to sort out if this an auth0 issue vs Angello code issue vs Firebase issue. Any and all help would be appreciated.

Thanks,
Neal

Images for README

Validation errors show up after creating a card

This is the view directly after successfully creating a new card:

Working with nginx

Since the free version of trello has limitations and i really love this example, which worked
out of the box for me, i am currious if there is an easy way to run it with nginx.
I am thinking about using it for a little project, is there a simple workaround for nginx ?

Thanks a bunch !

Modern Web Tooling

@simpulton: What are your thoughts on using a tooling based on Bower, Grunt, and Yeoman?

I'm a bit jaded as someone who works on this stuff.

Pros

• Make releases, testing, etc easier.
• Show an AngularJS app used in a larger context.
• Tools written/config'd in JavaScript/JSON. Should be familiar to a web dev.

Cons

• Potentially more intimidating.
• Higher barrier to entry.
• Not everyone will want to use these tools.
• Tools still somewhat in flux.

Please add content to the README.

I recommend that you consider adding UX mockups, user requirements, and feature listings to the README.

@see Zza README for sample.

This will dramatically help reviewers understand the intent, UI goals, and directions.

Potential Security Issue

👋 Hello, we've received a report for a potential critical severity security issue in your repository.

Next Steps

1️⃣ Visit https://huntr.dev/bounties/1-other-angularjs-in-action/angello for more advisory information.

2️⃣ Sign-up to validate or speak to the researcher for more assistance.

3️⃣ Propose a patch or outsource it to our community.

---

Confused or need more help?

• Join us on our Discord and a member of our team will be happy to help! 🤗

• Speak to a member of our team: @JamieSlome

---

This issue was automatically generated by huntr.dev - a bug bounty board for securing open source code.

Consider separating `app.js` code into separate files

At least use separate files for each angular.module() grouping.
At best use separate files for each class definition.

Then use HeadJS boot.js file load each file in desired order... this is cludgy but avoids the need for a package manager such as Browserify or RequireJS.

Consider using HeadJS with boot.js to load all scripts

Move all script loading to /js/boot.js which will use HeadJS to load the scripts.

@see Zza html
@see Zza boot.js

This will move the required JavaScript code from a declarative markup to a programmatic solution which is more scalable as app complexity grows.

Use UI-Router plugin

I strongly recommend that you do not use <div ng-view=""></div> in your HTML.
This leads ultimately to complex code with your view compositions are non-trivial.

Consider using UI-Route with named-views and nestings (if appropriate).

Deleted...

Rant deleted. My bad...

Use of $http improvements

Your do not need to wrap $http() calls with $q.defer() usages.

var find = function () {
            var deferred = $q.defer();
            var url = ENDPOINT_URI + 'clients/' + AuthService.getCurrentUserId() + '/stories.json';

            $http.get(url).success(deferred.resolve).error(deferred.reject);

            return deferred.promise;
        };

And consolidate all URLs into a url map. Consider this result:

var URLS = {
      STORY : {
          findAll           : "{0}/clients/{1}/stories.json"
        , loadStoryDetails  : "{0}/clients/{1}/stories/{2}.json"
      }
    };

function findAllStories( ) 
{
  return $http.get( supplant( 
    URLS.STORY.findAll, [ ENDPOINT_URI, AuthService.getCurrentUserId() ]
  ));
}

function loadStory( storyID ) 
{
  return $http.get( supplant( 
    URLS.STORY.loadStory, [ ENDPOINT_URI, AuthService.getCurrentUserId(), storyID ]
  ));
}