Angularjs encapsulation Instruction Method detailed _angularjs

The Angularjs encapsulation instruction method is described in the example. Share to everyone for your reference, specific as follows:

Introduction: Angularjs is a medium-heavyweight front-end development framework

HTML is a good language for static text design, but it is very weak to build a dynamic Web application. In general, we use the following techniques to address the shortcomings of static web technology in building dynamic applications:

1. Class Library: Class Library is a set of functions, it can help you write Web applications. The dominant role here is your code, and it is up to you to decide when to use the class library. A typical class library, such as prototype, jquery, and so on.

2. Framework: A special, implemented Web application that you only need to populate with specific business logic. The framework here is the dominant one, by which it invokes your code according to the specific logic. Typical framework such as Knockout,sproutcore, Yui and so on. Angularjs is one of them.

The frame has the weight of the point. My judgment on severity is whether you need a lot of third-party libraries to help you achieve functionality. Obviously, backbone is a lightweight framework that is easy to use and focused on front-end MVC implementations, so you need a lot of third-party libraries (at least jquery) to do all kinds of things like DOM operations, UI, and more. Yui, dojo belong to heavy frame, their authors attempt to work out a Senrovan framework + component library, including code dynamic invocation, all kinds of UI components are included, learning cost is high, but once proficient, at least this project has nothing to ask for. From this perspective, lightweight frames are like roughcast rooms and require a variety of tools to be renovated, but also more flexible for developers. The heavyweight framework is like a decorated room, you just need to adapt to it, but if you want to make drastic changes, then a little hurt through the bone.

Angularjs, which seems to me to be between the two categories, is a medium-heavyweight framework. That is not as simple as backbone, and not like Dojo and Yui so all-encompassing. Many times, the attempt to all-encompassing, often appear many sub modules of the quality underachievement, and modified more difficult. Too thin, the framework content is thin need to write too much content. Angularjs This relatively moderate style, it is very consistent with my needs. For now, the three Angularjs I think are the most subtle components are data binding (Scope), instruction (Directive) and dependency injection (Dependency injection), which is very good. In contrast, its UI components and animations are weaknesses. It can be said that the choice of angularjs, means that the jquery-style component library to make up for its shortcomings, to complete a Web application must deal with the Third-party class library.

There are already a lot of UI Plug-ins for Angularjs, some combined with bootstrap, some combined with jquery, although not perfect, are worth reference: http://angular-ui.github.io/

Collaboration with the JQuery class library

The third party class library, has to mention is the famous jquery, now basically is the domestic web development of the required tools. Its flexible DOM operations allow many web developers to stop. Coupled with the already mature jquery UI library and a large number of jquery plug-ins, is almost an inexhaustible treasure house. However, can it be combined with ANGULARJS?

Many angularjs fundamentalists have a negative attitude towards this. They believe that since the use of ANGULARJS as a Web application framework, it is necessary to avoid other classes of library interference, do pure MVVM mode application. Any DOM operation like jquery is unclean. All interface-related, such as DOM operations, are placed in directive, so that the page is directive without code, consistent with the JSF idea. MVVM,DSL, modular Thinking this is the trend of the web. Well, the idea is good, the fundamentalists are so pure. But the truth is, we can't live without jquery using Angularjs.

As we all know, Angularjs has a built-in jquery lite, and many of the methods in Angularjs source code are directly using the jquery method. For example, the Angularjs event binding mechanism. Since the prophets are using them, why don't we use them? The idea of component-based is not wrong, but there is no need to tie your hands and feet. The only thing to be aware of is not to use jquery's code to break the ANGULARJS structure. My principle is as follows, the deficiencies also please point out:

In the important aspects of module partitioning, service, routing, Dependency injection, Angularjs is used, and only certain content (usually some UI) uses jquery. Avoid writing a bunch of jquery code in controller that directly manipulate DOM elements. Use the Angularjs template binding mechanism. Commonly used components are extracted using ANGULARJS methods, but component implementations do not have to dwell on the use of jquery and its plug-ins. When using a Third-party class library, there is a special tag (usually the abbreviation for this class library name) when the variables and functions are named.

jquery is also recommended as a angularjs dependency, preceded by Angularjs loading.

In fact, choosing a angularjs such as a medium-German heavyweight means you have to add another class library. And jquery, it is recommended as a angularjs dependency, before the Angularjs loaded in. Because when I look at the Angularjs API, I've found that many of these features actually depend on jquery. The typical example is the official website's Ng-blur instruction.

<input type= "text" ng-model= "name" ng-blur= "CheckName ()" > Ng-blur directives are instructions that are triggered when the focus leaves an element. For the previous example, the CheckName () function is triggered when the focus leaves the text input box.

It looks simple, but if you really use this command, you'll find it doesn't work. After looking at the document carefully, I realized that this was actually a function that the prophets implemented using the Blur method of jquery (and in fact it was not actually implemented and placed in the current version). So even if we want to write one, leaving the jquery native library is not going to work because the blur method is not encapsulated in the Angularjs jquery lite. In other words, you must load the full jquery before you can use it. So, I simply wrote a label myself:

