zoukankan      html  css  js  c++  java
  • Angular.js浅谈

    至今博主对于MVVM框架比较了解的就只能算有Angular了,首先给大家明确一个概念,Angular1.x才能叫Angular.js,而Angular2、4、5都直接叫Angular了,因为从2开始已经是用TypeScript开发的了,不能再称它为js框架,值得肯定的是Ng2比Ng1.x的确更强大,更加规范,开发出来的应用的性能也相对变强了些,不过Ng2的太过激进的变动使得框架使用复杂度变大,1.x的用户相当于要重新学习一种开发模式,用户流失严重。


    今天呢,我不在这里做具体的功能介绍,这些没什么意思,就说一下Angular.js的优缺点吧~

    优点:

    首先Angular.js是前端三大框架最早出来的,这意味着它是前端这类框架创始的始祖,这个历史地位还是值得我们尊重的。

    1.它创新性地做出了双向绑定的开发方式,{{}}这种写法就是Angular率先提出的,这种可以双向绑定js里面的“变量”和HTML的数据显示(这样不需要我们再去自己操作dom,就可以更新页面)

    2.实现了依赖注入(依赖反转,由函数来决定要什么依赖)

    缺点:

    由于Angular太早出现,一些核心的代码还是过于陈旧,从而有一些Vue、React没有的Bug

    1.事件、赋值、ng-repeat不能同时使用

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

    以上会使得$scope.now无法赋值成功,这当然不是我们的问题,Vue,React,Ng2+都不会出现这种问题,要解决这个问题,我们要换一种写法:

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

    调用函数在函数内部完成赋值的工作。

    2.异步数据不会自动同步

    由于Angular1.x的双向绑定依然使用旧的“脏检查”,而不是新的Observation,如果我们自己写异步获取数据,或者其他库的异步获取数据(例如JQ的$.ajax({})),异步修改$scope上的数据,HTML上是无法自动更新的,我们需要在修改后,手动调用一次$scope.$apply(),当然我们可以使用Angular提供的$http,就可以不用写手动触发脏检查了。

    3.$http.post的Content-Type

    Angular $http.post模块默认设置的Header['Content-Type'],居然是application/json,这个是大部分服务器不认,传统的服务器认的是application/x-www-form-urlencoded

    所以我们还要把默认设置自己给设置一遍:

    angular.module('common',[]).config(function($httpProvider){
      $httpProvider.defaults.transformRequest=function(data){
        let temp = [];
        for(i in data){
          temp.push(encodeURIComponent(i)+'='+encodeURIComponent(data[i]));
        }
        return temp.join('&');
      }
     $httpProvider.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded';
    })

    我们要设置好transformRequest(数据传出前的格式转换)headers.post['Content-Type'](数据格式是哪种),设置好了之后我们之后写module的时候直接引入依赖就可以了:

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

    4.$http.jsonp 麻烦

    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://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=${$scope.keyword}`);
          $http.jsonp(url,{jsonpCallbackParam:'cb'}).then(res=>{
              $scope.arr = res.data.s;
          },err=>{
              alert('错了');
          });
        })
    });

    jsonp本来就是不安全的,但是感觉多此一举的需要用$sce.trustAsResourceUrl包裹一下url,才能用{jsonpCallbackParam:'cb'}配置callback的名字。

  • 相关阅读:
    [SQL Server] 数据库日志文件自动增长导致连接超时的分析
    Visual Studio 2003/Visual Studio 2005常用快捷键(快捷方式)
    設置RichTextBox控件中選中的部分的文字突顯
    電功率單位
    一名25岁的董事长给大学生的18条忠告
    計算機端口
    學習使用Directionary與Hastable
    VS .NET如何切換環境
    VS .NET(C#)如何動態創建控件
    VS .NET(C#)測試程序記錄時間方法
  • 原文地址:https://www.cnblogs.com/amiezhang/p/8159041.html
Copyright © 2011-2022 走看看