• angularJS 入门


    教程:http://www.apjs.net

    1、ng-app:angularjs 处理的范围

    2、{{ }} 表达式

    3、双向数据绑定

    <input ng-model='yourname'>
    {{yourname || 'world'}}
    

     4、添加控制器:普通的js,可以进行测试,

         前端:ng-controller ng-repeat

         其他就相当于express的知识了

    5、过滤:phone in phones | filter:query

    6、测试

    单元测试:mocha
    端对端测试:angular特有的吧。有很多知识不知道是什么,比如browser()
    

     7、排序:phone in phones | filter:query | orderBy:orderprop

    8、ng-click 

    其他组织方法

    1、前端ng-app= 'firstapp'
    2、js:var firstapp = angular.module('firstApp, []);
    

     9、module and dependency injection

    var myMod = angular.module('myMod');
    var myApp = angular.module('myApp', 'myMod');
    

    10、rootScope

    .run(function($rootScope){ $rootScope.rootValue = 5;  }) 

    11、emit and broadcast

     emit 发送给父作用域

    broadcast 发送给子作用域

    页面上,父控制器要包含子控制器。

    12、模板 

    <input ng-model='msg'>
    {{msg | uppercase}}
    ng-model 是指令; {{}} 是表达式; | uppercase是过滤器
    

    标签和属性的规范化:前缀,连接符

    13、directive

     directive-form:一定要添加ng-controller

    14、内置服务

    $http.get()

    15、一个页面引入多个模块,需要通过依赖的方式来添加,不能同时有两个模块为主模块,也就是ng-app只能用一次

    16、全局API

    copy: 深拷贝
    element:angular.element('<h1>h21</h1>').text()
                 text 是jqlite的函数
                 element有什么用呢?
    equals(o1, o2): ===
    extend(dst, src): 把src的属性复制到dst
    forEach
    fromJSON
    toJSON
    isArray isDate isDefined isElement isFunction isNumber isObject isString isUndefined lowercase uppercase

    17、创建module

    var myApp = angular.module('myApp', [], function(){
    	
    })
    var myApp1 = angular.module('myApp', []);  覆盖上面的实例定义
    var myApp2 = angular.module('myApp');  返回上面创建的实例
    没理解

     18、配置块

    .config(['$provide', function($provide){}])

    19.运行块

    .run()

    不知道该怎么用?

    20、提供器:对象提供器;服务提供器

    通过.config() 添加提供器;每个提供器有对应的方法,比如controllerProvider对应module.controller(),便于使用吧。

    21、作用域:具有层次结构

    在run中创建,在模块组件(controller)中访问

    可以从一个控制器访问父作用域的值,但不能访问它的兄弟或子作用域的值。如果你在一个子作用域添加一个属性名称,它不会覆盖父作用域,而是在子作用域创建不同于父属性的值的同名属性。

    22、模板:表达式{{}},过滤器 | filter,指令 ng-model

    过滤器:

    currency: 数值转为货币
    

     filter

    有输入,有输出,需要结合使用。
    输入可以为search.name, data中有name属性。
    comparetor true不知道怎么用,没看到效果
    

     json:把js对象转为json对象

    json:4没什么用呀?

    limitTo: 限制字符串的长度和数组的长度

    lowercase

    uppercase

    number: 把数值转为文本,参数表示小数的位数

    orderBy:排序,| orderBy:-age:true

    age前可以加+ -来表示正序和逆序。

    date:

    自定义过滤器

    通过filter方法,过滤器的名字为censor,通过依赖注入添加过滤器时,名字为censorFilter


    23、指令

    一类:支持angularjs功能的指令

    ngApp

    二类:扩展表单

    input

    三类:作用域绑定到页面元素:模型跟作用域一样的意思

    ngModel

    四类:网页事件绑定到页面元素

    ngClick

    五类:自定义指令:还没看懂。

    通过directive方法

    24、服务

    内置服务

    $http:get post

    $cacheFactory:存储库,会用到两个controller,两个controller都需要在页面上进行调用。

    $window: 浏览器的window对象提供了一个jquery 的封装

    $cookieStore: 

    1、引入angular-cookies.js
    2、定义module时,添加ngCookies
    3、把cookieStore注入控制器
    4、get put remove
    

     $interval, $timeout: 1.2版本以上的才有,可以cancel,最好通过$scope.on('destory', function(){})来做

     $animate:以css和js的方式实现动画

    自定义服务

    value,constant,factory,service,

    接下来看个具体的例子。

  • 相关阅读:
    自动化系列-pyppeteer安装
    用python做一个可视化生成二维码的工具
    Python第三方包之DingDingBot
    封装属于自己的Python包
    sqlldr使用
    MS MQ 消息队列
    PDF打印
    oracle 存储过程编辑 卡死
    winrar 压缩文件方法
    数值 转换 成 带千位符的数值,且转成大写
  • 原文地址:https://www.cnblogs.com/wang-jing/p/5064765.html
Copyright © 2020-2023  润新知