62 Matching Annotations
  1. Jan 2015
    1. constructor functions

      what constructor function means here, it must be called with new operator? No, it seems I can give what ever function that turn a provider object(provider object means it has property $get)

    2. provider(provider) - registers a service provider with the $injector constant(obj) - registers a value/object that can be accessed by providers and services. value(obj) - registers a value/object that can only be accessed by services, not providers. factory(fn) - registers a service factory function, fn, that will be wrapped in a service provider object, whose $get property will contain the given factory function. service(class) - registers a constructor function, class that will be wrapped in a service provider object, whose $get property will instantiate a new object using the given constructor function

      so basically .service and .factory are just syntax sugar for .provider.

    3. When you request a service, the $injector is responsible for finding the correct service provider, instantiating it and then calling its $get service factory function to get the instance of the service.

      we can only use $provider in .config() function. After that, the real service may be initialized.

    4. An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

      Need link it to actual code.

    1. This method returns a new promise which is resolved or rejected via the return value of the

      When this new promise will be resolved, in the same or different digest cycle?

    1. we created a new toastr object and then we created 3 spies (more on this shortly). After that we just needed to create a new value service that will create/override the toastr one.

      to use our mock.

    2. What about those createSpy? They do more or less the same as spyOn. What’s the difference? spyOn is used to spy an existing function and createSpy will create a dummy spied function. Since our new toastr service has none, we can create spied functions from scratch, handy.

      if we have a real service, we can call spyOn to spy it, if we create mock service of our own, we call createSpy() to get a dummy spied function.

    3. If we have a service (of any kind) with a certain name and we after that create another service (of any kind) with that same name, it will be overriden. That is whycreating a simple value service will override the previous one.

      this override is only for service or also apply to controllers. for example, can we override service with controller. here we can over 'factory' with 'value'.

    4. We replaced the toastr service with one we made right here, in other words, a complete mock.

      so when should we use mock, when should we use spyOn?

    1. We also run a manual $digest to resolve all the promises we have on the mocked service.

      it start a new $digest loop and we can be sure that our mocked server is resolved immediately. In real application, this may not be true.

    2. Testing angular controllers is not hard but a bad controller usage can make our tests a nightmare. We need to keep our controllers as lean as possible.

      For example, if we $watch variable in controller, or modify DOM in controller.

    1. Additionally, NaN compared to anything – even itself! – is false:

      so basically we shouldn't use NaN in our code, right? To test whether a variable is NaN, we can use: value !== value, this could only be true if value is NaN.

    2. variables and functions declared inside of an eval() statement are not created in the containing scope

      this is one point. basically eval will create it's own scope, it may still have access to containing scope, but it won't overwrite conaining loop?

    3. When setting an object property, JavaScript will implicitly stringify the parameter value. In this case, b and c will both be converted to Object.

      this is something I don't know.

    4. A closure is an inner function that has access to the variables in the outer (enclosing) function’s scope chain.

      there is scope chain. Also this has something to do with garbage collection of javascript. it's based on scope reference.

    5. The above behavior is what occurs if you are using use strict. Without use strict both a and b will be defined in the above example (which is yet another reason you should use use strict as a matter of course in your code!).

      how this happened. it's really strange.

    6. weire.

    7. (toString.call(bar) !== "[object Array]"

      this is something I don't know. why use .call here.

    8. The stack overflow is eliminated because the event loop handles the recursion, not the call stack. When nextListItem runs, if item is not null, the timeout function (nextListItem) is pushed to the event queue and the function exits, thereby leaving the call stack clear. When the event queue runs its timed-out event, the next item is processed and a timer is set to again invoke nextListItem. Accordingly, the method is processed from start to finish without a direct recursive call, so the call stack remains clear, regardless of the number of iterations.

      this is very good one. Normally javascript is single threaded and run on a event loop. this loop is on stack. if we have too deep stack trace, like the recursive here, it will overflow. But if we run it in setTimeout(), the event loop will be very clear, but instead we will create a lot of scope. those scope is not on stack.

    9. Passing an array to the push() method of another array pushes that entire array as a single element onto the end of the array.

      push is for single element.

    10. The reverse() method returns a reference to the array itself (i.e., in this case, arr1). As a result, arr2 is simply a reference to (rather than a copy of) arr1.

      point to remember.

    11. Calling an array object’s reverse() method doesn’t only return the array in reverse order, it also reverses the order of the array itself (i.e., in this case, arr1).

      reverse() will also change original string.

    12. But any operator applied to NaN with any other numeric operand will still yield NaN.

      other type with NaN will be concatenated.

    13. it performs automatic type conversion on values to accommodate the operation being performed.

      but the rule is not that rememberable.

    14. function isPalindrome(str) { return str.split('').reverse().join('') === str; }

      split('') reverse and join('')

    15. so what's the guidance to use float number in Javascript.

    16. function foo2() { return { bar: "hello" }; }

      this is really hard to detect.

    17. Throws error on invalid usage of delete. The delete operator (used to remove properties from objects) cannot be used on non-configurable properties of the object. Non-strict code will fail silently when an attempt is made to delete a non-configurable property, whereas strict mode will throw an error in such a case.

      in which case, it's useful?

    18. Disallows duplicate property names or parameter values.
    19. Eliminates this coercion. Without strict mode, a reference to a this value of null or undefined is automatically coerced to the global. This can cause many headfakes and pull-out-your-hair kind of bugs. In strict mode, referencing a a this value of null or undefined throws an error.

      for example, if we call constructor function without new, this will point to 'window', with strict, this will be undefined.

    20. Prevents accidental globals. Without strict mode, assigning a value to an undeclared variable automatically creates a global variable with that name. This is one of the most common errors in JavaScript. In strict mode, attempting to do so throws an error.

      this is most important one.

    21. Prior to ECMA 5, this in the inner function would refer to the global window object; whereas, as of ECMA 5, this in the inner function would be undefined

      since 'this' is undefined, it should throw a exception here.

    1. When working with methods, the value of this is important. By using the apply, call, and bind methods of Function, we can: Change this inside a function, enabling flexible APIs to be created as demonstrated by popular projects like jQuery, Backbone.js, and Express Reduce syntactical overhead when using functions inside methods, and passing methods to other functions Chain calls to constructors

      nice to know.

    2. JavaScript allows us to pass functions around, then execute them in different contexts by taking advantage of call and apply.

      call() and apply() is to manipulate 'this'.

    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.

    1. We create our directive element, we compile it and we test it. To test it, some times we need to check its scope status and also the resulting DOM to check that everything is in place as we expect.

      this is for directive. For controller, basically we are testing the $scope.

    2. led on false positives.

      what false positives means here.

    1. To inject we need to use the inject function (from angular-mocks) which will receive a function with all the stuff we need to inject

      whether it will take a array, same as inline difinition of directive...

    2. To load it and since we need it before each test, we use the module function (from angular-mocks) to load that app module for us. If we have more dependencies like ngRoute, we also need to load it (before app).

      our module's dependency is automatically loaded if we load our module by 'module('sreader2App'), right?

    3. Are you starting to see what we are getting here so far? API design. By using our object before we coded it, we are using the API as we would like to use it. That is a much much better way to define our API.

      this is really cool. we define how to use it first and then implement it.

    1. Compile function: It is used for template DOM Manipulation and collect all of the directives.

      main purpose is to collect all directives. ng-repeat used it.

    2. An injector is a service locator. It is used to retrieve object instances as defined by provider, instantiate types, invoke methods and load modules. There is a single injector per Angular application, it helps to look up an object instance by its name.

      $injector is the first one got initialized after angularjs bootup. it will then initialize $compile and let it walk through DOM.

    3. Link combines the directives with a scope and produce a live view. For registering DOM listeners as well as updating the DOM, link function is responsible. After the template is cloned it is executed.

      the dom element it get is the final dom on the view, so it's safe to modify it here.

    4. Context : In Angular, the expressions are evaluated against a scope object, while the Javascript expressions are evaluated against the global window

      evaluated with $scope. But with new controllerAs syntax, it's evaluated with controller.

    1. Attach a controller to each view (using ng-view and routing, or ng-controller). Have the controller find/get only whatever model data the view needs to do its job. Make controllers as thin as possible.

      controller should be thin.

    2. In AngularJS, you want to think about views rather than DOM elements. Views are (declarative) HTML that contain AngularJS directives. Directives set up the event handlers behind the scenes for us and give us dynamic databinding. Selectors are rarely used, so the need for IDs (and some types of classes) is greatly diminished. Views are tied to models (via scopes). Views are a projection of the model. Events change models (that is, data, scope properties), and the views that project those models update "automatically."

      views are projection of model.

    3. don't design, and then mark up. You must architect, and then design.

      good point.

    1. In the various applications I’ve written in Angular so far, by far the majority of the application’s complexity is in the directives. They are a powerful tool for working with and modifying the DOM,

      my sreader2 should work this way.

    2. Controllers should be used purely to wire up services, dependencies and other objects, and assign them to the view via scope.

      also manage data from service.

    1. One-time binding syntax: In newer versions of Angular (v1.3.0-beta.10+), use the one-time binding syntax {{ ::value }} where it makes sense

      Good one.

    2. Directives and Filters are the only providers that have the first letter as lowercase; this is due to strict naming conventions in Directives.

      Controller and service has first letter as upper case.

    3. DOM manipulation

      means append/remove element, register for listener....

    4. function someDirective () { return { template: [ '<div class="some-directive">', '<h1>My directive</h1>', '</div>' ].join('') }; }

      this is interesting, I don't know this way before.

    5. Controllers should fetch Model data from Services, avoiding any Business logic. Controllers should act as a ViewModel and control the data flowing between the Model and the View presentational layer. Business logic in Controllers makes testing Services impossible.

      very important.

    1. When your code is minified and bundled into a single file for deployment to a production server, you could have collisions of variables and many global variables.

      this is important.

    1. The following create new scopes, and inherit prototypically: ng-repeat, ng-include, ng-switch, ng-view, ng-controller,

      why ng-repeat need create new scope?

    1. Where you give ng-class an object, whose keys are CSS class names and whose values are conditional expressions using $scope variables.


    2. In particular, don't use it for code, only data. If you're tempted to put a function on $rootScope, it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.

      nice point.

    3. ng-repeat is extremely useful, one of the most powerful directives in Angular. However the transformation it applies to the DOM is substantial. Therefore applying other directives (such as ng-show, ng-controller and others) to the same element as ng-repeat generally leads to problems.

      because ng-repeat has high priority and is terminal.

  2. Dec 2014
    1. Upon waking next morning about dayligh

      chapter 5, again?