前端开发框架总结之Angular实用技巧(六)

最新推荐文章于 2025-06-18 13:07:18 发布
置顶 最新推荐文章于 2025-06-18 13:07:18 发布
阅读量401 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端技术 文章标签： angular 过滤器 校验器 通讯 定时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wiki_Wei/article/details/83780488
本文深入探讨Angular框架的高级应用，包括进程间通讯、$interval使用、ng-if与ng-show的区别、ng-class/ng-style的巧妙运用、自定义过滤器、表单校验及ngModel的解析与格式化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

                                    前端开发框架总结之Angular实用技巧(六)

上文讲了Angular中依赖注入相关知识，掌握了这些，我们就可以在前端的逻辑更清晰明了，复用程度也更高。今天我们对Angular系列做一个收尾，把一些零零碎碎的小技巧总结下。

  • 进程间通讯

我们使用事件的方式进行进程间的通讯。主要用到如下几个方法。$on,$emit,$broadcast.

$on，用来接收事件和参数。接收到得事件包括以下几个主要的属性，name（事件名称）、targetScope（发出时间的scope）、currentScope（接收事件的scope）、stopPropagation方法（阻止emit时间继续冒泡）

$emit, 用于向父scope发送事件。（发送事件所在的scope中也可以监听到，这个在自定义组件中可能会用到）

$broadcast 用于向子scope发送事件。（本身所在的scope也可以监听的到）

js代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>angular进程间通讯</title>
</head>
<body ng-app="ExampleApp">

  <div ng-controller="parentCtrl">
      <button ng-click="clickParent()" >parent</button>

      <div ng-controller="child1Ctrl">

          <button ng-click="clickChild()" >child1</button>
          <div ng-controller="subChildCtrl">
              <button ng-click="clickSubChild()" >subChild</button>
          </div>

      </div>

      <div ng-controller="child2Ctrl">

      </div>
  </div>

  <script src="jquery-3.2.1.min.js"></script>
  <script src="angular.js"></script>

  <script>
      var app = angular.module('ExampleApp', []);

      app.controller('parentCtrl',['$scope', function ($scope) {
          console.log('enter parentCtrl');
          var obj = new Object();
          obj.data = 'from parent';

          var test = 'testContent';

          $scope.getObj = function () {
              return test;
          }

          $scope.clickParent = function () {
              $scope.$broadcast('parentEvent',obj);
          }

          $scope.$on('child1Event',function (event, args) {
          });

          $scope.$on('parentEvent',function (event, args) {
              debugger;
          });

      }]);

      app.controller('child1Ctrl',['$scope', function ($scope) {
          console.log('enter child1Ctrl');
          var obj = new Object();
          obj.data = 'from child1';

          $scope.clickChild = function () {
              $scope.$emit('child1Event',obj);
          }

          $scope.$on('parentEvent',function (event, args) {
              console.log('方法调用：' + $scope.getObj());
          });

          $scope.$on('child1Event',function (event, args) {
              debugger;
          });

          $scope.$on('subChildEvent',function (event, args) {
              debugger;

              event.stopPropagation();
          });


      }]);

      app.controller('child2Ctrl',['$scope', function ($scope) {
          console.log('enter child2Ctrl');

          $scope.$on('parentEvent',function (event, args) {
              debugger;
          });

          $scope.$on('child1Event',function (event, args) {
              debugger;
          });

      }]);

      app.controller('subChildCtrl',['$scope', function ($scope) {
          console.log('enter subChildCtrl');
          var obj = new Object();
          obj.data = 'from subChild';

          $scope.$on('parentEvent',function (event, args) {
              debugger;
          });

          $scope.$on('child1Event',function (event, args) {
              debugger;
          });

          $scope.clickSubChild = function () {
              $scope.$emit('subChildEvent',obj);
          }

      }]);


  </script>
</body>
</html>

  • $interval使用

interval的使用本身没有什么难度，但是要注意防止放生内存泄露，因为interval发起的定时任务，如果不清除的话，会一直循环执行。方法如下

          var timer = $interval(function () {
              console.log('enter interval ')
          },5000);


          $scope.on('$destory',function () {
              $interval.cancel(timer);
          });

  • ng-if，ng-show

​​​​​​​ng-if如果条件不满足是不会生成对应元素的，ng-show只是不显示对应元素而已。这个要根据实际情况使用的。

  • 巧用ng-class ng-style

