欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Web前端学习笔记——AngularJS之过滤器、服务、路由

程序员文章站 2022-05-08 08:38:15
...

目录

过滤器

data 过滤器

lowercase, uppercase

number

limitTo 过滤器

orderBy

filter 过滤器

自定义比较

json 过滤器

自定义过滤器

Form 表单

Form 表单 – 验证

Form 表单 – 验证规则

服务

创建服务

 内置服务 - $http

$log服务

$timeout

自定义服务

路由

NG 中路由是单独提供的功能模块 ngRoute, 也是一个单独发型的文件

如果连入第三方文件时不写协议的话：

Features - MVC

AngularJS 中的MVC

Features - Module

Features - Directive

Features – Data Binding

Controller as 语法

过滤器

data 过滤器

  • 用于时间日期格式化
<span>{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}</span>

lowercase, uppercase

  • 英文字符大小写转换

number

  • 数字格式化，例如将10000 → 10,000.00

limitTo 过滤器

  • 限制数量，限制字符串或者遍历长度
<ul class="messages">
    <li ng-repeat="item in messages | limitTo:-2">
        {{item.content | limitTo:2 }}
    </li>
</ul>

orderBy

  • 按照特定字段排序，默认是正序，倒序则加上-号

filter 过滤器

  • 检索特定内容，默认模糊匹配
  • 如果传入对象则匹配特定属性，如传入{name:'张三'}，则匹配那么属性中包含张三

  • filter过滤器会根据设置的检索数据过滤未匹配到的数据内容

  • 也可以通过设置检索条件为一个对象，实现在指定属性中检索

<ul class="messages">
    <li ng-repeat="item in messages | filter:{content:123}">
        {{item.content}}
    </li>
</ul>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>过滤器</title>
</head>

<body ng-app="app">
  <!-- <h1>{{100000 | currency}}</h1>
	<h1>{{1288323623006 | date:'fullDate'}}</h1> -->
  <div ng-controller="DemoController">
    <input type="text" ng-model="p1.name">
    <pre>{{p1 | json:8}}</pre>
    <p>{{text}}</p>
  </div>
  <!-- <div>
    <p>{{'itcast.cn,itcast.com,itheima.com' | limitTo:10:10}}</p>
  </div> -->
  <h1>{{1112123.141592635 | number:10}}</h1>
  <script src="node_modules/angular/angular.js"></script>
  <script src="angular-locale_zh-cn.js"></script>
  <script>
    angular.module('app', [])
      .controller('DemoController', ['$scope', '$filter', function($scope, $filter) {
        $scope.p1 = {
          name: '张三',
          age: 19,
          gender: false,
          zhengfang: {
            name: '张三',
            age: 19,
            gender: false
          },
          ceshi: [{
            name: '张三',
            age: 19,
            gender: false
          }, {
            name: '张三',
            age: 19,
            gender: false
          }, {
            name: '张三',
            age: 19,
            gender: false
          }]
        };
        // 如果在控制器中需要用到一个不存在的对象，都尝试使用注入的方式
        $scope.text = $filter('limitTo')('hahahahahahah', '10', 5);
      }]);
  </script>
</body>

</html>

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>列表筛选</title>
</head>

<body ng-app="app">
  <div ng-controller="ListController">
    <input type="text" ng-model="search">
    <ul>
      <li ng-repeat="todo in todos | filter:{completed:true}">
        <span>{{todo.id}}</span>
        <strong>{{todo.text}}</strong>
        <span>{{todo.completed}}</span>
      </li>
    </ul>
  </div>
  <script src="node_modules/angular/angular.js"></script>
  <script>
    angular.module('app', [])
      .controller('ListController', ['$scope', function($scope) {
        $scope.search = '';
        $scope.todos = [{
          id: 0.123,
          text: '学习',
          completed: true
        }, {
          id: 0.22,
          text: '睡觉',
          completed: false
        }, {
          id: 0.232,
          text: '打豆豆',
          completed: true
        }, {
          id: 0.2321,
          text: '打豆豆1',
          completed: true
        }, {
          id: 0.2322,
          text: '打豆豆2',
          completed: false
        }, {
          id: 0.2323,
          text: '打豆豆3',
          completed: true
        }, {
          id: 0.2323,
          text: '回答一下到底是true/false',
          completed: false
        }];
      }]);
  </script>
</body>

</html>

自定义比较

  • 通过自定义一个比较函数，在前台为filter指定第二个参数实现：
<ul class="numbers">
    <li ng-repeat="item in numbers | filter:1:comparator">
        {{ item }}
    </li>
</ul>
// js代码
$scope.comparator = function (source,target) {
    return source > target;
};
  • 默认filter过滤器使用的是模糊匹配
  • 需要自定义比较函数
  • filter的第三个参数
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>自定义filter</title>
</head>

<body ng-app="app">
  <div>
    <h1>{{ true | checkmark }}</h1>
    <h1>{{ false | checkmark : 2 }}</h1>
  </div>
  <hr>
  <div>
    <input type="text" placeholder="请输入你的体重" ng-model="weight">
    <p>你的体重：{{weight}} kg</p>
    <p>你{{weight|weight}}</p>
  </div>
  <script src="node_modules/angular/angular.js"></script>
  <script>
    angular.module('app', [])
      .filter('checkmark', function() {
        return function(input, style) {
          style = style || 1; // 短路运算符
          switch (style) {
            case 1:
              return input ? '\u2713' : '\u2718';
            case 2:
              return input ? '\u2714' : '\u2719';
          }
        };
      })
      .filter('weight', function() {
        return function(input) {
          if (input > 100) {
            return '太胖了';
          } else {
            return '太瘦了';
          }
        };
      });
  </script>
</body>

</html>

json 过滤器

  • 可以将一个对象以json形式解析
  • 利用它我们可以在界面上直观的查看一些对象的成员，这也是调试的好办法

自定义过滤器

angular.module('MyAppFilters', []).filter('checkmark', function() {
    return function(input) {
        return input ? '\u2713' : '\u2718';
    };
});

Form 表单

  • form表单元素在AngularJS中也是一个指令
  • 具备表单解析、格式化、校验等功能
  • 依赖于H5的智能表单
  • 演示代码见备注

Form 表单 – 验证

  • AngularJS允许在表单中使用H5的一些校验属性
  • 同时会根据校验条件的规则作出相应的数据变化
  • 注意：在使用验证时先取消浏览器本身自带的验证（给表单添加novalidate属性）

Form 表单 – 验证规则

  • 必填项 required or ng-required
  • 最小长度 minlength or ng-minlength
  • 最大长度 maxlength
  • 类型 type（number、email）
  • 等等

服务

  • 公用（公共）的业务逻辑集中存放的一段代码
  • 主要用于对重复业务的封装，重用
  • 一般主要封装针对于Model的CRUD

创建服务

  • 通过模块的service方法创建一个服务：
var myApp = angular.module('MyApp', []);
// 通过factory方法创建一个公用的service
var userService = myApp.service('UserService', function() {
    var users = { 1: 'zhangsan1', 2: 'zhangsan2' };
    return {
        getUser: function(id) {
            return users[id];
        },
        addUser: function(id, name) {
            users[id] = name;
        },
    };
});

 内置服务 - $http

  • $http服务是AngularJS中处理AJAX的服务
// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

$log服务

  • 打印控制台日志
  • 启用或者关闭

$timeout

自定义服务

路由

NG 中路由是单独提供的功能模块 ngRoute, 也是一个单独发型的文件

  • 安装或者下载angular-route的包
  • 引入这个包
  • 在自己的模块中添加 ngRoute 依赖
  • 路由配置（配置路由规则）
    • 规则指的就是 什么样的请求 找什么控制器
    • [{url:'/sdf',controller:'MainController'}]
  • 编写对应的控制器和视图

