On Angular.js

So far Bo Master for the MVVM framework is only a angular, first give everyone clear a concept, angular1.x can be called angular.js, and Angular2, 4, 5 are directly called angular, Since starting from 2 was already developed with typescript, can not be called again as JS Framework, It is to be sure that Ng2 than ng1.x is indeed more powerful, more standardized, developed the performance of the application is relatively strong, but Ng2 too radical changes make the framework use complexity, 1.x users are equivalent to re-learning a development model, user churn serious.

Today, I do not here to do a specific introduction to the function, these are not interesting, just say the pros and cons of angular.js it ~

Advantages:

First of all, Angular.js is the first three front-end framework, which means that it is the front-end of such a framework initiated by the ancestor, this historical status is worthy of our respect.

1. It creatively made a two-way binding development way, {{}} This kind of writing is angular first proposed, this can two-way binding JS inside the "variable" and the HTML data display (so do not need us to manipulate the DOM, we can update the page)

2. Dependency injection (dependency inversion, which depends on the function to decide what to rely on)

Disadvantages:

Because angular too early to appear, some core code is too old, so there are some vue, react no bug

1. Events, assignments, ng-repeat cannot be used simultaneously

<type= "button"  ng-click= "now= $index"  ng-repeat  = "(k,v) in JSON"  value= "{{k}}">

The above will make $scope.now can not be assigned to a successful, this is certainly not our problem, vue,react,ng2+ will not have this problem, to solve this problem, we have to change the wording:

<type= "button"  ng-click= "Setindex ($index)"  Ng-repeat= "(k,v) in JSON"  value= "{{k}}">

Call the function to complete the assignment within the function.

2. Asynchronous data does not sync automatically

Since Angular1.x's two-way binding still uses the old "dirty check" instead of the new observation, if we write ourselves asynchronously to get the data, or the other library's asynchronous fetch data (for example, JQ's $.ajax ({})), asynchronously modifies the data on the $scope, HTML is not automatically updated, we need to manually call the $scope after modification. $apply (), of course we can use the $http provided by angular, you can not write manually trigger dirty check.

3. Content-type of $http. Post

Angular $http. Post module default settings header[' Content-type ', incredibly is Application/json, this is the majority of servers do not recognize, the traditional server is recognized application/ x-www-form-urlencoded

So we have to set the default settings for ourselves again:

Angular.module (' common ', []). config (function($httpProvider) { $httpProvider. defaults.transformrequest =function(data) {Let temp= [];  for(Iinchdata) {Temp.push (encodeURIComponent (i)+ ' = ' +encodeURIComponent (Data[i])); }    returnTemp.join (' & ')); } $httpProvider. defaults.headers.post[ ' content-type ']= ' application/x-www-form-urlencoded ';})

We're going to set the transformrequest (the format conversion before the data is out) and headers.post[' Content-type ') (what kind of data format is it) ? After we have set up the module, we can then directly introduce the dependency on it:

Angular.module (' test1 ', [' common ']);

4. $http. Jsonp Trouble

 Let mod = angular.module (' Test ' ,[]); Mod.controller ( ' Test_c ', function   ($scope, $http, $sce) {$scope. arr  =[";    $scope. Keyword  = "; $scope. $watch ( ' keyword ', function   () {Let URL  = $sce. Trustasresourceurl (' Https: $http. JSONP (url,{jsonpcallbackparam: ' CB '}). Then (Res=>{$scope. arr  = Res.data.s;      },err  =>{alert ( ' wrong ' 

JSONP originally is not safe, but feel superfluous need to use $sce.trustasresourceurl parcel URL, in order to use {jsonpcallbackparam: ' CB '} configuration callback name.

On Angular.js