​​​​​​​巧用ng-class，ng-style可以使我们尽可能少的直接操纵页面元素来实现页面的动态效果。

直接上例子

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>ng-class，ng-style巧用</title>

  <style>
    .myBtn{
      height: 36px;
      background-color: white;
      border: 1px solid #f5f5f5;

    }

    .myBtn.select{
      background-color: darkseagreen;
    }

  </style>
</head>
<body ng-app="ExampleApp">

  <div ng-controller="testCtrl">
    <div>

      <button ng-click="clickBtn($event)" ng-class="{'myBtn':true,'select':btn[0].select}" data-index="0">选中我</button>
      <button ng-click="clickBtn($event)" ng-class="{'myBtn':true,'select':btn[1].select}" data-index="1">选中我</button>
    </div>

    <div>
      <button ng-style="myStyle" ng-click="changeStyle()">改变style</button>
    </div>
  </div>

  <script src="jquery-3.2.1.min.js"></script>
  <script src="angular.js"></script>

  <script>
      var app = angular.module('ExampleApp', []);

      app.controller('testCtrl',['$scope', function ($scope) {
          console.log('enter testCtrl');

          $scope.btn = [
              {
                  'select':false
              },
              {
                  'select':false
              },
          ];

          $scope.clickBtn = function (event) {
              $scope.btn[event.target.dataset.index].select = !$scope.btn[event.target.dataset.index].select;
          }

          $scope.myStyle = {
              'background':'red'
          };

          $scope.changeStyle = function () {
              $scope.myStyle.background = 'yellow';
          }
      }]);



  </script>
</body>
</html>

  • 过滤器

​​​​​​​过滤器分为原生自定的过滤器和自定义过滤器两种，过滤器可以用在表达式类型的绑定和ng-bind类型的绑定上，不能用在ng-model，如果想在ng-model实现类似功能可以使用自定义指令。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>angular过滤器使用</title>

  <style>
    .ng-cloak{
      display: none;
    }
  </style>
</head>
<body ng-app="ExampleApp">

  <div ng-controller="testCtrl" >
    <div>
      <span class="ng-cloak">{{testContent | uppercase}}</span>
    </div>
    <div>
      <span ng-bind="testContent | reverse"></span>
    </div>

  </div>

  <script src="jquery-3.2.1.min.js"></script>
  <script src="angular.js"></script>

  <script>
      var app = angular.module('ExampleApp', []);

      app.controller('testCtrl',['$scope', function ($scope) {
          console.log('enter testCtrl');

          $scope.testContent = 'aaa bbb ccc';

      }]);

      app.filter('reverse', function() { //可以注入依赖
          return function (text) {
              return text.split("").reverse().join("");
          }
      });

  </script>
</body>
</html>

示例中的代码有一个防止加载页面时{{}}闪烁的解决技巧。

  • 校验

​​​​​​​校验分为自定校验和原生校验两种。直接上例子。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>angular-test</title>
</head>
<body ng-app="ExampleApp">

<div ng-controller="MainCtrl">
  <form name="testForm">

    <input name="test" ng-model="name" validate-name>

    <div ng-show="testForm.test.$error.validRule">
      输入内容不合法
    </div>
  </form>

</div>

<script src="jquery-3.2.1.min.js"></script>
<script src="angular.js"></script>


<script>
    var app = angular.module('ExampleApp', []);

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

        $scope.name= '';
    });

    var INTEGER_REGEXP = /^[\u4E00-\u9FA5a-zA-Z0-9_]{0,20}$/;

    app.directive('validateName',function () {
        return {
            restrict: 'A',
            require:'?^ngModel',
            link:function (scope,element,attrs,ngModel) {
                ngModel.$validators.validRule = function (modelValue,viewValue) {
                    if(INTEGER_REGEXP.test(viewValue)){
                        return true;
                    }

                    return false;
                }
            }
        }
    });
</script>
</body>
</html>

  • 使用$parsers和$formatters对内容进行转化

