1.angular介绍

初級使用视频添加链接描述

angular工具

angular.module('名', [依赖模块]) 模块

angular.bind(*) : 修改this指向

angualr.copy() // a = angular.copy(a, b) ---a完全覆盖了b,c就是a

angular.extend(a, b) a里面集成了b属性

angular.isArray

angular.isDate

angular.isDefined 判断是否存在如果不是undefined,跟下面相反

angular.isUndefined

angular.isFunction

angular.isNumber

angular.isObject

angular.isString

angular.isElement

angular.version 版本

angular.equals 这个数组相等,nan相等

angular.forEach(values, function(value, key) {this.push(value)}, result) var result = [] values可以是数组和对象, 里面的this就是第三个参数,也就是result

angular.fromJson/toJson({}, true) // 跟JSON.stringfy那种一样,只不过变成json的时候加第二个参数true就可以格式好一些

angular.element 其实后期就可以转化成jquery这种后面使用jquery方法

angular.bootstrap 可以动态变成angular,不用初始写ng-app,需要时候在变

angular.identity/noop 其实就是返回一样的和返回undefined,平常没用

其他的就看api就行

模块的属性m1= angular.module

m1属性

  • m1.controller 控制器.写js逻辑,里面[]注入的一般是服务MVUR有scope,timeout(在里面使用settimeout不起作用需要使用这个timeout才行)
  • m1.run 可以弄一個全局的,不用写控制器就可以的用的
    m1.run(['rootScope', function(rootScope) {
    $rootScope.name = 'hello'
    }])
  • m1.filter 过滤器
  • m1.directive 自定义指令
  • m1.factory() 自定义服务写公共使用的
  • m1.provider() 也是自定义服务,但是跟上面factory区别,factory不可以初始化服务也就是不可以.config
  • m1.service面向对象

过滤器

自有的過濾器

  • currency: '¥' biancheng变成金额
  • number: 变成数字,后面number:2 2表示小数点两位
  • lowercase/uppercase 大小写转化
  • 变成json,<pre>{{ obj |json }}<pre> 格式变成json
  • limitTo:2 截取数组或字符串2位
  • date: ** 后面可以有参数可选把毫秒格式化'223212123'|date
  • order: 'age' : true数组根据age进行排序, 第二个参数可以逆排序
  • filter {{name|filter :'l': true}}过滤数组,比如数组中匹配value值匹配到l的值,第二个参数是匹配完整的value
    也可以多個使用
    eg
javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- 19,721,389 -->
    <span>{{ name|number:0 }}</span> 
    <!-- HE -->
    <span>{{ str|limitTo: 2|uppercase}}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', function($scope) {
            $scope.name = 19721389.132143
            $scope.str = 'hello'
        }])
    </script>
</body>
</html>

可以使用服务形式$filter

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- HELLO -->
    <span>{{ name }}</span>
    <!-- 32221.99 -->
    <span>{{ num }}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$filter', function($scope, $filter) {
            $scope.name = $filter('uppercase')('hello')
            $scope.num = $filter('number')(32221.9932, 2)
        }])
    </script>
</body>
</html>

自定义过滤器.模块方法兩種寫法

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body ng-app="myApp" ng-controller="Aaa">
    <!-- Hello -->
    <span>{{ name }}</span>
    <!-- Hello -->
    <span>{{ lalal | firstUpper: 2 }}</span>
    <script src="./public/angular.js"></script>
    <script>
        var m1 = angular.module('myApp', [])
        m1.controller('Aaa', ['$scope', '$filter', function($scope, $filter) {
            $scope.name = $filter('firstUpper')('hello')
            $scope.lalal = 'hello'
        }])
        m1.filter('firstUpper', function() {
            return function(str, num) {
                console.log(num) // 2
                return str.charAt(0).toUpperCase() + str.substring(1)
            }
        })
    </script>
</body>
</html>

注意

{{}} : 表达式 对于属性来说,如果原生的egclass="{{}}" 使用变量就需要加{},如果是ng-这种比如 ng-value="*"直接变量名就行ng-class和ng-style,如果直接表达式{}这个就行,平时原生的基本就是{{}}, ng-指令形式的就基本是变量不用加{{}} ,如果不起作用在试试别种形式

javascript 复制代码
<li ng-repeat="data in dataList" class="{{$odd? 'active1': 'active2'}}">{{data}}{{$odd}}</li>
<input type="button" ng-value="text" ng-disabled="IsDisabled">
<input type="text" ng-value="text" ng-readonly="IsDisabled">
<input type="checkbox" ng-checked="IsDisabled">
<span ng-class="{active: true}" ng-style="{color: 'yellow'}">{{ text }}</span>
 <span ng-style="ngStyle">{{ text }}</span>
 <a ng-href="{{ngHerf}}">qubaidu</a> // 这个就需要用{{}}
相关推荐
Jerry Lau28 分钟前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123451 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
0wioiw01 小时前
Flutter基础(前端教程③-跳转)
前端·flutter
Jokerator1 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css
落笔画忧愁e1 小时前
扣子Coze纯前端部署多Agents
前端
海天胜景1 小时前
vue3 当前页面方法暴露
前端·javascript·vue.js
GISer_Jing1 小时前
前端面试常考题目详解
前端·javascript
Boilermaker19922 小时前
【Java EE】SpringIoC
前端·数据库·spring
中微子2 小时前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上10243 小时前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js