澳门新萄京官方网站-www.8455.com-澳门新萄京赌场网址

澳门新萄京官方网站AngulaJS实战总结,需要准备的

2019-12-01 作者:澳门新萄京赌场网址   |   浏览(99)

从 Angular 1 晋级到 Angular 2 需要预备的步调

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

本文由 伯乐在线 - 段昕理 翻译,光光头去打老抽 校稿。未经许可,制止转发!
乌克兰(УКРАЇНА卡塔尔国语出处:Oren Farhi。款待参加翻译组。

自个儿多年来在试玩 Angular 2。刚带头感到很奇异,和我们爱护的第 1 版完全不一样。第 1 版是用 ES5 标准的纯 javascript 编写,而第 2 版选取了 typescript 和 es 2016。可是,你早就得以动用一些手续,让您的 Angular 1 代码(或用 Angular 1 创立的新品类)越发切近 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卡塔尔(英语:State of Qatar)。

6、注入器($injector卡塔尔是用来创建“编写翻译服务($compile service卡塔尔(قطر‎”和“根效率域($rootScope卡塔尔(قطر‎”的。

7、编写翻译服务($compile service卡塔尔(英语:State of Qatar)是用来编写翻译DOM并把它链接到根功能域($rootScope卡塔尔(英语:State of Qatar)的。

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 的变种, 方法中的第1个参数正是 $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

澳门新萄京官方网站AngulaJS实战总结,需要准备的步骤。 

澳门新萄京官方网站AngulaJS实战总结,需要准备的步骤。$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 动态添美金素'卡塔尔(英语:State of Qatar);

}

 

//通过$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,通过=、@、&(方法卡塔尔(英语:State of Qatar)字符展现引用全局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,会在浏览器渲染之后施行。

对时间有供给的,第1个参数能够设置为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 起始化加载...

1

1.认识AngularJS
MVx概念
Angular是什么
扩展了HTML的功能
颠覆性、可扩展
为何使用angular
制止重复劳动,专一于事情逻辑

2.AngularJS中坚选拔
最简便易行的例子
ng-model
ng-bind
ng-app——范围、共存
Angular的特点
双向绑定——可输入、可输出
依赖于注入
由选择方决定要什么样——饭馆的例子
ng-bind并不好
全总都得变

3.模板技巧
{{}}
能够改良,平日不用
angular和JS不互通
变量不互通、函数不互通、事件不互通
事件
onclick不行
ng-click
再一次:angular必需用ng-的那生龙活虎套
后生可畏旦想要angular和JS互通,需求Controller——前面说

ng-init初始化数据
    ng-repeat循环
        value、(key,value)
        数组、json
        嵌套数据
    不适合放太复杂的数据

4.Controller
什么是Controller
调节器——业务逻辑都应有写在那(HTML里就不应有现身大段代码,那和过去同样)
Controller用法1:放数据
$scope——只好叫那么些名字
由来:信任注入
Controller用法2:放函数
桥梁

依赖注入的两种方式
    写名字——不能乱写
        app.controller(name, function ($1, $2){});
    数组
        app.controller(name, ['$1', '$2', function (a, b){}]);

过滤器-filter
    例子:item.price | currency
    例子:item.time | date:"yyyy-MM-dd HH:mm:ss"
    过滤、转换

链接、图片
    ng-src
    ng-href
    其他常用指令:ng-show、ng-hide、ng-clack

5.常用信赖项
$scope
$location
$location.absUrl(卡塔尔(قطر‎ 整个相对路线
$location.url() path部分
$location.protocol(卡塔尔(英语:State of Qatar) 合同部分-http
$location.host(卡塔尔 域名(不含端口卡塔尔国

首先有些、底蕴知识
--------------------------底工知识--------------------------
1.AngularJS功底情状搭建
服务器配置

This is the Angular.js study note of Shaping up with Angular.js.

Shaping up with Angular.js is a set of videos teaching angular.js.

本身怎么要为 Angular 1 搬迁到 Angular 2 做计划

率先,当时机成熟了,你计划用 Angular 2 作为框架时,明确想让代码迁移更便于些。最近,Angular 小组已经提供了有的搬迁政策,你能够勾兑使用 Angular 1 和 Angular 2 组件,但指标是要将代码库统风姿罗曼蒂克,最后只使用一个框架。

附带,在 Angular 2 中更加的多的是写纯 javascript,然后才是应用专有的框架代码。

重复,社区和浏览器商家将日趋拥抱 Ecmascript 的风尚专门的学业,所以,持有始有终利用正规编码,尽恐怕让代码库可复用,而无论选择的框架是哪些。

$location.port() 端口

$location.search() => {xx, xx}
$location.search('a') => {a: xxx}
$location.search('a', 'b') => {a: xxx, b: xxx}

6.ajax数额交互作用——$http
$http.get(url, {}).then(succ, error);
返回res:data

$http.get(url, {
    params: json,
    timeout: number,
    responseType: ""/"text"/"json"/"blob"/...
    cache: boolean
})

----------------------------------------------------

$http.get/post/header/put/delete...

promise引用方式、jsonp
    success/error——直接出结果

实例:PC端小页面(博客园和讯)

2.AngularJS前后相继基本组织
ng-app AngularJS接管的限量(子元素卡塔尔国
ng-model 数据模型(双向绑定卡塔尔(قطر‎
ng-bind 输出
{{}} 模板(输出)

澳门新萄京官方网站 1

迁移到 Angular 2 的步骤

行使这么些政策能够令你的代码特别临近 Angular 2,使转换变得轻便。

2

率先部分、底工知识
--------------------------基本功知识--------------------------
1.AngularJS底工情状搭建
服务器配置

2.AngularJS程序基本组织
ng-app AngularJS接管的界定(子成分卡塔尔
ng-model 数据模型(双向绑定卡塔尔
ng-bind 输出
{{}} 模板(输出)

实例:文章预览

3.AngularJS表达式
{{表达式}}
*是NG本身的大器晚成套深入剖判程序,不完全和JS同样
**ng和JS境况不互通(ng变量都以$scope的大器晚成部分卡塔尔国

数据初始化:ng-init="名字=值;名字=值;"

class和style的另生龙活虎种写法
ng-class="arr"
ng-style="json"

判定写法
ng-if <xxx ng-if="条件"></xxx>
如:i==index、arr2.indexOf(v)!=-1
实例:下拉寻找框

三目      {{条件?成立:不成立}}

4.事件
ng-xxx

5.循环
ng-repeat="value in arr/json"
ng-repeat="(k,v) in arr/json"

实例:angular选项卡
嵌入下标:$index
ng-repeat和ng-click 用函数,而非表明式

核心:只关心数据;完全不关注UI的事

--------------------------应用知识--------------------------

1.控制器
功用:放置大段、宗旨程序
定义:
var app=angular.module("app名字", [依附于模块]);
app.controller("调整器名称", function (卡塔尔(قطر‎{
//调节器代码
});
使用:
<xxx ng-controller="名字">
...
</xxx>

2.$scope效用域对象
可添加、可获取
可监视:
$scope.$watch("名称", function (){
//变了干吗
}, 深度监视卡塔尔;

3.$http多少人机联作
$http.get(url, {params}).success(function (数据){}).error();
$http.post...
$http.jsonp(url, {params: {..., cb: 'JSON_CALLBACK'}}).success().error();

只顾:在Angular方法之外改革数据,视图不会更新
实例:原生Ajax使用

实例:ajax留言板
实例:百度下拉提醒

实例:停车计时器的施用
强制更新:$scope.$apply(卡塔尔(قطر‎;
另豆蔻梢头种办法:Angular反应计时器
var timer=$interval(fn, 时间);
var timer=$timeout(fn, 时间);

    清除:
        $interval.cancel(timer);
        $timeout.cancel(timer);

实例:时钟

实例:文章预览

1 Mr-why’s Sex Store

1. 开始用 Ecmascript 2015

Angular 2 运用 Typescript 编写,Typescript 是 Ecmascript 二零一五的超集,带有越多的特征。可是,倘诺您不爱好 Typescript, 也足以只用 Ecmascript 二〇一六 编写 angular 2。 近年来,代码最后都会编译成 Ecmascript 5。所以其实你也得以用 Ecmascript 5 来编排 Angular 2。

但是,以笔者之见,使用 Ecmascript 2015的新本性,能够减去代码量(有些时候…)、加强代码可读性、用上令人开心的风味,如解构。

如若想使用 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(',');

3

一、过滤器

运用过滤器
currency
date:"yyyy-MM-dd HH:mm:ss"

自定义过滤器:
app.filter('名字', function (){
return function (value, arg){};
});

{{value|名字:参数}}

实例:会计计数法
*契合对文本等数据开展简要处理,不适合放置过于复杂的效果与利益(如获取数据等卡塔尔国


二、指令

指令(directive):*自定义标签、自定义组件

事例1:最简便易行的directive
//定义
app.directive('名字', function (){
return {
restrict: 'E',
template: "<strong>aaa</strong>" //不一定有标签
};
});

<!--使用-->
<znstest></znstest>
<znstest/>      单标签也行,但最好别用

=============解析=============
restrict: 'E'   使用限制
    E(Element)  元素型     <xxx></xxx>
    A(Attribute)    属性型     <div xxx=""></div>
    C(Class)    Class型      <div class="xxx"></div>
    M(coMment)  注释型     <!-- directive:xxx -->
        *加上replace: true
        **两边的空格是必须的

例子2:transclude(嵌入)
*将原本内容嵌入到新内容之中
restrict: 'E',
template: "aa <span ng-transclude></span> bbb",
transclude: true
ng-transclude:定位符,原始内容会并发在里头

<!--使用-->
<znstest>
    12 5
</znstest>

例子3:directive、transclude和controller整合
//第一步
app.controller('cont1', function ($scope){
$scope.arr=[12, 5, 8, 99];
});
<ul>
<li ng-repeat="v in arr">{{v}}</li>
</ul>

//第二步
app.controller('cont1', function ($scope){
    $scope.arr=[12, 5, 8, 99];
});
app.directive('znstest', function (){
    return {
        restrict: 'E',
        template: "aa  bbb",
        transclude: true
    };
});
<ul>
    <li ng-repeat="v in arr"><znstest>{{v}}</znstest></li>
</ul>

实例:缩小展开组件
实例:下拉列表组件
*相符做表现层的零器件


三、AngularJS模块化本事

1.最简便的模块使用
概念模块:
var mod=angular.module(名称, [依傍模块]);

引用模块:
ng-app="名称"

2.向模块中加多东西

mod.controller(名称, function);
mod.filter(名称, function);
mod.directive(名称, function);

3.Controller继承
子Controller使用父Controller中的数据(老爹和儿子关系体今后HTML中卡塔尔


总结:
1.Controller
相符:数据的收获、收拾、过滤
不切合:任何表现层作用

2.Filter
顺应:轻易的公文、数据输出前处理
不切合:数据人机联作、任何头眼昏花的效应

3.Directive
适合:表现层的法力组件
不切合:数据相关操作

4.Module
组件,三个零器件能够饱含众多Controller、Filter和Directive;而七个程序又足以包括众多零器件


四、自定义注入与通讯
创设自定义信任注入:
mod.factory(名称, function (){
return 注入项;
});

实例:再次回到数据-雷同于json
*多少只保留生龙活虎份,能够分享数据

实例:放回方法集
实例:再次来到函数-相同于$interval


controller间通信
1.父亲和儿子级之间
只顾:老爹和儿子级scope直接更动,不能够实现改良
2.自定义注重注入(能够兑现自由对象间通讯卡塔尔(英语:State of Qatar)
3.音信机制
$scope.$emit('名称', 数据); 自己 父级
$scope.$broadcast('名称', 数据); 自己 子级
$scope.$on('名称', function (event, 数据){ 监听
})


开创注重注入的3种方法:
1.最简便易行的-factory
mod.factory(名称, function (){
return 依赖项;
});

2.增强版-provider
mod.provider(名称, function (){
//开始化部分-施行1次
this.$get=function (){
return 依赖项;
};
});

3.创建版-service
mod.service(名称, function (){
this.xxx=xxx;
});
*形似于JS的构造函数

4.常量-constant
mod.constant(名字, 值);

5.变量-value
mod.value(名字, 值);

特殊的风度翩翩种:decorator,修饰多个现存的依据项(constant除此之外卡塔尔(英语:State of Qatar)
*不能够修饰常量(否则怎么叫常量卡塔尔(قطر‎
testMod.decorator('名称', function ($delegate){ //必须叫$delegate
$delegate.xxx

    return $delegate;               //新的返回出来
});
*随便修饰多少次都可以

区分:
1.constant和value只是个值,个中constant不可能改革
2.factory最轻巧易行,provider能够安顿,service是new出来的


五、路由、多视图
路由:
1.依照分歧的ULANDL,调用不一样的代码;把多少间接放到#末端(hash卡塔尔国,当刷新页面时也能保留情况
2.特地切合App这种单页应用

1.引入Angular库和Route
<script src="angular.js"></script>
<script src="angular-route.js"></script>

2.创制模块
var app=angular.module('page1', ['ngRoute']);
*ngRoute是发源angular-route.js的模块,route就是通过这几个完结的

3.配置app
app.config(function ($routeProvider){
$routeProvider提供路由相关安顿功能
});

4.配置Route
$routeProvider
.when('地址1', {配置1})
.when('地址2', {配置2})
.when('地址3', {配置3});

5.增添插入点
<ng-view></ng-view>


Route配置表明:
template-HTML模板
例如:'<div>{{a}}</div>'

templateUrl-HTML模板地址
例如:'views/v2.html'

controller-route所信任的调节器
例如:'userCont'

事例:最简便易行的路由使用
HTML部分:
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<div ng-controller="cont1">
<a href="#/user/">客户基本</a>
<a href="#/article/">小说管理</a>
<ng-view></ng-view>
</div>

JS部分:
var app=angular.module('page1', ['ngRoute']);
app.controller('cont1', function (){
}).controller('userCont', function ($scope){
$scope.a=12;
}).controller('artCont', function ($scope){
$scope.b=55;
});

//配置部分
app.config(function ($routeProvider){
$routeProvider
.when('/user/', {
templateUrl: 'views/v1.html',
controller: 'userCont',
})
.when('/article/', {
templateUrl: 'views/v2.html',
controller: 'artCont'
});
});


推迟加载:
resolve参数,用promise格局落成页面数据的延期加载
resolve: {
delay: function($q) {
var delay=$q.defer();
setTimeout(function (){
delay.resolve(); //resolve执行
}, 3000);
return delay.promise;
}
}


Route事件
$routeChangeStart
$routeChangeSuccess
$routeChangeError

$scope.$on("$routeChangeStart",function(event,next,current){

});

Route参数

3.AngularJS表达式
{{表达式}}
*是NG自身的黄金时代套深入解析程序,不完全和JS相通
**ng和JS碰到不互通(ng变量都以$scope的后生可畏都部队分卡塔尔(英语:State of Qatar)

1.1 Ramp Up

  • Directive

    • Directive is a maker on HTML tag that tells Angular to run or reference some Javascript code.
  • Modules

    • Where we write pieces of our Angular application.
    • Makes our code more maintainable, testable, and readable.
    • Where we design dependencies for our app.
    • <html ng-app=“store”>
      var app = angular.module(’store’, []);
  • Controllers

    • Where we add application behavior
  • Expressions

    • Allow you to insert dynamic values into your HTML.
    • I am {{4 6}} —> I am 10
      {{“hello” “you”}} —> hello you

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

接纳 Ecmascript 二零一六 意味着我们能够用新的 “class” 关键字来创制新指标竟是推而广之别的对象。笔者早已写过,比起世襲笔者越来越热衷于整合,所以小编看不出用 “extend” 达成延续有怎么样用场,但是经过 class 的天性确实可认为创设对象增添好用的语法糖(简化代码)。

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

“service” 使用 “new” 关键字调用(仅一次)

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

在 Angular 2 中,Services 使用了 Ecmascript 二零一六类编写。那会产生您必要将 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(卡塔尔(英语:State of Qatar) }; } // 注入 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);
})();

/user/?id=432223

$routeParams


模板的另生龙活虎种写法

概念模板:
<script type="text/ng-template" id="v3.html">
模板内容...
</script>

使用模板-和文雅士龙活虎律:
.when('/blog/', {
templateUrl: 'v3.html',
controller: 'blogCont'
});

数据初始化:ng-init="名字=值;名字=值;"

1.2 Index HTML Setup

  • Controller
    • Controllers are where we define our apps behavior by defining functions and values.
    • Notice that controller is attached to (inside) of our app.
  • An example

澳门新萄京官方网站 2

controller

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

class两种写法
1.直接写 class="{{xxx}}"
2.数组 ng-class="arr"

style几种写法
1.直接写 style="{{xxx}}"
2.json ng-style="json"

ng-if="条件" 删除成分

ng-show="" 显示
ng-hide="" 隐藏

控制器——Controller
1.数据

ng-repeat、ng-事件、赋值 不能够会晤——用函数倒一下

$http.get(url, {params: {}}).success().error();
$http.post(url, {params: {}}).success().error();
$http.jsonp(url, {params: {}}).success().error();

class和style的另风流倜傥种写法
ng-class="arr"
ng-style="json"

1.3 Built-in Directives

  • How to control a button to show / hide?
    • define new property to gem as: canBuy: false
    • add ng-show to the controlled button: ng-show="sc.product.canBuy"
    • In the same way, you can use ng-hide to get the same outcome.
  • How to add multi-products?
    • for gem, write it as a set, and rename product as products (unnecessary).
    • when use gem, two ways: (1) use it as a set: sc.products[0].price; (2) automatic generate with ng-repeat: ng-repeat=“product in sc.products"

澳门新萄京官方网站 3

Built-in Directives

4. 用到指令封装代码

在此一步,你要求再行思量代码,何况使用更加好的布局。从 组件(components卡塔尔(英语:State of Qatar)/指令(directives卡塔尔(英语:State of Qatar) 的角度开端思量。千万不要在 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 之手)比指令(directive卡塔尔(قطر‎更神奇。

铭记,组件搭配组件(或指令) 便是 Angular 2 的不论什么事,从这一个角度想一想,将推动你越来越好的再一次组织代码,也更易于采用Angular 2。

5

1.Angular:UI自动更新

2.ng-app

3.ng-model——双向绑定

4.{{}}——输出

5.Controller

filter-过滤器
1.出口数据在此之前-管理一下
2.参数

自定义过滤器:
app.controller('名字', function (){
//controller的代码
});

app.filter('名字', function (){
//filter的代码
});


花了5块钱 -5
赚了100块钱 100

会计:
-5 -> (5)
100 -> 100

filter_name:参数


app.xxxx('名字', function (){
干什么的代码
});

<span></span>

restrict
E Element 元素
A Attribute 属性
C Class 类
M Comment 注释
*一定要抬高replace
**务必两侧空格

abc
<div abc=""></div>
    replace:false   <div abc="">987654321</div>
    replace:true    987654321

指令:增强HTML的功能

最简便易行的——指令出现在什么地方,模板的剧情就到哪处

transclude-嵌入、包裹
1.transclude: true
2.占位符——原始内容
<ng-transclude></ng-transclude>

transclude:
1.标签 <ng-transclude></ng-transclude>
2.属性


指令

app.directive('名字', function (){
return {
restrict: E/A/C/M 标签/属性/class/注释
template: '插入的内容'
};
});

<xxx></xxx>
<div xxx></div>
<div class="xxx"></div>
replace:true


指令——自定义组件(重用卡塔尔国
1.开立一批成分
2.重用


添加:controller、filter、directive


app.directive('名字', function (){
return {
restrict: 'AEC',
template: '插入的内容'
};
});

<名字>
<div 名字>
<div class="名字">

HTML里:中划线 my-close
JS里:驼峰命名 myClose


模块化:重用
1.按需加载、动态加载
2.封装、隔离
3.依赖


1.定义模块
var app=angular.module('名字', [信赖模块]);

app.controller
app.filter
app.directive

2.使用(调用)模块
<div ng-app="名字">


1.angular也会有模块
模块身上有:Controller、Filter、Directive

2.angular模块重视
module('名字', [依靠的模块])

3.用到模块
ng-app="名字"

angular.module('page1', ['commonFilter', 'commonDirective']);


angular.module('名字', [])
.controller()
.filter();

1.页面援用
ng-app="名字"

2.模块信任
angular.module('名字2', ['名字']卡塔尔; //同名:前面包车型客车模块会覆盖前边的模块


$scope
$http
$interval
$timeout

自定义信任注入——乱、多
创制正视:
1.最简单——factory
app.xxx('name', function (){})

app.factory('sum', function (){
    return 内容;
});

2.强大——provider
provider提供东西的
app.provider('name', function (){
this.$get=function (){
};
});

//factory:
app.factory()->1个
app.factory()->2个

//angular会:
var pro=new provider(); //
pro.$get()->1个
pro.$get()->2个

3.服务——service

factory——简单
app.factory(xx, function (){
return {...};
});

provider——强盛:可配置的
app.provider(xx, function (){
this.$get=function (){
return {...};
};
});

service——相符于布局函数
app.service(xx, function (){
this....
});


4.constant——常量(不可装饰卡塔尔(قطر‎

5.value——变量


修正依赖
*会改善原始的正视,原本的依赖就变了

app.decorator('信任的名字', function ($delegate卡塔尔{
$delegate 注重项的事物

return 修改后的依赖;

});


1.开立信赖项
factory:简单
provider:可配置
service:相似布局函数
constant:常量-不可修饰
value:变量

2.改革现成的依赖
app.decorator(信赖的名字, function ($delegate卡塔尔国{
$delegate——原始的依据
return 修饰过的;
});

*有注重视项只会创建三回——好事:信任项的情形在分歧之处是分享的


多中国少年共产党享——四个Controller之间
1.父子Controller
$scope能继承——复制了$scope
*不可能叫联合,只是复制

音信机制(事件卡塔尔(قطر‎:
$scope.$emit('名字', 数据卡塔尔; 触发:自身 父级,向上发送
$scope.$broadcast('名字', 数据卡塔尔; 触发:本身 子级,向下放松
$scope.$on('名字', 数据); 接收

2.无关Controller
用自定义注重来囤积数据
*factory、service、provider——创造的看重唯有三个


Router——多视图
*依附U中华VL来切换视图

事例:顾客音讯 随笔列表 文章详细情形页面 配置页面


引入Route
1.引进文件
<script src="js/angular-route.js"></script>

2.引入ngRoute模块
var app=angular.module('test', ["ngRoute"]);


Router:分局方的不如会来得不一致内容
1.引进文件
<script>
module('xx', ['ngRoute'])

2.配置route
app.config(function ($routeProvider){
$routeProvider.when(
'地址',
{配置消息}
);
});

template: ''

promise要求种类化

1.伸手数据
2.过滤
3.展现

ajax('...', {success: function (){
for(var if...
ajax('...', function (){
xxxx
ajax
});
}});

promise.then().then().then();


Route:抽离多视图、多Controller
1.引入
<script>
module('xxx', ['ngRoute'])

2.配置
app.config(function ($routeProvider){
$routeProvider
.when(
地址,
{
templateUrl: 'view地址',
controller: 'controller名字'
}
);
});


模板:
1.template
template: '模板HTML'

2.templateUrl
templateUrl: './views/xxx.html'

3.ng-template
<script type="text/ng-template" id="ID">
模板内容
</script>

templateUrl: 'ID'

controller
数据操作

filter
过滤:文字管理

directive
表现层的构件(选项卡、展现越来越多卡塔尔(قطر‎

route
分别视图、调控器

Module

看清写法
ng-if <xxx ng-if="条件"></xxx>
如:i==index、arr2.indexOf(v)!=-1
实例:下拉搜索框

2 Built-in Directives

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 1中使用 Angular 2 的 typescript 申明及 Ecmascript 二零一四的可能,那样大概能够完全用 Angular 2 的语法来写 Angular 1 了。

别的,有好多在 Angular 1 中使用 Ecmascript 二零一四的解决方案,无论是从软件布局仍然 Angular 推荐结构的角度来看,都坚定不移了最好实践和冷酷准绳。

本人相比较赏识的二个等级次序是: NG6-Starter , 项目富含使用 Ecmascrpipt 二〇一六编写 Angular 1 应用的骨子代码,组件生成器,测验配置和更加的多内容。

三目      {{条件?成立:不成立}}

2.1 Filters and a New Directive

  • Formatting with filters
    • {{ data | filter:options }}
    • Some eg:
      • date: {{‘1388123412323’ | date:’MM/dd/yyyy @ h:mma’}} —> 12/27/2013 @ 12:50 AM
      • uppercase & lowercase: {{’octagon gem’ | uppercase}} —> OCTAGON GEM
      • limitTo: {{‘My Product’ | limitTo: 8}} —> My Produ
        <li ng-repeat=“product in store.products | limitTo:3”> —> only first 3 products in products set will show
      • orderBy: <li ng-repeat=“product in store.products | orderBy:’-price’”> —> order by price
  • Using ng-src for images
    • <img ng-src=“{{product.images[0].full}}">
    • never forget the two braces

6. (彩蛋)使用模块加载器 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 - 完全没理由。无妨,配置和移植都很简短。

4.事件
ng-xxx

2.2 Tabs Inside Out

  • Use ng-click & ng-show to control tabs
  • Use ng-init to init an active tab
  • Use ng-class to set active style for active tab-pill

澳门新萄京官方网站 4

panel-dirty version

  • But this code is dirty, to keep the logic of angular outside of HTML, use controller

澳门新萄京官方网站 5

panel - clean version

总结

我同情于坚决守住规范。作者感觉 Ecmascript 二零一五 末了会成为了 javascript 语言下一代正式标准,所以,有理由去行使它(小编事情发生前也写过)何况拥抱变化。

万生机勃勃其它的框架、平台和库拥抱了 Ecmascript 2016 规范,全体人都会收益。我们能够用越来越灵敏的点子编码,同不常候在差异的库和品种中国共产党享代码。

1 赞 1 收藏 评论

5.循环
ng-repeat="value in arr/json"
ng-repeat="(k,v) in arr/json"

3 Forms

有关小编:段昕理

澳门新萄京官方网站 6

因为iPod而爱上苹果的意气风发体系产物,非常承认他们追求十二万分的振作振奋。职业之余,心仪前端的开源项目,Github( 个人主页 · 作者的稿子 · 15 ·    

澳门新萄京官方网站 7

实例:angular选项卡
内置下标:$index
ng-repeat和ng-click 用函数,而非表达式

3.1 Forms and Models

  • ng-model
    • binds the form element value to the property.

主干:只关切数据;完全不关心UI的事

3.2 Accepting Submissions

  • ng-submit
    • allows us to call a function when the form is submitted.

--------------------------应用知识--------------------------

3.3 Validation

  • no validate

    • used in form tag to turn off default HTML validation
  • required

    • used in tag to mark required fields
  • <div>reviewFrom is {{reviewForm.$valid}}</div>

    • used to print forms validity
    • this should be used with ng-submit to check submit.
  • angular class for input style:

    • Source before typing email:
      <input name=“author” … class=“ng-pristine ng-invalid">
    • Source after typing, with invalid email
      <input name=“author” … class=“ng-dirty ng-invalid">
    • Source after typing, with valid email
      <input name=“author” … class=“ng-dirty ng-valid">
    • Note that color must be indicated before using.

澳门新萄京官方网站 8

form

1.控制器
效用:放置大段、核心程序
定义:
var app=angular.module("app名字", [依傍模块]);
app.controller("调整器名称", function (卡塔尔{
//调整器代码
});
使用:
<xxx ng-controller="名字">
...
</xxx>

4 Custom Directives

2.$scope效率域对象
可添加、可获取
可监视:
$scope.$watch("名称", function (){
//变了怎么
}, 深度监视卡塔尔;

4.1 Directives

  • Using ng-include for Templates

    • ng-include is expecting a variable with the name of the file to include. To pass the name directly as a string, use single quotes ‘ ‘
    • e.g. ng-include=“name_price.html”
  • custom directive

    • Directives are like: <book-title></book-title>
    • Directives allow you to write HTML that expresses the behavior of your application. AWSOME!
  • How to build a directive

    • 1-define tag, such as <product-title></product-title>
    • 2-use app.directive to control the directive in JavaScript. Note that dash in HTML translates to camelCase in JavaScript.

澳门新萄京官方网站 9

directive

3.$http数目交互作用
$http.get(url, {params}).success(function (数据){}).error();
$http.post...
$http.jsonp(url, {params: {..., cb: 'JSON_CALLBACK'}}).success().error();

4.2 Directive Controllers

  • Move the controller in the directive

澳门新萄京官方网站 10

controller in directive

在乎:在Angular方法之外修改数据,视图不会更新
实例:原生Ajax使用

5 Services

实例:ajax留言板
实例:百度下拉提醒

5.1 Dependencies

  • How to organize the application modules?
    • app.js is the top level module attached via ng-app
    • products.js is all the functionality for products and only products.
    • The specific codes refer to the attachment code.
  • The decency is defined with:
    var app = angular.module('store', ['store-products']);
    where the store-products in the ‘[ ]’ is dependency.

实例:停车计时器的接受
强制更新:$scope.$apply(卡塔尔;
另大器晚成种情势:Angular电磁打点计时器
var timer=$interval(fn, 时间);
var timer=$timeout(fn, 时间);

5.2 Services

  • Some useful services:
    • Fetching JSON data from a web service with $http
    • Logging messages to the JavaScript console with $log
    • Filtering an array with $filter
  • $http service
    • Use as function:
      $http({method: ‘GET’, url: ‘/products.json’});
    • Use one if the shortcut methods:
      $http.get(‘/products.json’, { apiKey: ‘myApiKey’ });
    • Both return a Promise object with .success() and .error()

澳门新萄京官方网站 11

services

维持具名链接 M奥德赛-WHY (http://mr-why.com)及原来的书文链接 http://mr-why.com/post/category/frontend/angularjs 的状态下迎接转载 :卡塔尔(قطر‎ 。

    清除:
        $interval.cancel(timer);
        $timeout.cancel(timer);

实例:时钟
一、过滤器

运用过滤器
currency
date:"yyyy-MM-dd HH:mm:ss"

自定义过滤器:
app.filter('名字', function (){
return function (value, arg){};
});

{{value|名字:参数}}

实例:会计计数法
*契合对文本等数据开展简要管理,不相符放置过于复杂的职能(如获取数据等卡塔尔


二、指令

指令(directive):*自定义标签、自定义组件

事例1:最简便易行的directive
//定义
app.directive('名字', function (){
return {
restrict: 'E',
template: "<strong>aaa</strong>" //不一定有标签
};
});

<!--使用-->
<znstest></znstest>
<znstest/>      单标签也行,但最好别用

=============解析=============
restrict: 'E'   使用限制
    E(Element)  元素型     <xxx></xxx>
    A(Attribute)    属性型     <div xxx=""></div>
    C(Class)    Class型      <div class="xxx"></div>
    M(coMment)  注释型     <!-- directive:xxx -->
        *加上replace: true
        **两边的空格是必须的

例子2:transclude(嵌入)
*将原有内容嵌入到新内容之中
restrict: 'E',
template: "aa <span ng-transclude></span> bbb",
transclude: true
ng-transclude:定位符,原始内容会并发在里头

<!--使用-->
<znstest>
    12 5
</znstest>

例子3:directive、transclude和controller整合
//第一步
app.controller('cont1', function ($scope){
$scope.arr=[12, 5, 8, 99];
});
<ul>
<li ng-repeat="v in arr">{{v}}</li>
</ul>

//第二步
app.controller('cont1', function ($scope){
    $scope.arr=[12, 5, 8, 99];
});
app.directive('znstest', function (){
    return {
        restrict: 'E',
        template: "aa  bbb",
        transclude: true
    };
});
<ul>
    <li ng-repeat="v in arr"><znstest>{{v}}</znstest></li>
</ul>

实例:减弱展开组件
实例:下拉列表组件
*符合做表现层的组件


三、AngularJS模块化技能

1.最简便易行的模块使用
概念模块:
var mod=angular.module(名称, [依赖于模块]);

援引模块:
ng-app="名称"

2.向模块中增加东西

mod.controller(名称, function);
mod.filter(名称, function);
mod.directive(名称, function);

3.Controller继承
子Controller使用父Controller中的数据(老爹和儿子关系体未来HTML中卡塔尔(قطر‎


总结:
1.Controller
顺应:数据的获取、收拾、过滤
不切合:任何表现层功用

2.Filter
相符:轻松的文书、数据输出前管理
不切合:数据交互作用、任何复杂的职能

3.Directive
切合:表现层的功力组件
不切合:数据有关操作

4.Module
零部件,叁个构件能够包蕴众多Controller、Filter和Directive;而一个顺序又足以分包众多组件


四、自定义注入与通讯
制造自定义信任注入:
mod.factory(名称, function (){
return 注入项;
});

实例:再次回到数据-相像于json
*数据只保留意气风发份,能够分享数据

实例:放回方法集
实例:再次回到函数-相通于$interval


controller间通信
1.父亲和儿子级之间
注意:老爹和儿子级scope直接更改,不能落到实处改过
2.自定义依赖注入(能够达成自由对象间通讯卡塔尔国
3.音讯机制
$scope.$emit('名称', 数据); 自己 父级
$scope.$broadcast('名称', 数据); 自己 子级
$scope.$on('名称', function (event, 数据){ 监听
})


成立依赖注入的3种办法:
1.最简单易行的-factory
mod.factory(名称, function (){
return 依赖项;
});

2.增强版-provider
mod.provider(名称, function (){
//初步化部分-实行1次
this.$get=function (){
return 依赖项;
};
});

3.创建版-service
mod.service(名称, function (){
this.xxx=xxx;
});
*犹如于JS的结构函数

4.常量-constant
mod.constant(名字, 值);

5.变量-value
mod.value(名字, 值);

破例的一种:decorator,修饰一个现有的依靠项(constant除此而外卡塔尔(英语:State of Qatar)
*无法修饰常量(不然怎么叫常量卡塔尔国
testMod.decorator('名称', function ($delegate){ //必须叫$delegate
$delegate.xxx

    return $delegate;               //新的返回出来
});
*随便修饰多少次都可以

区分:
1.constant和value只是个值,此中constant不能够改改
2.factory最简单易行,provider能够配备,service是new出来的


五、路由、多视图
路由:
1.基于分歧的UHavalL,调用分歧的代码;把数量直接放到#末端(hash卡塔尔(英语:State of Qatar),当刷新页面时也能保留景况
2.专程切合App这种单页应用

1.引入Angular库和Route
<script src="angular.js"></script>
<script src="angular-route.js"></script>

2.创办模块
var app=angular.module('page1', ['ngRoute']);
*ngRoute是根源angular-route.js的模块,route就是通过那些完成的

3.配置app
app.config(function ($routeProvider){
$routeProvider提供路由有关配置功用
});

4.配置Route
$routeProvider
.when('地址1', {配置1})
.when('地址2', {配置2})
.when('地址3', {配置3});

5.增加插入点
<ng-view></ng-view>


Route配置表达:
template-HTML模板
例如:'<div>{{a}}</div>'

templateUrl-HTML模板地址
例如:'views/v2.html'

controller-route所信任的调控器
例如:'userCont'

事例:最简单易行的路由使用
HTML部分:
<script src="js/angular.js"></script>
<script src="js/angular-route.js"></script>
<div ng-controller="cont1">
<a href="#/user/">客商基本</a>
<a href="#/article/">随笔管理</a>
<ng-view></ng-view>
</div>

JS部分:
var app=angular.module('page1', ['ngRoute']);
app.controller('cont1', function (){
}).controller('userCont', function ($scope){
$scope.a=12;
}).controller('artCont', function ($scope){
$scope.b=55;
});

//配置部分
app.config(function ($routeProvider){
$routeProvider
.when('/user/', {
templateUrl: 'views/v1.html',
controller: 'userCont',
})
.when('/article/', {
templateUrl: 'views/v2.html',
controller: 'artCont'
});
});


推迟加载:
resolve参数,用promise形式达成页面数据的推迟加载
resolve: {
delay: function($q) {
var delay=$q.defer();
setTimeout(function (){
delay.resolve(); //resolve执行
}, 3000);
return delay.promise;
}
}


Route事件
$routeChangeStart
$routeChangeSuccess
$routeChangeError

$scope.$on("$routeChangeStart",function(event,next,current){

});

Route参数

/user/?id=432223

$routeParams


模板的另生机勃勃种写法

概念模板:
<script type="text/ng-template" id="v3.html">
模板内容...
</script>

接收模板-和文件风流浪漫律:
.when('/blog/', {
templateUrl: 'v3.html',
controller: 'blogCont'
});

本文由澳门新萄京官方网站发布于澳门新萄京赌场网址,转载请注明出处:澳门新萄京官方网站AngulaJS实战总结,需要准备的

关键词: