Maison interface Web js tutoriel 使用Angular.js开发的注意事项

使用Angular.js开发的注意事项

Dec 09, 2016 pm 04:07 PM
angular.js

前言

近期一直在玩Angularjs,不得不说,相对于Knockout,Angularjs这一MVVM框架更强大,也更复杂,各种教程网上到处都是,不过真正用到项目的时候会遇到各种坑。

一、ng-repeat

ng-repeat 用于标识某个 elem 需要重复输出,同时重复输出的内容需为唯一

<div ng-app="app" ng-controller="control">
  <h3 ng-repeat="content in repeatContent">ng-repeat: {{ content }}</h3>
</div>
Copier après la connexion

let app = angular.module("app", []);
app.controller("control", ($scope) => {
  // 输出李滨泓
  $scope.repeatContent = ["李", "滨", "泓"];
  // 下面存在两个“泓”,会报错
  // $scope.repeatContent = ["李", "滨", "泓", "泓"];
})
Copier après la connexion

二、provider, service, factory 之间的关系

factory

factory 很像 service,不同之处在于,service 在 Angular 中是一个单例对象,即当需要使用 service 时,使用 new 关键字来创建一个(也仅此一个)service。而 factory 则是一个普通的函数,当需要用时,他也仅仅是一个普通函数的调用方式,它可以返回各种形式的数据,例如通过返回一个功能函数的集合对象来将供与使用。

定义:

let app = angular.module("app", []);
 
// 这里可以注入 $http 等 Provider
app.factory("Today", () => {
  let date = new Date();
  return {
    year: date.getFullYear(),
    month: date.getMonth() + 1,
    day: date.getDate()
  };
});
Copier après la connexion

使用注入:

app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});
Copier après la connexion
Copier après la connexion

service

service 在使用时是一个单例对象,同时也是一个 constructor,它的特点让它可以不返回任何东西,因为它使用 new 关键字新建,同时它可以用在 controller 之间的通讯与数据交互,因为 controller 在无用时其作用域链会被销毁(例如使用路由跳转到另一个页面,同时使用了另一个 controller)

定义:

let app = angular.module("app", []);
 
// 这里可以注入 $http 等 Provider
// 注意这里不可以使用 arrow function
// arrow function 不能作为 constructor
app.service("Today", function() {
  let date = new Date();
  this.year = date.getFullYear();
  this.month = date.getMonth() + 1;
  this.day = date.getDate();
});
Copier après la connexion

使用注入:

app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});
Copier après la connexion
Copier après la connexion

provider

provider 是 service 的底层创建方式,可以理解 provider 是一个可配置版的 service,我们可以在正式注入 provider 前对 provider 进行一些参数的配置。

定义:

let app = angular.module("app", []);
 
// 这里可以注入 $http 等 Provider
// 注意这里不可以使用 arrow function
// arrow function 不能作为 constructor
app.provider("Today", function() {
  this.date = new Date();
  let self = this;
 
  this.setDate = (year, month, day) => {
    this.date = new Date(year, month - 1, day);
  }
 
  this.$get = () => {
    return {
      year: this.date.getFullYear(),
      month: this.date.getMonth() + 1,
      day: this.date.getDate()
    };
  };
});
Copier après la connexion

使用注入:

// 这里重新配置了今天的日期是 2015年2月15日
// 注意这里注入的是 TodayProvider,使用驼峰命名来注入正确的需要配置的 provider
app.config((TodayProvider) => {
  TodayProvider.setDate(2015, 2, 15);
});
 
app.controller("control", (Today) => {
  console.log(Today.year);
  console.log(Today.month);
  console.log(Today.day);
});
Copier après la connexion

三、handlebars 与 angular 符号解析冲突

场景:

当我使用 node.js 作为服务端,而其中使用了 handlebars 作为模板引擎,当 node.js 对某 URL 进行相应并 render,由于其模板使用 { {} } 作为变量解析符号。同样地,angular 也使用 { {} } 作为变量解析符号,所以当 node.js 进行 render 页面后,如果 { {} } 内的变量不存在,则该个区域会被清空,而我的原意是这个作为 angular 的解析所用,而不是 handlebars 使用,同时我也想继续使用 handlebars,那么此时就需要将 angular 默认的 { {} } 解析符号重新定义。即使用依赖注入 $interpolateProvider 进行定义,如下示例:

app.config($interpolateProvider => {
  $interpolateProvider.startSymbol(&#39;{[{&#39;);
  $interpolateProvider.endSymbol(&#39;}]}&#39;);
});
Copier après la connexion

四、ng-annotate-loader

ng-annotate-loader 应用于 webpack + angular 的开发场景,是用于解决 angular 在进行 JS 压缩后导致依赖注入失效并出现错误的解决方法

安装

$ npm install ng-annotate-loader --save-dev
Copier après la connexion

配置

// webpack.config.js
{
  test: /\.js?$/,
  exclude: /(node_modules|bower_components)/,
  loader: &#39;ng-annotate!babel?presets=es2015&#39;
},
Copier après la connexion

五、双向数据绑定

当我们使用非 Angular 自带的事件时,$scope 里的数据改变并不会引起 $digest 的 dirty-checking 循环,这将导致当 model 改变时,view 不会同步更新,这时我们需要自己主动触发更新

HTML

<div>{{ foo }}</div>
<button id="addBtn">go</button>
Copier après la connexion

JavaScript

app.controller("control", ($scope) => {
  $scope.foo = 0;
  document.getElementById("addBtn").addEventListener("click", () => {
    $scope.foo++;
  }, false);
})
Copier après la connexion

很明显,示例的意图是当点击 button 时,foo 自增长并更新 View,但是实际上,$scope.foo 是改变了,但是 View 并不会刷新,这是因为 foo 并没有一个 $watch 检测变化后 $apply,最终引起 $digest,所以我们需要自己触发 $apply 或者创建一个 $watch 来触发或检测数据变化

JavaScript(使用 $apply)

app.controller("control", ($scope) => {
  $scope.foo = 0;
  document.getElementById("addBtn").addEventListener("click", () => {
     
    $scope.$apply(function() {
      $scope.foo++;
    });
 
  }, false);
})
Copier après la connexion

JavaScript(使用 $watch & $digest)

app.controller("control", ($scope) => {
  $scope.foo = 0;
  $scope.flag = 0;
 
  $scope.$watch("flag", (newValue, oldValue) => {
 
    // 当 $digest 循环检测 flag 时,如果新旧值不一致将调用该函数
    $scope.foo = $scope.flag;
  });
 
  document.getElementById("addBtn").addEventListener("click", () => {
     
    $scope.flag++;
    // 主动触发 $digest 循环
    $scope.$digest();
  }, false);
})
Copier après la connexion

六、$watch(watchExpression, listener, [objectEquality])

注册一个 listener 回调函数,在每次 watchExpression 的值发生改变时调用

watchExpression 在每次 $digest 执行时被调用,并返回要被检测的值(当多次输入同样的值时,watchExpression 不应该改变其自身的值,否则可能会引起多次的 $digest 循环,watchExpression 应该幂等)

listener 将在当前 watchExpression 返回值和上次的 watchExpression 返回值不一致时被调用(使用 !== 来严格地判断不一致性,而不是使用 == 来判断,不过 objectEquality == true 除外)

objectEquality 为 boolean 值,当为 true 时,将使用 angular.equals 来判断一致性,并使用 angular.copy 来保存此次的 Object 拷贝副本供给下一次的比较,这意味着复杂的对象检测将会有性能和内存上的问题

七、$apply([exp])

$apply 是 $scope 的一个函数,用于触发 $digest 循环

$apply 伪代码

function $apply(expr) {
  try {
    return $eval(expr);
  } catch (e) {
    $exceptionHandler(e);
  } finally {
    $root.$digest();
  }
}
Copier après la connexion

   

使用 $eval(expr) 执行 expr 表达式

如果在执行过程中跑出 exception,那么执行 $exceptionHandler(e)

最后无论结果,都会执行一次 $digest 循环


Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'apprentissage angulaire parle de composants autonomes (Standalone Component) L'apprentissage angulaire parle de composants autonomes (Standalone Component) Dec 19, 2022 pm 07:24 PM

Cet article vous amènera à continuer à apprendre Angular et à comprendre brièvement le composant autonome (Standalone Component) dans Angular. J'espère qu'il vous sera utile !

Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx Explication détaillée du gestionnaire d'état d'apprentissage angulaire NgRx May 25, 2022 am 11:01 AM

Cet article vous donnera une compréhension approfondie du gestionnaire d'état NgRx d'Angular et vous présentera comment utiliser NgRx. J'espère qu'il vous sera utile !

Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Que dois-je faire si le projet est trop gros ? Comment diviser raisonnablement les projets Angular ? Jul 26, 2022 pm 07:18 PM

Le projet Angular est trop volumineux, comment le diviser raisonnablement ? L'article suivant vous expliquera comment diviser raisonnablement les projets Angular. J'espère qu'il vous sera utile !

Parlons de la façon de personnaliser le format angulaire-datetime-picker Parlons de la façon de personnaliser le format angulaire-datetime-picker Sep 08, 2022 pm 08:29 PM

Comment personnaliser le format angulaire-datetime-picker ? L'article suivant explique comment personnaliser le format. J'espère qu'il sera utile à tout le monde !

Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Une brève analyse des composants indépendants dans Angular et voir comment les utiliser Jun 23, 2022 pm 03:49 PM

Cet article vous présentera les composants indépendants dans Angular, comment créer un composant indépendant dans Angular et comment importer des modules existants dans le composant indépendant. J'espère qu'il vous sera utile !

Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Un guide étape par étape pour comprendre l'injection de dépendances dans Angular Dec 02, 2022 pm 09:14 PM

Cet article vous guidera à travers l'injection de dépendances, présentera les problèmes que l'injection de dépendances résout et sa méthode d'écriture native, et parlera du framework d'injection de dépendances d'Angular. J'espère qu'il vous sera utile !

Sélecteurs :host, :host-context, ::ng-deep d'Angular Sélecteurs :host, :host-context, ::ng-deep d'Angular May 31, 2022 am 11:08 AM

Cet article vous donnera une compréhension approfondie de plusieurs sélecteurs spéciaux dans Angular : host, :host-context, ::ng-deep. J'espère qu'il vous sera utile !

Compréhension approfondie de NgModule (module) en Angular Compréhension approfondie de NgModule (module) en Angular Sep 05, 2022 pm 07:07 PM

Le module NgModule est un point important dans Angular, car l'élément de base d'Angular est NgModule. Cet article vous fera découvrir le module NgModule dans Angular. J'espère qu'il vous sera utile !

See all articles