​​​​​​​parsers是页面内容到model值得转化，formatter是从model到页面值得转化。直接上例子

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <title>angular ngModel的parser和formatter使用</title>
</head>
<body ng-app="ExampleApp">

  <div ng-controller="testCtrl" >
    <span>model的值：{{inputTest}}</span>
    <div>
      <input ng-model="inputTest" my-input>
    </div>
    <button ng-click="changeValue()">change</button>

  </div>

  <script src="jquery-3.2.1.min.js"></script>
  <script src="angular.js"></script>

  <script>
      var app = angular.module('ExampleApp', []);

      app.controller('testCtrl',['$scope', function ($scope) {
          console.log('enter testCtrl');

          $scope.inputTest = '';

          $scope.changeValue = function () {
              $scope.inputTest = "赋初值";
          }

      }]);

      app.directive('myInput',function () {
          return {
              restrict: 'A',
              require:'?^ngModel',
              link:function (scope,element,attrs,ngModel) {

                  //把输入的值都默认的转化为大写。
                  ngModel.$parsers.push(function (value) {
                      value = value.toUpperCase();

                      return value;
                  });

                  ngModel.$formatters.push(function (value) {
                      if(value){
                          value = value + '转化后的值';
                      }

                      return value;
                  });
              }
          }
      });


  </script>
</body>
</html>

angular系列就到此为止，希望对大家有所帮助。

