Diigo Diary 08/30/2014

• AngularJS Custom Directives

  tags: angular tutorial

• Filter vs. ngHide With ngRepeat In AngularJS

  tags: filter angular

• AngularJS: Developer Guide: HTML Compiler

  • Angular’s HTML compiler allows the developer to teach the browser new HTML syntax. The compiler allows you to attach behavior to any HTML element or attribute and even create new HTML elements or attributes with custom behavior. Angular calls these behavior extensions directives.

  • Compiler

     

    Compiler is an Angular service which traverses the DOM looking for attributes. The compilation process happens in two phases.

     

     

    1. Compile: traverse the DOM and collect all of the directives. The result is a linking function.

        

     

    2. Link: combine the directives with a scope and produce a live view. Any changes in the scope model are reflected in the view, and any user interactions with the view are reflected in the scope model. This makes the scope model the single source of truth.

  • HTML compilation happens in three phases:

     

     

    1. $compile traverses the DOM and matches directives.

        

       If the compiler finds that an element matches a directive, then the directive is added to the list of directives that match the DOM element. A single element may match multiple directives.

        

     

    2. Once all directives matching a DOM element have been identified, the compiler sorts the directives by their priority.

        

       Each directive’s compile functions are executed. Each compile function has a chance to modify the DOM. Each compile function returns a link function. These functions are composed into a “combined" link function, which invokes each directive’s returned link function.

        

     

    3. $compile links the template with the scope by calling the combined linking function from the previous step. This in turn will call the linking function of the individual directives, registering listeners on the elements and setting up $watchs with the scope as each directive is configured to do.

  • var $compile = …; // injected into your code  var scope = …;  var parent = …; // DOM element where the compiled template can be appended   var html = ‘<div ng-bind="exp"></div>’;   // Step 1: parse HTML into DOM element  var template = angular.element(html);   // Step 2: compile the template  var linkFn = $compile(template);   // Step 3: link the compiled template with the scope.  var element = linkFn(scope);   // Step 4: Append to DOM (optional)  parent.appendChild(element);
  • Note: Link means setting up listeners on the DOM and setting up $watch on the Scope to keep the two in sync.
  • title: ‘@’, // the title uses the data-binding from the parent scope

• AngularJS: Developer Guide: Directives

  • At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) that tell AngularJS’s HTML compiler ($compile) to attach a specified behavior to that DOM element or even transform the DOM element and its children.
  • When Angular bootstraps your application, the HTML compiler traverses the DOM matching directives against the DOM elements.
  • When using ngAttr, the allOrNothing flag of $interpolate is used, so if any expression in the interpolated string results in undefined, the attribute is removed and not added to the element.
  • 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.
  • Note: These =attr attributes in the scope option of directives are normalized just like directive names. To bind to the attribute in <div bind-to-this="thing">, you’d specify a binding of =bindToThis.
  • Best Practice: Use the scope option to create isolate scopes when making components that you want to reuse throughout your app.

  • Directives that want to modify the DOM typically use the link option. link takes a function with the following signature, function link(scope, element, attrs) { ... } where:

     

     
    • scope is an Angular scope object.

     

    • element is the jqLite-wrapped element that this directive matches.

     

    • attrs is a hash object with key-value pairs of normalized attribute names and their corresponding attribute values.
  • Best Practice: Directives should clean up after themselves. You can use element.on('$destroy', ...) or scope.$on('$destroy', ...) to run a clean-up function when the directive is removed.
  • scope: {  ‘close’: ‘&onClose’  },
  • The & binding allows a directive to trigger evaluation of an expression in the context of the original scope, at a specific time.
  • Because of this, & bindings are ideal for binding callback functions to directive behaviors.
  • The myPane directive has a require option with value ^myTabs. When a directive uses this option, $compile will throw an error unless the specified controller is found. The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).
  • If it is necessary to reference the controller or any functions bound to the controller’s scope in the template, you can use the option controllerAs to specify the name of the controller as an alias.
  • The basic difference is that controller can expose an API, and link functions can interact with controllers using require.

• EasyCriteria 2.0 – JPA Criteria should be easy | uaiHebert       (:

  tags: jpa criteria

• Java Persistence/Advanced Topics – Wikibooks, open books for an open world

  • A database VIEW is a virtual view of a table or query. Views are useful for hiding the complexity of a table, set of tables, or data-set.

     

    In JPA you can map to a VIEW the same as a table, using the @Table annotation.

• Activity stream | Patterns | Atlassian Design Guidelines

  • Each activity stream entry is timestamped, and usually has an actor, an action, and a subject or object of the action.
  • Activity streams typically surface links to the objects they reference, so users can click through to the application for more information.

• 使用超动感HTML & JS开发WEB应用! | AngularJS中文社区

  tags: angular howto good

• 《AngularJS》5个实例详解Directive（指令）机制 – 天上的神明与星辰，人间的艺术和真纯，我们所敬畏和热爱的，莫过于此。 – ITeye技术网站

  tags: angular

  • Angular到底是如何进行替换的呢？嗯嗯，这个过程分2个阶段，也就是本节标题所说的compile（编译）和link（连接）了。
  • 比方说，你有一些事件需要绑定到某个元素上，那么你需要提供一个link函数

Posted from Diigo. The rest of my favorite links are here.