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 its visibile attribute linked to a root scope property. This also seems rather hacky.

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

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

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

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

    {% endraw %}

The directives and controllers live here.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.