全面分析一下前端框架Angular的来龙去脉，分析angular的技术要点和难点，以及详细的语法和使用规则，底层原理-小白进阶之路
zhang9880000的博客
06-23 4764
Angular 是一个由 Google 维护的开源前端框架。它最早在 2010 年发布，最初版本称为 AngularJS。2016 年，团队发布了一个完全重写的版本，称为 Angular 2，之后的版本（如 Angular 4、Angular 5 等）都统称为 Angular。Angular 使用 TypeScript 编写，提供了静态类型检查、现代 JavaScript 特性等优点，有助于提高代码质量和开发效率。采用组件式开发，将应用程序分割成独立的、可复用的组件，每个组件包含自己的模板、样式和逻辑。使用
JavaScript与前端框架Angular
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
12-02 1155
Angular作为一款由Google维护的流行前端框架，凭借其强大的双向数据绑定、模块化架构和丰富的生态系统，成为许多开发者构建复杂单页应用（SPA）的首选。在实际工作中，灵活运用JavaScript和Angular的各种特性，可以创造出更加高效、可靠的应用程序。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。路由用于管理应用的导航和页面切换，通过定义路由配置，可以将不同的URL映射到相应的组件。包含一个简单的模板，通过插值表达式显示标题。
实践总结 - 不可错过的Angular应用技巧
weixin_33951761的博客
07-21 150
2019独角兽企业重金招聘Python工程师标准>>> ...
Angular前端框架进阶
最新发布
2501_92487756的博客
06-18 405
Angular前端框架进阶涉及多个方面，包括核心概念、模块与依赖注入、路由与导航、性能优化和最佳实践。通过深入了解这些主题，开发者可以更好地掌握Angular的高级特性，并构建高效、可维护的应用。为了实现这一目标，开发者需要不断学习和实践，关注最新的Angular发展趋势和最佳实践。此外，与其他开发者的交流和合作也是提高技术水平的重要途径。在未来，Angular将继续发展，为前端开发提供更多强大的功能。
Angular开发技巧
weixin_34370347的博客
03-06 184
由于之前有幸去参加了ngChina2018开发者大会，听了will保哥分享了Angular开发技巧，自己接触Angular也有差不多快一年的时间了，所以打算对Angular开发中的一些技巧做一个整理。工具篇所谓 “工欲善其事，必先利其器”，下面我会介绍 如何打磨 `VS Code` 这把利器 复制代码抛弃资源管理器 ，使用快捷键 Commd + P 来查找文档，默认会展示最近打开的文档，并且支持模...
angular 一些小技巧
weixin_34234721的博客
12-06 119
　　因为angular的命名问题，我们google问题得时候会出现很多angularjs得问题。在输入的问题中添加 -angularjs就会解决这个问题。 　　angular 生成新项目时，添加--skip-tests，CLI不会为每个组件（.spec文件）生成测试文件。Who needs tests anyway (sarcasm)? 　　vs code有一个angular files。它将...
前端MVC框架之 Angular
weixin_30521161的博客
03-30 230
一、什么是Angular jQuery，它属于一种类库(一系列函数的集合)，以DOM为驱动核心；而Angular是一种 MVC 的前端框架，则是前端框架，以数据和逻辑为驱动核心，它有着诸多特性，最重要的是：模块化，双向数据绑定，语义化标签，依赖注入等。 MVC 开发模式：model（模型），view（视图），controller（控制器）。 二、模块化 最大程度实现代码复用 定义应用 为HTML...
前端框架对比：React vs. Vue vs. Angular
shejizuopin的博客
04-02 762
开发公司：Facebook类型：库（Library），专注于视图层特点：虚拟DOM、组件化、单向数据流、生态系统丰富。
Web前端框架的组件化开发
shejizuopin的博客
04-06 1145
组件化开发是指将UI界面拆分为一系列可复用的、独立的组件，每个组件都封装了自己的逻辑、样式和模板。这些组件可以像积木一样组合在一起，构建出复杂的页面。组件化开发是Web前端框架中的核心开发模式，它极大地提高了开发效率和代码可维护性。通过掌握React、Vue、Angular等框架的组件化开发技巧，并结合实际项目需求进行灵活应用，开发者可以构建出更加高效、可维护的前端应用。希望本文的代码示例和表格分析能为你的组件化开发工作提供有益的参考。
前端框架中 HTML 的应用技巧：React、Vue、Angular 深度解析
吴师兄大模型的博客
02-05 1968
在当今的前端开发中，HTML、CSS 和 JavaScript 已经成为了构建现代网页和应用的基石。然而，随着前端技术的发展，我们不仅仅要掌握这些基础技术，还需要理解它们在各种前端框架中的应用。在 React、Vue 和 Angular 等现代前端框架中，HTML 作为构建界面的核心，虽然它的表现形式可能有所不同，但其重要性始终未变。本篇文章将深入探讨 HTML 在这些主流前端框架中的应用，帮助你理解如何在 React、Vue 和 Angular 中利用 HTML 来构建动态网页。
Web前端框架的模块化开发
shejizuopin的博客
04-09 779
模块化开发是指将一个大的程序拆分成多个小的、独立的模块，每个模块负责特定的功能。这样可以使代码更加清晰、易于维护和扩展。模块化开发是现代Web前端开发的核心实践之一。通过合理地拆分模块、利用懒加载和样式模块化等技巧，可以显著提高代码的可维护性、可复用性和性能。本文介绍了React、Vue和Angular三种主流前端框架的模块化开发方法，并提供了实用的代码和表格示例分析。希望这些内容能帮助开发者更好地掌握模块化开发技巧，提升开发效率。
前端框架-Angular.js
码园老农的专栏
10-09 8977
前端的功能与单页应用 就webapp开发而言，前端实现的功能主要有： -实现UI（渲染出用户可见的视图和各种功能组件） -对用户的操作（事件）做出反应 -实现业务逻辑 -实现页面路由 -与服务器端交互 -对文件资源的管理（HTML/CSS/javascrip/图片等） -提供用户安装和运行的手段 目前，实现这些功能的框架/库五花八门。怎么选择呢？ 首先，谨记“用户体验至
前端框架AngularJS
huangyh技术栈
11-17 708
1.1 AngularJS简介 AngularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。 官方网站：https://angularjs.org/ 下载地址：https://code.an...
Angular前端框架
头号玩家的博客
05-24 642
定义：       AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中AngularJS有着诸多特性，最为核心的是：MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等特点：    使用双大括号{{}}语法进行数据绑定；    使用DOM...
Angular-Web前端框架
weixin_47295886的博客
08-12 1024
Angular（使用Type Script编写）是Angular JS的重写（使用JS编写）:构建用户界面的前端框架。Angular核心特性。
前端框架 - AngularJS入门
魔法革1996
07-04 713
1、AngularJS简介    AngularJS  诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、依赖注入等等。2、AngularJS四大特征    2.1、MVC模式    Angular遵循软件工程的MVC模式,...
Angular技巧汇总
weixin_33827731的博客
08-29 180
2019独角兽企业重金招聘Python工程师标准>>> ...
前端开发实用指南与技巧手册
前端开发者手册中应包含对常用工具（如版本控制Git、包管理器npm/yarn）、调试工具（如Chrome开发者工具）、以及流行的前端库和框架（如React、Vue、Angular）的介绍。 知识点六：前端性能优化 在前端开发者手册中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值