Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

I've been working on my first Angular JS app for the past few days. It's in a very early stage (no real functionality), but that will only make it easier to review what IS there.

The client side is written in coffeescript. The app used Requirejs to manage files AMD style (it loads compiled coffeescript).

The server side is very minimal at the moment. It will have a local SQLite database and uses SQLAlchemy as an ORM. Furthermore I make use of the (very nice) Flask framework to provide an restful api to the angular app.

Right now the server side is not much concern to me. It works.

The client side works as well, but since I'm new to Angular I am really curious to know whether I do things correctly and using the Angular JS way.

The code lives in this repository

The parts I'm not so sure about are the way I am dealing with scopes right now.

For example: I have a general dialog directive and use it to display a dialog for importing images. I would think I could have the import directive live inside the dialog (transcluded), but to be able to handle the dialog apply "event" (handle by uploading the images in this particular instance...), the import directive needs to wrap the dialog. It works, but was rather counterintuitive. Is it the right way to do things?

Another example: To display the dialog I have it's visibile attribute linked to a root scope property. This also seems rather hacky. Suggestions?

HTML:

<body ng-controller="MainCtrl" >
    {# let angularjs compile the templating from here #}
    {% raw %}
    <header>
        <h1>Sight <span>beta</span></h1>

        <div class="buttons">
            <button ng-click="show_import_dialog = ! show_import_dialog">Import</button>
        </div>
    </header>

    <div id="content">
        <!-- import dialog -->
        <div sg-import>
            <div 
                sg-dialog title="Import Photographs" 
                visible="show_import_dialog" 
                sg-apply="upload()"
            >
                <p>
                    Drag images into the dropzone below or click on it to browse.
                </p>
                <br />
                <div class="drop-zone">
                    <div ng-repeat="file in files" sg-photo title="{{ file.name }}">
                    </div>

                    <!-- hidden input -->
                    <input type="file" accept="image/*" multiple />
                    <!-- push size -->
                    <div class="clear"></div>
                </div>
            </div>
        </div>
    </div>

    <footer>
    </footer>
    {% endraw %}
</body>

The directives and controllers live here

share|improve this question

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.