64 Matching Annotations
  1. Jan 2019
    1. Angular vs React: Selecting the Right Framework

      Selecting the right framework or library can provide the web development team the edge it requires to develop the application. As it gives a reason and fundamentals public to all applications. Utilizing this package allowed the team to focuses on enhancing the application’s functionality and saving the time and effort that could rather be used designing, executing, and testing core elements. In this, Libraries act an important role as it allows you to classify front-end work from back-end companies enabling us to work on both together without creating a combination obstacle.

  2. Nov 2018
  3. Jul 2018
    1. Components have a well-defined lifecycle: Each component can implement "lifecycle hooks". These are methods that will be called at certain points in the life of the component. The following hook methods can be implemented:

      Important point - component's lifecycle, a-la Angular v2/4/5/6

  4. May 2018
    1. Once an application is bootstrapped, it will then wait for incoming browser events (such as mouse clicks, key presses or incoming HTTP responses) that might change the model. Once such an event occurs, AngularJS detects if it caused any model changes and if changes are found, AngularJS will reflect them in the view by updating all of the affected bindings

      This is probably the famous digest cycle that is triggered automatically on changes detected.

    1. inside Controllers or as a defined method. Here’s the method usage,

      he probably means not the usage of a defined filter, but using the filters feature, which requires defining as a method that is used later.

  5. Dec 2016
    1. This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models – watch 3 minutes worth. Misko demonstrates the primitive binding issue with ng-switch.

      Here's the solution to the problem of binding an input and a title in the context of an Ionic view. It boils down to scope!

  6. Apr 2016
    1. This is a useful repository illustrating how to structure an Angular app in a modern way, using new helpers from Angular 1.5.x

  7. Mar 2016
  8. Feb 2016
    1. This is a good short overview of how change detection works in Angular 2.

      It fixes the fundamental algorithmic complexity problem that change detection has in Angular 1.x by making it possible to prune parts of the component tree from change detection if the inputs have not changed.

      Unfortunately the zone.js implementation involves some horrifying monkey-patching of various DOM APIs.

  9. Jan 2016
    1. Useful set of benchmarks based on the DBMonster demo for a set of different frameworks - looking at various axes such as GC collection, layout and paint times.

      There are some notable caveats in the comments though that the subjective feel was not always reflected in the metrics, suggesting that the authors believe they have not found the optimal set of metrics that reflect user-perceived performance.

  10. Dec 2015
    1. Regarding tight coupling with require, this is a limitation of the framework. I believe Angular 2 is more flexible with interdirective communication from the little I have seen of it.

      Need to read up on this

    2. This effectively means that these directives cannot be used outside of annotated-image because Angular will throw an error when it cannot locate the required controller.

      In other words, the child components are no longer re-usable and this breaks composability.

  11. Nov 2015
  12. Oct 2015
    1. Useful guide to adding a central logging point for all events in an Angular app that are broadcast via $rootScope

    1. When using $rootScope.$on, we need to unbind those listeners each time the $scope is destroyed. $scope.$on listeners are automatically unbound, but we’ll need to call the above closure manually on the $destroy event:
    1. It’s known that Angular becomes slower with around 2,000 bindings due to the process behind dirty-checking. The less we can add to this limit the better, as bindings can add up without us really noticing it!

      From some preliminary testing it looks like we get close to hitting the 2000 watch count on the /stream view - which explains the lag.

    1. Smart components are connected to services. Though they may have inputs and outputs, they mostly know how to load their own data, and how to persist changes when they occur

      Useful categorization of 'smart' and 'dumb' in the context of Angular

    2. I think this can pretty much be our Angular style guide.

    1. Here’s what the team says about preparing code for less migration effort when we get Angular 2.0, which is luckily in-line with the guesses that several others came up with so far.

      Some useful notes about writing Angular components in a forwards-compatible way.

  13. lhorie.github.io lhorie.github.io
    1. Some reading I came across whilst looking into error reporting for AngularJS expressions

    1. In version 1.4, bindToController gets even more powerful. When having an isolated scope with properties to be bound to a controller, we always define those properties on the scope definition and bindToController is set to true. In 1.4 however, we can move all our property binding definitions to bindToController and make it an object literal.

      This starts to look a lot like propTypes, except without runtime type checking.

    2. Changes to isolated scope properties from the outside world are not reflected back to the controllers’ this object.

      Notable caveat with using controllerAs in Angular 1.2.x

    3. In fact, we don’t even need to request $scope in our controller anymore, since the scope is bound the controller’s this reference when using controllerAs.

      So in the context of a directive, when a property is specified on scope in the directive's definition object, it will be available in expressions in the template via vm.<property>, assuming vm is the name assigned to the controller via controllerAs

    1. Intro to the controller as syntax in Angular 1.2.x - main benefit highlighted here is making it more explicit which controller an expression in a template is referring to when directives are nested.

    1. Best Practice: use controller when you want to expose an API to other directives. Otherwise use link.
  14. Sep 2015
    1. Talk from ng-conf 2014 with advice on how to integrate Browserify and Angular, dealing with the fact that both have their own module systems.

    1. Now, the problem is that the usual approach to controller testing is to instantiate the controller using $controller, but this fails since we do not have a named controller registered on our module

      This was the problem I ran into initially when writing a test for GroupsListController

    1. UPDATE 4/19/2015: The most current and detailed Angular Style Guide is the community-driven effort led by John Papa and Todd Motto, which you can find at https://github.com/johnpapa/angular-styleguide. Please use this instead of the one mentioned below.

      The link to the currently recommended style guide as of April 2015 is here

    1. While the example above is simple, it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:

      Recommendations on how to split an Angular app into separate modules

    1. When should I use an attribute versus an element? Use an element when you are creating a component that is in control of the template. The common case for this is when you are creating a Domain-Specific Language for parts of your template. Use an attribute when you are decorating an existing element with new functionality.
    1. While this allowed imperative control logic to be mixed with the declarative HTML, developers soon realized that mixing Java directly into the HTML resulted in really messy code when the HTML pages got more advanced. The syntaxes of Java and HTML just didn't complement each other very well.
    1. The $event variable contains the original browser event object

      cf. React where an abstraction layer normalizes differences between browsers - although I'm unsure how much difference there still is between modern browsers that needs to be abstracted away

    1. The orderBy filter can also take a second $scope variable as parameter. In this example that variable is named reverse. The value of this variable determines if the data objects are to be sorted in their natural order, or the reverse order of that. In this case the reverse variable is set to true, meaning the data objects will be sorted in reverse order.

      Again, cf. React where one would just use a chain of map() calls.

    2. ng-switch Directive

      cf. React where one just uses ordinary JS logic to generate the markup, made more aesthetically pleasing with JSX, rather than embedding a subset of a programming language in HTML.

    1. Error: filter:notarray

      The inclusion of links to a useful page about the problem in Angular stacktraces is awesomesauce.

    1. Backup tutorial for Angular that I used after their official docs broke :P

    1. You will also have to tell AngularJS what part of the directive's HTML template that is to contain the transcluded HTML

      cf. The concept of 'slots' in the Shadow DOM spec.

    2. This processing is called "transclusion"

      So transclusion is analgous to the children props on a React element.

      From Wikipedia:

      In computer science, transclusion is the inclusion of part or all of an electronic document into one or more other documents by reference.

    3. In case that HTML template grows big, it is gets hard to write and maintain the HTML inside a JavaScript string.

      Of course, with ES6 a literal string could be used to avoid that problem.

    1. The $digest loop keeps iterating until the model stabilizes

      cf. React where an event triggers an event handler, which can trigger state changes and calls to React.render(). These are then batched together resulting in a single re-render, a DOM-diff and the application of the result to the DOM. Consequently you can't have an infinite state update loop. The exception is if a state change happens asynchronously, and that state change triggers another async state change (and so on...)

    2. Key intro to the data-binding mechanics at the core of Angular, essential for understanding performance implications.

    3. Dirty checking the scope for property changes is a common operation in Angular and for this reason the dirty checking function must be efficient. Care should be taken that the dirty checking function does not do any DOM access, as DOM access is orders of magnitude slower than property access on JavaScript object.

      $watch takes two args, a value function and a listener. The value function returns the current value which is compared to the previous value. This is what is referred to by the dirty checking function.

    1. The value function should return the value which is being watched. AngularJS can then check the value returned against the value the watch function returned the last time

      Ah, so since the input is a scope, this means that Angular needs to call every watch value fn that might be affected by a change. Should look into whether it has any optimizations to avoid that for common watch expressions.

    2. Useful reference on Angular's core $watch,$digest,$apply functions

    1. This will not render properly, unless we do some scope magic.

      Sigh. This pattern of in scenario A we have problems B and C, so lets add another feature D seems to occur quite a lot in this guide.

    2. This will not render properly, unless we do some scope magic.

      Sigh. This pattern of in scenario A we have problems B and C, so lets add another feature D seems to occur quite a lot in this guide.

    3. But ngRepeat has a dilemma. It needs to be able to clone new <li> elements for every action in user.actions. This initially seems trivial, but it becomes more complicated when you consider that user.actions might have items added to it later. This means that it needs to save a clean copy of the <li> element for cloning purposes. As new actions are inserted, the template <li> element needs to be cloned and inserted into ul. But cloning the <li> element is not enough. It also needs to compile the <li> so that its directives, like {{action.description}}, evaluate against the right scope. A naive approach to solving this problem would be to simply insert a copy of the <li> element and then compile it. The problem with this approach is that compiling on every <li> element that we clone would duplicate a lot of the work. Specifically, we'd be traversing <li> each time before cloning it to find the directives. This would cause the compilation process to be slower, in turn making applications less responsive when inserting new nodes. The solution is to break the compilation process into two phases: the compile phase where all of the directives are identified and sorted by priority, and a linking phase where any work which "links" a specific instance of the scope and the specific instance of an <li> is performed.

      Interesting to compare to React's approach, which is much simpler.

  15. Mar 2015
    1. Angular Style Guide: A starting point for Angular development teams to provide consistency through good practices.

      This is a fantastic and very detailed AngularJS style/best practices guide. Used by hypothesis/h.

    1. ngBoilerplate

      Büyük angularjs projesi için anaçatı - başlangıç noktası - altyapı

  16. Feb 2015
    1. As $resource is a factory, there is no way to make it dynamic.

      angularjs resource içine değişken

  17. Jan 2015
    1. In Angular spies are heavily used on any kind of unit test. When we are testing something, we don’t care about the injected dependencies, we just need to make sure that they were used properly.
    2. Having our spy in place, all what we need to do is to call post.retrieve and then assert that getAll was called and that also post.posts contain our fake posts that were returned by getAll

      so spy is more on the other side of our module, check whether its dependency is used as expected.