>

AngulaJS实战总结,必要兵马未动粮草先行未雨策画

- 编辑:至尊游戏网站 -

AngulaJS实战总结,必要兵马未动粮草先行未雨策画

从 Angular 1 升级到 Angular 2 需求希图的步骤

2016/07/09 · JavaScript · AngularJS, 升级

本文由 伯乐在线 - 段昕理 翻译,光光头去打老抽 校稿。未经许可,防止转载!
阿拉伯语出处:Oren Farhi。欢迎参预翻译组。

自家这两天在试玩 Angular 2。刚起先认为很想得到,和大家爱护的第 1 版完全两样。第 1 版是用 ES5 标准的纯 javascript 编写,而第 2 版选择了 typescript 和 es 二零一五。不过,你早已足以采取一些步骤,让你的 Angular 1 代码(或用 Angular 1 成立的新类型卡塔 尔(英语:State of Qatar)特别贴近 Angular 2。

AngulaJS实战总计, 带你进去AngularJS世界(待续卡塔 尔(阿拉伯语:قطر‎

运用AngularJS  举办Hybrid App 开采已经有一年多年华了,这里做三个总括.

 

 

 

黄金时代、AngularJS 开始化加载流程

 

 

 

1、浏览器载入HTML,然后把它剖析成DOM。

2、浏览器载入angular.js脚本。

3、AngularJS等到DOMContentLoaded事件触发。

4、AngularJS搜索ng-app指令,这么些命令提醒了动用的边界。

5、使用ng-app中钦点的模块来安插注入器($injector)。

6、注入器($injector)是用来创制“编写翻译服务($compile service)”和“根效用域($rootScope)”的。

7、编写翻译服务($compile service)是用来编写翻译DOM并把它链接到根效能域($rootScope)的。

8、ng-init指令将“World”赋给功效域里的name这些变量。

9、通过{{name}}的轮流,整个表明式产生了“Hello World”。

 

 

 

二、AngularJS Provider/Service/Factory

 

 

 

1、什么是 provider ?

 

provider 可认为运用提供通用的劳动,格局能够是常量,也得以是目的。

 

诸如大家在 controller 里注入进来的 $http, $scope 都足以以为是 provider。

 

 

app.controller('MainCtrl', function ($scope, $http) {

 

  $http.get(....).then(.....);

 

}

 

 

2、provider  

 

现行反革命让我们和好来定制三个 provider

 

 

// 方法 1

$provide.provider('test', {

 

   n:1;

 

   $get: function () {

至尊游戏网站, 

      return n;

 

    };

 

});

 

// 方法 2

$provide.provider('test', function () {

 

   this.n = 2;

 

   this.$get = function () {

 

   return n;

 

};

 

});

 

// 使用

app.controller('MainCtrl', function ($scope, test) {

    $scope.test = test;

});

  

 

让大家看看 provider 的里边落到实处代码

 

function provider(name, provider_) {

 

  if (isFunction(provider_)) {

 

      provider_ = providerInjector.instantiate(provider_);

 

  }

 

   if (!provider_.$get) {

 

       throw Error('Provider ' + name + ' must define $get factory method.');

 

   }

 

   return providerCache[name + providerSuffix] = provider_;

 

}

 

 

可以看出 provider 的骨干条件就是通过落到实处 $get 方法来拓宽单例注入,使用时收获的正是 $get 实行后的结果。

 

3、factory

 

 

那假如每回都要写叁个 $get 是或不是很劳碌? OK,所以大家有了 factory。 factory 能够说是 provider 的变种, 方法中的第叁个参数正是 $get 中的内容。

 

 

// 定义 factory

 

$provide.factory('dd', function () {

 

   return new Date();

 

});

 

// 使用

 

app.controller('MainCtrl', function ($scope, dd) {

 

    $scope.mydate = dd;

 

});

  

 

 

factory 的得以落成源代码:

 

 

function factory(name, factoryFn) {

 

 return provider(name, {

 

   $get: factoryFn

 

});

 

}

  

 

4、service

 

 

在 factory 的例子中大家依然须求 new 一个对象回来,而 service 就更简便了,这一步都帮您省了, 他的第四个参数正是你要回到的靶子类, 也正是 new 的哦给你专业都毫不你做了。够清爽吧?

 

// 定义 service

 

$provide.service('dd', Date);

 

 

下边是 service 的兑现源代码:

 

 

function service(name, constructor) {

 

  return factory(name, ['$injector', function($injector) {

 

       return $injector.instantiate(constructor);

 

   }]);

}

 

 

然后 factory 和 service 带给代码精练的还要也损失了一些特色。 provider 定义的服务是能够透过模块 config 来安排的。

 

 

 

三、AngularJS 动态添法郎素和删除成分

 

 

$scope.userName='Welcome to Angular World!';

$scope.test = function test(){

console.log('Angular 动态添英镑素');

}

 

//通过$compile动态编写翻译html

var html="<div ng-click='test()'>}</div>";

var template = angular.element(html);

var mobileDialogElement = $compile(template)($scope);

angular.element(document.body).append(mobileDialogElement);

 

// remove移除创设的因素

var closeMobileDialog = function () {

if (mobileDialogElement) {

  mobileDialogElement.remove();

}

 

 

四、AngularJS 事件广播与选用 

 

 

 

出殡新闻: $scope.$emit(name, data) 或然 $scope.$broadcast(name, data);

 

收到消息: $scope.on(name,function(event,data){ });

 

分歧: $emit 广播给父controller   $broadcast 广播给子controller

 

 

 

broadcast 是从发送者向她的子scope广播一个事件。

 

此处正是ParentController发送, ParentController 和 ChildController 会接收到, 而MainController是不会接纳的

 

 

 

$emit 广播给父controller,父controller 是足以接到音讯

 

$on 有四个参数function(event,msg)  第七个参数是事件目的,第三个参数是采用到新闻消息

 

 

 

angular.module('onBroadcastEvent', ['ng'])

     .controller('MainController', function($scope) {

       $scope.$on('To-MainController', function(event,msg) {

         console.log('MainController received:' + msg);

       });

     })

     .controller('ParentController', function($scope) {

       $scope.click = function (msg) {

         $scope.$emit('To-MainController',msg + ',from ParentController to MainController');

         $scope.$broadcast('To-ChildController', msg + ',from ParentController to ChildController');

         $scope.$broadcast('To-BrotherController', msg + ',from ParentController to BrotherController');

       }

     })

     .controller('ChildController', function($scope){

       $scope.$on('To-ChildController', function(event,msg) {

         console.log('ChildController received:' + msg);

       });

     })

     .controller('BrotherController', function($scope){

       $scope.$on('To-BrotherController', function(event, msg) {

         console.log('BrotherController received:' + msg);

       });

     });

 

 

五、AngularJS Promise Deferred实例

 

var app = angular.module('app', ['autocomplete']);

app.factory('Suggestion',

function($http, $q, $timeout){

  var suggestion = new Object();

  suggestion.getData = function(keyword) {

    var deferred = $q.defer();

    $http.get('',

    }).success(function(data){

      deferred.resolve(data);

    });

    return deferred.promise;

  }

  return suggestion;

});

app.controller('MySuggestionCtrl',

function($scope, $sce,Suggestion){

  $scope.autoComplete = function(keyword){

    if(keyword){

        Suggestion.getData(keyword).then(function(data){

        var dataList = data.split('|');

        $scope.dataList = dataList;

      });

    }

  }

});

 多个Promise实例:

 

var data2="222";

var promises = [];

var deffered1  = $q.defer();

var deffered2  = $q.defer();

$timeout(function(){

  deffered1.resolve(data1);

},2000);

$timeout(function(){

  deffered2.resolve(data2);

},2000);

promises.push(deffered1.promise);

promises.push(deffered2.promise);

 $q.all(promises).then(function(data){

    console.log(data);

});

输出: ["111", "222"] 这么些一个数组对象顺序与push的逐生龙活虎生机勃勃致

 

  

 

六、AngularJS 全局scope与Isolate scope通信

 

 

一、scope作用域

1、AngularJS中,子效用域日常都会透过JavaScript原型世襲机制接轨其父效能域的质量和方式。但有贰个分化:在directive中运用scope: { ... },这种办法创设的作用域是三个单独的"Isolate"功效域,它也会有父功效域,但父功能域不在其原型链上,不会对父成效域进行原型世襲。这种形式定义成效域平日用于组织可复用的directive组件.

 

2、借使大家在子效能域中访谈三个父功用域中定义的个性,JavaScript首先在子成效域中探索该属性,没找到再从原型链上的父功能域中寻觅,要是还未有找到会再往上一流原型链的父成效域搜索。在AngularJS中,功效域原型链的最上端是$rootScope,JavaScript寻找到$rootScope甘休.

 

3、scope: { ... } - directive创制三个单身的“Isolate”成效域,未有原型世襲。那是创设可复用directive组件的拔尖选项。因为它不会一向采访/改进父功用域的习性,不会产生意想不到的副功效。

 

 

二、Isolate scope 引用修饰符

1、 = or =attr “Isolate”功能域的品质与父作用域的品质实行双向绑定,任何一方的改换均影响到对方,那是最常用的章程;

 

2、 @ or @attr “Isolate”功用域的性质与父成效域的性质进行单向绑定,即“Isolate”效率域只可以读取父功能域的值,并且该值长久的String类型;

 

3、 & or &attr “Isolate”作用域把父作用域的性格包装成三个函数,进而以函数的章程读写父成效域的属性,包装情势是$parse

 

 

三、directive 与 controller 数据传递和通讯

1、父controller监听全局scope(父scope)变量, 并广播事件给子scope(directive scope,每种directvie皆有友好单独的scope作用域)

 

2、directive 定义本地scope,通过=、@、&(方法)字符展现援引全局scope

 

3、directive scope(子scope)通过parent[$scope.$parent.xxx]援引全局scope的品质

 

4、directive监听全局scope变量变化,能够因此$scope.$parent.$watch方法

 

 

 

四、实例疏解

 

 

 

 

七、AngularJS $apply vs $digest

 

$apply会使ng步向$digest cycle, 并从$rootScope开始遍历(深度优先)检查数据更改。

$digest仅会检讨该scope和它的子scope,当您明确当前操作仅影响它们时,用$digest能够微微提高性能。

意气风发部分无需的操作,放到$timeout里面延迟实行。

若是不关乎数额变动,还足以加上第多个参数false,幸免调用$apply。

directive中推行的$evalAsync, 会在angular操作DOM之后,浏览器渲染从前实行。

controller中实践的$evalAsync, 会在angular操作DOM在此之前实践,常常不那样用。

而利用$timeout,会在浏览器渲染之后实践。

对时间有供给的,第2个参数能够设置为0。

 

$http.get('

  $scope.name = data.name;

  $timeout(function(){

    //do sth later, such as log

  }, 0, false);

});

 

 

    详细:

 

 

 

八、AngularJS Directive 学习 实例

 

 

 

1、restrict 它界定directive为钦点的评释形式。如若简单的话,directive将只有允许通过质量表明

 

E - 成分名称: <my-directive></my-directive>

 

A - 属性名: <div my-directive="exp"></div>

 

C - class名: <div class="my-directive:exp;"></div>

 

M - 注释 : <!-- directive: my-directive exp -->

 

2、dialog实例

 

 

<!DOCTYPE html>

  

<html ng-app="Dialog">

  

<head>

  

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  

  <title>directive-dialog</title>

  

  <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">

  

  <script src="../../sea-modules/angular/angularjs/1.1.5/angular.js"></script>

  

</head>

  

<body>

  

<div ng-controller="MyCtrl">

  

  <button ng-click="show=true">show</button>

  

  <dialog title="Hello }"

  

          visible="}"

  

          on-cancel="show=false;"

  

          on-ok="show=false;methodInParentScope();">

  

    <!--上面的on-cancel、on-ok,是在directive的isoloate scope中通过&引用的。

  

    假如表明式中包涵函数,那么须求将函数绑定在parent scope(当前是MyCtrl的scope卡塔 尔(阿拉伯语:قطر‎中-->

  

    Body goes here: username:} , title:}.

  

    <ul>

  

      <!--这里还是能够那样玩~names是parent scope的-->

  

      <li ng-repeat="name in names">}</li>

  

    </ul>

  

  </dialog>

  

</div>

  

<script type="text/javascript">

  

  var myModule = angular.module("Dialog", []);

  

  myModule.controller("MyCtrl", function ($scope) {

  

    $scope.names = ["name1", "name2", "name3"];

  

    $scope.show = false;

  

    $scope.username = "carl";

  

    $scope.title = "parent title";

  

    $scope.methodInParentScope = function() {

  

      alert("scope里面通过&定义的东东,是在父scope中定义!!。。。");

  

    };

  

  });

  

  myModule.directive('dialog', function factory() {

  

    return {

  

      priority:100,

  

      template:['<div ng-show="visible">',

  

        '    <h3>}</h3>',

  

        '    <div class="body" ng-transclude></div>',

  

        '    <div class="footer">',

  

        '        <button ng-click="onOk()">OK</button>',

  

        '        <button ng-click="onCancel()">Close</button>',

  

        '    </div>',

  

        '</div>'].join(""),

  

      replace:false,

  

      transclude: true,

  

      restrict:'E',

  

      scope:{

  

        title:"@",//援引dialog标签title属性的值

  

        onOk:"&",//以wrapper function情势引用dialog标签的on-ok属性的从头到尾的经过

  

        onCancel:"&",//以wrapper function情势援用dialog标签的on-cancel属性的内容

  

        visible:"@"//援用dialog标签visible属性的值

  

      }

  

    };

  

  });

  

</script>

  

</body>

  

</html>

, 带你步入AngularJS世界(待续卡塔尔使用AngularJS 进行Hybrid App 开采已经有一年多时日了,这里做一个总计. 风华正茂、AngularJS 初阶化加载...

自己怎么要为 Angular 1 搬迁到 Angular 2 做打算

率先,当机缘成熟了,你酌量用 Angular 2 作为框架时,确定想让代码迁移更便于些。这几天,Angular 小组已经提供了有的搬迁政策,你能够勾兑使用 Angular 1 和 Angular 2 组件,但指标是要将代码库统大器晚成,最终只行使三个框架。

说不上,在 Angular 2 中越来越多的是写纯 javascript,然后才是采纳专有的框架代码。

重新,社区和浏览器厂家将逐日拥抱 Ecmascript 的流行正规,所以,坚定不移采纳正式编码,尽或者让代码库可复用,而无论是选取的框架是怎么着。

迁移到 Angular 2 的步骤

接纳那些政策能够令你的代码尤其临近 Angular 2,使转变变得轻便。

1. 开始用 Ecmascript 2015

Angular 2 选择 Typescript 编写,Typescript 是 Ecmascript 二〇一六的超集,带有愈来愈多的风味。可是,要是您不希罕 Typescript, 也能够只用 Ecmascript 贰零壹陆 编写 angular 2。 这几天,代码最后都会编写翻译成 Ecmascript 5。所以实际上你也足以用 Ecmascript 5 来编排 Angular 2。

唯独,以笔者之见,使用 Ecmascript 二零一五的新特征,能够减掉代码量(有个别时候…卡塔 尔(英语:State of Qatar)、加强代码可读性、用上令人高兴的特点,如解构。

假如想选择 Ecmascript 二〇一六的性状,你必要叁个转换器来编译代码。方今最盛行的调换器是 babel。babel 在数不胜数风行的营造脚本中都能够配备,如 gulp、webpack、browserify 及其余。

JavaScript

// 对象属性加强 var exports = { search: search, setType: setType, setDuration: setDuration }; // 能够写成这么 var exports = { search, setType, setDuration }; ///////////// // 使用“胖箭头” => 能够简化代码并加强可读性 var videoIds = response.data.items.map(function(video){ return video.id[idPropertyName[activeType]]; }).join(','); // 使用了胖箭头符号 var videoIds = response.data.items.map((video) => { return video.id[idPropertyName[activeType]]; }).join(',');

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 对象属性增强
var exports = {
    search: search,
    setType: setType,
    setDuration: setDuration
};
// 可以写成这样
var exports = {
    search,
    setType,
    setDuration
};
 
/////////////
// 使用“胖箭头” =>  可以简化代码并增强可读性
var videoIds = response.data.items.map(function(video){
    return video.id[idPropertyName[activeType]];
}).join(',');
 
// 使用了胖箭头符号
var videoIds = response.data.items.map((video) => {
    return video.id[idPropertyName[activeType]];
}).join(',');

2. 使用 “angular.service” 替换 “angular.factory”

动用 Ecmascript 二〇一六 意味着大家得以用新的 “class” 关键字来制造新对象竟然闻一知十别的对象。小编曾经写过,比起三番五次小编越来越热爱于整合,所以自身看不出用 “extend” 完结持续有哪些用途,不过通过 class 的特征确实可以为创立对象增添好用的语法糖(简化代码卡塔尔。

在 angular 1 中的 “service” 和 “factory” 的分别是实例化方法:

“service” 使用 “new” 关键字调用(仅一回卡塔 尔(英语:State of Qatar)

“factory” 使用普通函数调用 — 无需 “new” 关键字。

在 Angular 2 中,Services 使用了 Ecmascript 2014类编写。那会促成你要求将 Angular 1 代码中的 factories 转产生services,并且使用 “class” 替代 function。

举个例子在本人的开源项目-Echoes Player 中,小编使用了“class” 和 Angular“service” 编写 youtube api 服务(作者早前用的是 factory卡塔尔:

JavaScript

(function() { 'use strict'; /* @ngInject */ class YoutubePlayerApi { /* @ngInject */ constructor ($window, $q) { /*jshint validthis: true */ this.deferred = $q.defer(); //当 API 准备好时,Youtube 回调 $window.onYouTubeIframeAPIReady = () => { this.deferred.resolve() }; } // 注入 YouTube 的 iFrame API load () { let validProtocols = ['http:', 'https:']; let url = '//www.youtube.com/iframe_api'; // 大家甘愿利用有关的 url 合同,但为幸免左券不可用,依旧回落到 ‘http:’ if (validProtocols.indexOf(window.location.protocol) < 0) { url = 'http:' + url; } let tag = document.createElement('script'); tag.src = url; let firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); return this.deferred.promise; } } angular .module('youtube.player') .service('YoutubePlayerApi', YoutubePlayerApi); })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
(function() {
    'use strict';
 
    /* @ngInject */
    class YoutubePlayerApi {
 
        /* @ngInject */
        constructor ($window, $q) {
            /*jshint validthis: true */
            this.deferred = $q.defer();
            //当 API 准备好时,Youtube 回调
            $window.onYouTubeIframeAPIReady = () => {
                this.deferred.resolve()
            };
        }
 
        // 注入 YouTube 的 iFrame API
        load () {
            let validProtocols = ['http:', 'https:'];
            let url = '//www.youtube.com/iframe_api';
 
            // 我们愿意使用相关的 url 协议,但为避免协议不可用,还是回退到 ‘http:’
            if (validProtocols.indexOf(window.location.protocol) < 0) {
                url = 'http:' + url;
            }
            let tag = document.createElement('script');
            tag.src = url;
            let firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
            return this.deferred.promise;
        }
    }
 
    angular
       .module('youtube.player')
       .service('YoutubePlayerApi', YoutubePlayerApi);
})();

3. 编写 Controllers 时使用 “Class” 替换 “function”

这一步和上一步多少多少相像。Angular 1 中的 Controllers 总是不停被重新创建(或 “新建”卡塔尔- 因为它们不是单例。

Angular 2 大致不用 controllers。

反之,Angular 2 是根据组件的。各样组件都有三个简短的类(包罗一丢丢 es7 声明卡塔 尔(阿拉伯语:قطر‎来决定。假诺你的 Angular 1 代码是用 web 组件情势来编排的,那么很大概每一种指令(directive卡塔 尔(阿拉伯语:قطر‎都对应多个 controller 函数来决定。

有个十分重的点必需意识到 - 指令的概念在 Angular 2 中尤其简明:

  1. 利用了成分选用器的命令都以组件。
  2. 剩下的都以命令。

Angular 2 照旧会在中间初叶化 services 和 controllers,不要本人去开始化,因为那样会招致代码很难测量检验。可是 Angular 2 要么轻便测验并对 TDD (测验驱动开荒卡塔 尔(阿拉伯语:قطر‎ 和 BDD(行为使得开拓卡塔 尔(阿拉伯语:قطر‎友好。小编还写过大器晚成篇小说,内容是讲怎么应当封装 “new” 关键字,进而写出更易于测量检验的代码。

举例把 controller 写成类,会使代码迁移到 angular 2 组件变得非常轻便:

JavaScript

class DurationCtrl { /* @ngInject */ constructor (YoutubeSearch) { this.YoutubeSearch = YoutubeSearch; this.durations = [ 'Any', 'Short (less then 4 minutes)', 'Medium (4-20 minutes)', 'Long (longer than 20 minutes)' ]; this.durationsMap = [ '', 'short', 'medium', 'long' ]; } onDurationChange (duration, index) { this.YoutubeSearch.setType(this.YoutubeSearch.types.VIDEO); this.YoutubeSearch.setDuration(this.durationsMap[index]); this.YoutubeSearch.search(); } } angular .module('echoes') .controller('DurationCtrl', DurationCtrl);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class DurationCtrl {
    /* @ngInject */
    constructor (YoutubeSearch) {
        this.YoutubeSearch = YoutubeSearch;
        this.durations = [
            'Any',
            'Short (less then 4 minutes)',
            'Medium (4-20 minutes)',
            'Long (longer than 20 minutes)'
        ];
        this.durationsMap = [
            '',
            'short',
            'medium',
            'long'
        ];
    }
 
    onDurationChange (duration, index) {
        this.YoutubeSearch.setType(this.YoutubeSearch.types.VIDEO);
        this.YoutubeSearch.setDuration(this.durationsMap[index]);
        this.YoutubeSearch.search();
    }
}
 
angular
    .module('echoes')
    .controller('DurationCtrl',  DurationCtrl);

4. 接收指令封装代码

在这里一步,你供给重新思索代码,并且动用更加好的架构。从 组件(components)/指令(directives) 的角度早先钻探。千万不要在 index.html 或别的未涉嫌指令的沙盘中编辑任何 Angular 代码。举个例子:假令你在风姿洒脱段描述个人资料卡牌的代码中接纳了 ng-repeat, 你能够创立一个指令,“<person-profile-card>” 或然“<profile-cards>” (作为贰个列表卡塔 尔(阿拉伯语:قطر‎。

XHTML

<div ng-repeat="person in vm.persons"> <img ng-src="person.thumb"> <h3>{{:: person.name }}</h3> <aside>{{:: person.moto }}</aside> <p> {{:: person.description }} </p> </div> <!-- 能够转变到三个零件--> <div ng-repeat="person in vm.persons"> <person-profile-card model="person"></person-profile-card> </div> <!-- 能够变成另叁个列表组件 --> <profile-cards items="vm.persons"></profile-cards>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div ng-repeat="person in vm.persons">
    <img ng-src="person.thumb">
    <h3>{{:: person.name }}</h3>
    <aside>{{:: person.moto }}</aside>
    <p>
        {{:: person.description }}
    </p>
</div>
<!-- 可以转换成一个组件   -->
<div ng-repeat="person in vm.persons">
    <person-profile-card model="person"></person-profile-card>
</div>
<!-- 可以成为另一个列表组件 -->
<profile-cards items="vm.persons"></profile-cards>

在就要临蓐的 Angular 1.5 版本里,你能够使用 ”angular.component“ 定义来创立组件,使得语法( 出自 todd motto 之手卡塔 尔(英语:State of Qatar)比指令(directive) 越来越美观。

切记,组件搭配组件(或指令卡塔 尔(阿拉伯语:قطر‎ 正是 Angular 2 的漫天,从这几个角度思考,将拉动你越来越好的重复组织代码,也更易于选择Angular 2。

5. 接收 Angular2to1,ng-upgrade 或任何格局

Angular 2 采纳了四个归纳雅观的语法来定义组件(指令)。为了在 es5 代码中心得 Angular 2 的机件语法,作者创立了八个 npm 模块 “angular2to1”。示例,你能够在 Angular 1 选择中动用 Angular 2 的 es5 标准语法来定义一个命令:

JavaScript

var myApp = ng .Component({ selector: 'youtube-videos' providers: [ 'core.services' ], bindings: { videos: '@' } }) .View({ templateUrl: 'app/youtube-videos/youtube-videos.tpl.html' }) .Class({ constructor: 'YoutubeVideosCtrl' })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var myApp = ng
    .Component({
        selector: 'youtube-videos'
        providers: [
            'core.services'
        ],
        bindings: {
            videos: '@'
        }
    })
    .View({
        templateUrl: 'app/youtube-videos/youtube-videos.tpl.html'
    })
    .Class({
        constructor: 'YoutubeVideosCtrl'
    })

那和概念三个 Angular 1 下令等效:

JavaScript

angular .module('youtube-videos', [ 'core.services' ]) .directive('youtubeVideos', youtubeVideos); /* @ngInject */ function youtubeVideos () { var directive = { controller: 'YoutubeVideosCtrl', controllerAs: 'vm', restrict: 'E', replace: true, template: 'app/youtube-videos/youtube-videos.tpl.html', bindToController: true, scope: { videos: '@' } }; return directive; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
angular
        .module('youtube-videos', [
            'core.services'
        ])
        .directive('youtubeVideos', youtubeVideos);
 
    /* @ngInject */
    function youtubeVideos () {
        var directive = {
            controller: 'YoutubeVideosCtrl',
            controllerAs: 'vm',
            restrict: 'E',
            replace: true,
            template: 'app/youtube-videos/youtube-videos.tpl.html',
            bindToController: true,
            scope: {
                videos: '@'
            }
        };
        return directive;
    }

有大气的选项可供使用。

ng-upgraders 是一个代码饭馆,满含了 Angular 2 进级政策的财富链接。里面有意气风发对珠辉玉映的类型,有的种类提供了在 Angular 第11中学生运动用 Angular 2 的 typescript 评释及 Ecmascript 贰零壹伍的或者,那样差不离能够完全用 Angular 2 的语法来写 Angular 1 了。

其余,有相当多在 Angular 1 中运用 Ecmascript 2016的建设方案,无论是从软件架构如故 Angular 推荐架构的角度来看,都持始终如一了最好施行和严苛法规。

自个儿相比赏识的多少个类型是: NG6-Starter , 项目包蕴使用 Ecmascrpipt 贰零壹伍编写 Angular 1 利用的龙骨代码,组件生成器,测量试验配置和更多内容。

6. (彩蛋卡塔 尔(英语:State of Qatar)使用模块加载器 system.js、webpack、browserify 或别的工具

持有 Angular 2 例子都凭仗于 System.js 库的机件懒加运载飞机制。System.js 既允许大家运用懒加载,也足以编译成压缩好的纯净文件用于坐蓐情状。那样你就能够在不一样的公文中编辑组件(components)和服务(services),不管创设还是支付,都利用构建脚本来毁灭正视关系。

In addition, if you rather use gulp.js, webpack or browserify – that’s a no brainer and can be easily configured and integrated.

别的,假若你正是爱好用 gulp.js、webpack 或 browserify - 完全没理由。不要紧,配置和移植都比较轻易。

总结

自身援救于据守规范。作者认为 Ecmascript 贰零壹伍 最后会化为了 javascript 语言下一代正式标准,所以,有理由去采纳它(作者事先也写过卡塔尔并且拥抱变化。

假设此外的框架、平台和库拥抱了 Ecmascript 2014 规范,全体人都会受益。咱们能够用更加灵敏的方法编码,同不常间在不一样的库和品种中国共产党享代码。

1 赞 1 收藏 评论

关于作者:段昕理

至尊游戏网站 1

因为iPod而爱上苹果的生龙活虎体系付加物,非常确定他们追求十二万分的旺盛。专业之余,喜欢前端的开源项目,Github( 个人主页 · 作者的稿子 · 15 ·    

至尊游戏网站 2

本文由门户名站发布,转载请注明来源:AngulaJS实战总结,必要兵马未动粮草先行未雨策画