/students/zhangsan

/:role/:name

{role:students,name:zhangsan}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>路由模块使用</title>
</head>

<body ng-app="app">
  <ul>
    <li><a href="#/a">A</a></li>
    <li><a href="#/b">B</a></li>
    <li><a href="#/c">C</a></li>
  </ul>
  <div ng-view></div>
  <script src="node_modules/angular/angular.js"></script>
  <script src="node_modules/angular-route/angular-route.js"></script>
  <script id="a_tmpl" type="text/ng-template">
    <!-- 只有type="text/javascript"的script节点才会被当做JS执行 -->
    <!-- script中的内容就算不能执行，也不可以显示在界面上 -->
    <h1>{{title}}</h1>
  </script>
  <script>
    var app = angular.module('app', ['ngRoute']);
    app.config(['$routeProvider', function($routeProvider) {
      $routeProvider
      // 某一类特定地址
        .when('/students/:name?', {
          controller: 'StudentsController',
          templateUrl: 'a_tmpl'
        })
        .when('/a', {
          controller: 'AController',
          templateUrl: 'a_tmpl'
        })
        .when('/b', {
          controller: 'BController',
          templateUrl: 'a_tmpl'
        })
        .when('/c', {
          controller: 'CController',
          templateUrl: 'a_tmpl'
        })
        // 别的请求
        .otherwise({
          // 跳转到一个地址
          redirectTo: '/a'
        });
    }]);

    app.controller('StudentsController', ['$scope', '$routeParams', function($scope, $routeParams) {
      $scope.title = '你好' + $routeParams['name'] + '这是A控制器';
    }]);

    app.controller('AController', ['$scope', function($scope) {
      $scope.title = '这是A控制器';
    }]);

    app.controller('BController', ['$scope', function($scope) {
      $scope.title = '这是B控制器';
    }]);

    app.controller('CController', ['$scope', function($scope) {
      $scope.title = '这是C控制器';
    }]);
  </script>
</body>

</html>

如果连入第三方文件时不写协议的话：

http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js ↓ 如果当前你的网站是HTTP的方式部署的话，请求 http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js 如果是HTTPS的话，请求 https://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js

Features - MVC

  • 将应用程序的组成根据职责划分成三个模块：
  • Model（数据模型，业务逻辑）
  • View（界面展示，展示结构）
  • Controller（控制器，控制逻辑）
  • 优势：每个模块分工明确，职责清晰，复用
  • 目的：模块化和复用！！

AngularJS 中的MVC

Web前端学习笔记——AngularJS之过滤器、服务、路由

Features - Module

  • 将同一个页面根据功能或业务的不一样划分成不同的模块，模块间相互独立
  • 便于协同分工和维护
  • 通过ng-app指令指定不同的模块

Features - Directive

  • 指令可以说是一个命令
  • 每个指令都是告诉AngularJS需要干什么
  • 除了预定义的指令之外，AngularJS还可以自定义指令去封装一些重复的操作

Features – Data Binding

  • AngularJS实现了双向数据绑定
  • 单向数据绑定指的是从Model到View的单向数据同步
  • 双向数据绑定在单向基础上增加了从View往Model的数据同步
  • 在应用交互时（表单），双向绑定尤其方便

Controller as 语法

myApp.controller('AsController', function(UserService) {
    // 这里this拿到的就是控制器对象本身
    // 可以通过给this对象扩展实现数据往View的传递
    this.add = function() {
        UserService.addUser(5, 'mazi');
    };
});
<div ng-controller="TwoController as dataContext">
    <input type="button" value="add" ng-dblclick="dataContext.add()">
</div>
相关标签： WEB前端

上一篇： Web前端学习笔记——AngularJS入门

下一篇： 登鹳雀楼（网页设计代码）

推荐阅读