Git Product home page Git Product logo

angular-design-patterns-best-practices's Introduction

Angular.js: Advanced Design Patterns and Best Practices

Source code and examples from the talks given at MagmaConf 2013 and OpenCode.

Content

  • Tip #1: Code Organization
  • Tip #2: Keep controllers simple
  • Tip #3: Business logic belongs to models
  • Tip #4: Create facade to interact with servers
  • Tip #5: Leverage providers configuration
  • Tip #6: Share a Notifications Service
  • Tip #7: Automate your workflow

Thanks

Thanks to @cliffmeyers, @jhooks, @ryancanulla, @plbabin, @connatser, @bclinkinbeard, Dustin Butler, Wes Jones, Nate Lokers and Robert Taylor all these patterns and best practices comes from team effort

angular-design-patterns-best-practices's People

Contributors

c0bra avatar mattisfrommars avatar trochette avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular-design-patterns-best-practices's Issues

Justification/Further explanation of design patterns

Hi Tommy, couldn't find an email anywhere so this is the only way I could seem to talk to you.

Could you explain how, I could get the "slides" in the NotesModel into $scope to be bound to an attribute in the html? I don't understand how to get objects in the Model into $scope to be bound to ng-attributes.

Also why does NotesModel inherit from EventDispatcher?

I really like the ideas you present here, you solve complex controller interactions elegantly. It seems like you have used ReactJS before, as these Angular modules are starting to look like React components! Love the reusability in the Model and Service providers.

If would rather talk via email i'm at [email protected]

Thanks a bunch in advance,

Yin

Why you use notification and namespaceJs?

Why you use notification but not rootScope.emit?

And the event name is the same as namespace you defined, why not just use a string directly? I tried and do not get auto complete in PHPStorm so what's the point?

Keyboard navigation bug

Navigating from a slide to the next one and then back using a keyboard, before the slide transition animation is over results in:

  • No slide transitioning in;
  • Navigation stops working using Keyboard and Mouse;

How to reprocude:
Press [Left] and [Right](or [Right] and [Left]) keyboard buttons in fast succession.

Reproducable on:
Chrome, Internet Explorer 9

Loosing vs. Losing

Minor English issue here. You are using the word "loosing" in places where I believe you mean "losing". They are indeed quite different. The former means "letting go" and is the past participle of "loose", whereas the latter means "actively missing out on" and is the past participle of "lose".

Structured class approach and class inheritance

Hi there,

One thing I've been wondering is that why should your angular design pattern apply structured class and class inheritance. Could you please arrange your time to give more detail explanation on it.

Sincerely thanks,
Trung

Links in readme are broken

The links to MagmaConf 2013 and OpenCode in the readme go to a github 404 page. Do you have the updated links?

Issue removing event listeners

Hello,

Great job with the design patterns, really appreciate your work.

I am having a issue when trying to remove an event listener using your EventDispatcher class. (it just returns '-1' with .indexOf in the 'removeEventListener' function.

This is my code (controller using basecontroller.extend):

defineListeners: function () {
    this._super();

this._Notifications.addEventListener(ui.controlbar.events.INTERVAL_ELPALSED, this._handleIntervalElapsed.bind(this));
}

_handleIntervalElapsed: function (event, message) {
this.$scope.currentTime = message.currentTime;
this.$scope.$apply();
},

destroy: function () {
console.log('destroy');
this._Notifications.removeEventListener(ui.controlbar.events.INTERVAL_ELPALSED, this._handleIntervalElapsed.bind(this));
}

Thanks in advance,

Trying to migrate to AngularJs 1.4.7

So as the title says, I'm trying to migrate your example to Angular 1.4.7, with little success, other then a slight change with using prototype rather then the included class.js (this shouldn't cause any issues from what I've investigated), the issue lies in controller. I already assumed that since I think angular 1.2 lazy loading controllers to the app was disabled (I may be confusing the defaulting of controllers to anonymous apps), so I thought, easy enough include the below:

angular.module('notes.Controller',
        [ 'notifications', 'notes.NotesModel', 'notes.NotesService' ])
        .controller(
            'NotesController',
            [
                    '$scope',
                    'NotesModel',
                    'Notifications',
                    '$route',
                    new notesController($scope, NotesModel, Notifications,
                            $route) ]);

And then update the app.js to include the new module.
The issue appears to be that $scope (and should i remove it all together the remaining parameters have the same error occuring) appear to be throwing:

Uncaught ReferenceError: $scope is not defined

I've looked through everything I can think of, and can't seem to figure out why this is the case. Would you be able to migrate this to the latest build for relevance purposes

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.