• Angular.js学习笔记(三)


    一、过滤器

    1、uppercase,lowercase 大小写转换
    {{ "lower cap string" | uppercase }} // 结果:LOWER CAP STRING
    {{ "TANK is GOOD" | lowercase }} // 结果:tank is good
    2、date 格式化
    {{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25
    3、number 格式化(保留小数)
    {{149016.1945000 | number:2}}//保留两位
    {{149016.1945000 | number}}//默认为保留3位
    4、currency货币格式化
    {{ 250 | currency }} // 结果:$250.00
    {{ 250 | currency:"RMB ¥ " }} // 结果:RMB ¥ 250.00
    5、filter查找
    输入过滤器可以通过一个管道字符(|)和一个过滤器添加到指令中,该过滤器后跟一个冒号和一个模型名称。
    filter 过滤器从数组中选择一个子集
    // 查找name为iphone的行
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | filter:{'name':'iphone'} }}
    同时filter可以自定义比较函数。
    6、limitTo 截取
    {{"1234567890" | limitTo :6}} // 从前面开始截取6位
    {{"1234567890" | limitTo :6,6}} // 从第6位开始截取6位
    {{"1234567890" | limitTo:-4}} // 从后面开始截取4位
    7、orderBy 排序
    // 根据id降序排
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id':true }}

    // 根据id升序排
    {{ [{"age": 20,"id": 10,"name": "iphone"},
    {"age": 12,"id": 11,"name": "sunm xing"},
    {"age": 44,"id": 12,"name": "test abc"}
    ] | orderBy:'id' }}
    9、json(不用掌握,基本用不上)

    二、服务

    在 AngularJS 中,服务是一个函数或对象,可在你的 AngularJS 应用中使用。
    AngularJS 内建了30 多个服务。
    $location 服务,它可以使用 DOM 中存在的对象,类似 window.location 对象,但 window.location 对象在 AngularJS 应用中有一定的局限性。
    AngularJS 会一直监控应用,处理事件变化, AngularJS 使用 $location 服务比使用 window.location 对象更好。
    AngularJS $timeout 服务对应了 JS window.setTimeout 函数。
    AngularJS $interval 服务对应了 JS window.setInterval 函数。

    创建自定义服务
    你可以创建访问自定义服务,链接到你的模块中:
    创建名为hexafy 的访问:
    app.service('hexafy', function() {
    this.myFunc = function (x) {
    return x.toString(16);
    }
    });
    要使用访问自定义服务,需要在定义过滤器的时候独立添加:
    实例
    使用自定义的的服务 hexafy 将一个数字转换为16进制数:
    app.controller('myCtrl', function($scope, hexafy) {
    $scope.hex = hexafy.myFunc(255);
    });

    三、路由

    NG中路由是单独提供的功能模块 ngRoute, 也是一个单独发行的文件
    - 安装或者下载angular-route的包
    - 引入这个包
    - 在自己的模块中添加 ngRoute 依赖
    - 路由配置(配置路由规则)
    + 规则指的就是 什么样的请求 找什么控制器
    + [{url:'/sdf',controller:'MainController'}]
    - 编写对应的控制器和视图

    实例解析1:
    1、载入了实现路由的 js 文件:angular-route.js。
    2、包含了 ngRoute 模块作为主应用模块的依赖模块。
    angular.module('routingDemoApp',['ngRoute'])
    3、使用 ngView 指令。
    <div ng-view></div>
    该 div 内的 HTML 内容会根据路由的变化而变化。
    4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。
    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/',{template:'这是首页页面'})
    .when('/computers',{template:'这是电脑分类页面'})
    .when('/printers',{template:'这是打印机页面'})
    .otherwise({redirectTo:'/'});
    }]);
    AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,我们请求把$routeProvider注入到我们的配置函数并且使用$routeProvider.whenAPI来定义我们的路由规则。
    $routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:
    第一个参数是 URL 或者 URL 正则规则。
    第二个参数是路由配置对象。

    实例解析2:(黑科技写法--自称)
    <script id="a_tmpl" type="text/ng-template">
    <!-- 只有type="text/javascript"的script节点才会被当做JS执行 -->
    <!-- script中的内容就算不能执行,也不可以显示在界面上 -->
    <h1>{{title}}</h1>
    </script>

    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
    .when('/',{templateUrl: 'a_tmpl'})
    .when('/computers',{templateUrl: 'a_tmpl'})
    .when('/printers',{templateUrl: 'a_tmpl'})
    .otherwise({redirectTo:'/'});
    }]);


    路由设置对象:
    AngularJS 路由也可以通过不同的模板来实现。
    $routeProvider.when 函数的第一个参数是 URL 或者 URL 正则规则,第二个参数为路由配置对象。
    路由配置对象语法规则如下:
    $routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
    });
    参数说明:
    template:
    如果我们只需要在 ng-view 中插入简单的 HTML 内容,则使用该参数:
    .when('/computers',{template:'这是电脑分类页面'})
    templateUrl:
    如果我们只需要在 ng-view 中插入 HTML 模板文件,则使用该参数:
    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
    });
    以上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view 中。
    controller:
    function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。
    controllerAs:
    string类型,为controller指定别名。
    redirectTo:
    重定向的地址。
    resolve:
    指定当前controller所依赖的其他模块。

    高级路由:

    控制器中传入参数$routeParams用来代表路由中的值,传入参数$route,用于在switch(status)--'var status=$routeParams.status'函数中的default中来更新$routeParams值为空
    ,代码为:$route.updateParams({status:''});
    如果锚点是/students/zhangsan
    可以写成/:role/:name来对应此锚点
    会得到{role:students,name:zhangsan}对象

    ## 如果连入第三方文件时不写协议的话:
    http://apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js

    <script src="//apps.bdimg.com/libs/angular.js/1.4.7/angular.min.js"></script>
    如果当前你的网站是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

  • 相关阅读:
    细菌觅食算法-python实现
    蝙蝠算法-python实现
    人工免疫算法-python实现
    人工鱼群算法-python实现
    人工蜂群算法-python实现
    粒子群优化算法-python实现
    查看所有定时任务
    记一次反挖矿病毒。。。
    ubantu20.04安装Amber20 && AmberTools20
    centos8.2装teamviewer,启动时无法显示GUI,无法登录,但是不报错的解决办法。
  • 原文地址:https://www.cnblogs.com/lm970585581/p/6681962.html
Copyright © 2020-2023  润新知