* * Angular directive onBlur
* *
@description my ng-blur
* @require jquery
/
$ Compileprovider.directive (' OnBlur ', function () {return
  {
    restrict: ' A ',
    link:function (Scope, elm, attrs {
      elm.bind (' Blur ', function () {
        scope. $apply (Attrs.onblur);});};})
;

That's good enough.

But it's not perfect enough. Because the $apply method accepts a function problem, it is written directly like the above, which can cause Angularjs to run the Times wrong: $apply already in progress

To avoid this problem, the $apply method needs to be machined:

* Factory function safeapply
*
* @description If you find yourself triggering the ' $apply already in progress ' er Ror while developing with Angular.js
* (For me I find I hit most often then integrating third party plugins that Trigg Er a lot of DOM events),
* You can use a ' safeapply ' method This checks the current phase before executing your FUNCTI On.
*
@param scope, the action scope, mostly is the topmost controller
* @param fn, the function which you want to a Pply into Scope
* @see https://coderwall.com/p/ngisma
*/.factory (' safeapply ', function ($rootScope) {
  return function (scope, FN) {
    var phase = scope. $root. $ $phase;
    if (phase = = ' $apply ' | | | phase = = ' $digest ') {
      if (fn && (typeof (fn) = = ' function ')) {
        fn ();
      }
    else {
      scope. $apply (FN);}
    }
);

Then the previous onblur label should be changed to:

* * Angular directive onBlur
* *
@description my ng-blur
* @require jquery
/
$ Compileprovider.directive (' OnBlur ', function (safeapply) {return
  {
    restrict: ' A ',
    link:function (scope, Elm, attrs) {
      elm.bind (' Blur ', function () {
        safeapply (scope, Attrs.onblur);
      });
    }
  ;
};

The above code I have already joined own Angular_extend module, uses in own project, the effect is very good.

Example of encapsulating a jquery plug-in as a component in a angularjs way

Icheck is a jquery plug-in that is used to beautify the checkbox and the radio button across browsers. The introduction of it, in the http://www.bootcss.com/p/icheck/

In general, it is used by adding a piece of jquery code after the DOM is loaded:

$ (' input '). Icheck ({
  labelhover:false,
  cursor:true,
  checkboxclass: ' Icheckbox_square-blue '
  , Radioclass: ' Iradio_square-blue ',
  increasearea: ' 20% '
});

But since you want to put it in our project, you can't plug in the jquery code that directly operates on the DOM, which is both beautiful and difficult to maintain. According to the previous principle, it is best to encapsulate it into a angular instruction pattern, which is called in the public module. Here I named my new directive Ng-icheck. So, just write it in a checkbox or radio HTML tag and add a ng-ickeck. The concrete implementation is as follows:

* * Angular directive ng-icheck * * * @description Icheck is a plugin of jquery for beautifying checkbox & Radio, n ow I complied it with angular directive * @require jquery, Icheck * @example <input type= "Radio" ng-model= "Paomian" V Alue= "Kangshifu" ng-icheck> * <input type= "checkbox" class= "Icheckbox" name= "Mantou" ng-model= "Mantou" Ng-ichec  K checked> */$compileProvider. Directive (' Ngicheck ', function ($compile) {return {restrict: ' A ', require:
      '? Ngmodel ', Link:function ($scope, $element, $attrs, $ngModel) {if (! $ngModel) {return;  //using Icheck $ ($element). Icheck ({labelhover:false, cursor:true, Checkboxclass : ' Icheckbox_square-blue ', Radioclass: ' Iradio_square-blue ', Increasearea: ' 20% '}. On (' ifclicked
          ', function (event) {if ($attrs. Type = = "checkbox") {//checkbox, $ViewValue = true/false/undefined $scope. $apply (function () {$ngModel. $setViewValue (!) ( $ngModel. $modelValue = = undefined?
          False: $ngModel. $modelValue));
        }); else {//radio, $ViewValue = $attrs. Value $scope. $apply (function () {$ngModel. $setViewV
          Alue ($attrs. Value);
        });
    }
      });
},
  };

 });

It is worth noting in the above code: after using the Icheck plugin, a glorified div is created to cover the original checkbox or radio, and the original checkbox or radio will be shadow hidden. Therefore, when we click on them, we do not trigger the event directly, so that the model value bound to the checkbox or radio is changed. So we need to rebind the event here, using the

$ngModel. $setViewValue () method to assign a value to the model. The specific logic differs according to the checkbox and the radio. Please refer to the above code.

Because the code above is written in my project's generic module Common_angular_ Component.js, so in the call to the general module of the page, the direct use of Ng-icheck instructions can achieve ickeck beautification effect, while avoiding a large number of repeated jquery code appear.

More readers interested in ANGULARJS related content can view the site topics: "Angularjs Introduction and Advanced Tutorials" and "ANGULARJS MVC Framework Summary"

I hope this article will help you to Angularjs program design.