Angular.js 学习笔记整理二_ng-mouseout-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_38031539/article/details/74576432

本文详细介绍AngularJS的关键特性，包括数据绑定、事件绑定、过滤器、依赖注入等，并提供了丰富的示例代码，帮助开发者快速掌握AngularJS的核心概念和技术。

一、数据相关指令(双向绑定)[/size]
ng-bind
ng-cloak 控制显示时不出现闪烁现象
ng-bind-template

ng-model = 'msg'  可以给模型传递数据
事件绑定   与 js 事件相同
ng-click = "函数"
控制器中 $scope.函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">
    <!-- 绑定名称 -->
        <li ng-bind="name"></li>
        <!-- 绑定数据 ng-cloak 处理数据闪烁-->
        <li ng-cloak>{{215465+16547*4584}}</li>
        <li ng-bind-template='{{name}}{{age}}'></li>

    </ul>
<script type="text/javascript">
    //定义模块
    var app = angular.module('app',[]);
    //绑定控制器
    app.controller('ctrl',['$scope',function ($scope) {
        $scope.name='圆圆';
        $scope.age='18';
    }])
</script>
</body>
</html>

二、事件绑定
ng-init 初始化定值
ng-dblclick 双击
ng-blur 失去焦点
ng-mouseout 鼠标类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">
        <li>
            <button ng-click="single()">单击</button>
        </li>
        <li>
            <button ng-dblclick="double()">双击</button>
        </li>
        <li>
        <input type="text">
            <button ng-blur="blur()">失去焦点</button>
        </li>
        <li>
            <button ng-mouseout="mouseout()">鼠标移除</button>
        </li>
    </ul>
    <script type="text/javascript">
 var app = angular.module('app',[]);
    //绑定控制器
    app.controller('ctrl',['$scope',function ($scope) {
        $scope.single = function   {
            console.log('猜猜我是谁');
        };
        $scope.double = function () {
            console.log('谁啊');
        }
         $scope.blur = function () {
            console.log('小猫');
        }
         $scope.mouseout = function () {
            console.log('阿狗');
        }
    }])
    </script>
</body>
</html>

三、ng-switch

ng-repeat 循环
ng-if  判断
ng-switch       =>   switch
ng-switch-when  =>   case

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
    <div ng-app="zuzhi" ng-controller="ctrl">
        <h1>{{title}}</h1>
        <h3>{{sub_title}}</h3>
        <ul>
            <li ng-repeat="meb in mebs">
                <p>{{meb.name}}</p>
                <p>{{meb.duty}}</p>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        // 定义模块
        var app = angular.module('zuzhi',[]);
        // 绑定控制器
        app.controller('ctrl',['$scope',function($scope){
            // 标题
            $scope.title = "传销组织被激活";
            $scope.sub_title = "成员浮现";
            $scope.mebs = [
                {name:"成员1", duty:"会长"},
                {name:"成员2", duty:"直白哥"},
                {name:"成员3", duty:"犀利哥"},
                {name:"成员4", duty:"浩哥"}
            ]

        }]);
    </script>

</body>
</html>

四、作用域
controller 用控制器作单位来描写一个模型
$scope

全局作用域(根作用域)
$rootScope  =>ng-app     范围内会自动建立一个根作用域
子作用域    $scope
子集控制器 =+>可以访问父级的内容

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app" ng-init="name='顺治'">
    <!-- 父及控制器 -->
    <div ng-controller="parent">
        <h1>{{name}}</h1>
        <!-- 子集控制器 -->
        <div ng-controller="child">
            <h2>{{name}}</h2>
        </div>
    </div>
</body>
</html>

<script type="text/javascript">
    // 定义模块
    var app = angular.module("app",[]);
    // 绑定控制器
    app.controller('parent',['$scope',function ($scope) {
        // $scope.name = "康熙";
    }]);
    app.controller('child',["$scope",function ($scope) {
        $scope.name = "雍正";
    }]);
</script>

五、过滤器
{{中使用”|”分割 “:”添加筛选条件}}

内置过滤器:
    1.currency 将数值格式格式化为货币格式
    2.date    日期格式化(y年 M 月 d日 h小时 m分钟 s秒)
    3.filter  过滤器给定一个满足条件的子集
    4.json  将js对象转成json字符串
    5.limitTo  取出字符串或数组的前几位或者后几位
    6.lowercase  将文本转化为小写格式
    7.uppercase  将文本转化为大写模式       
    // input[0].toUpperCase()首字母大写
    input[0].toUpperCase()+input.slice(1);
    8.number 数字化格式,可以控制小数点位数
    9.orderBy  对数组进行排序  参数2可控制排序方向     " ":true/falsse

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">
        <!-- 转变货币 -->
        <li>{{price|currency:"$"}}</li>
        <!-- 变成时间 -->
        <li>{{now|date:"yyyy/MM/dd hh:mm:ss"}}</li>
        <!-- 过滤内容 -->
        <li>{{items|filter:'h'}}</li>
        <!-- json数据过滤 -->
        <li>{{students|filter:{age:21} }}</li>
        <!-- json数据 -->
        <li>{{students|json}}</li>
        <!-- 取出前几位   限制+留前 -留后 -->
        <li>{{items|limitTo:-3}}</li>
        <!-- 转变为大小写 -->
        <li>{{str|lowercase|limitTo:3}}</li>
        <li>{{str|uppercase}}</li>
        <!-- 顺序排列 -->
        <li>{{students|orderBy:'-age'}}</li>
        <!-- 数组排序 -->
        <li>{{items|orderBy:'':false}}</li>
    </ul>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('ctrl',['$scope',function ($scope) {
            // 价格
            $scope.price = 12.8;
            //时间
            $scope.now = new Date;
            $scope.items = ['html','js','css','css3','html5','jq'];
            //json数据
            $scope.students = [
                {name:"stu1",age:"18"},
                {name:"stu2",age:"19"},
                {name:"stu3",age:"25"},
                {name:"stu4",age:"21"},
            ];
            // 字符串
            $scope.str = "HELLOW WORLD!"
            $scope.str = "hello world!"
            //函数处理升序降序

        }])
    </script>
</body>
</html>

六、自定义过滤器
绑定控制器
控制器里面
$scope.str = ‘god is girl’
自定义过滤器
app.filter(‘过滤器名’,function(){
返回过滤后的值
return function(){
回调更改内容
return 更改值
}
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="ctrl">
        <!-- <h3>{{name|demo}}</h3> -->
        <h1>{{info|capitalize}}</h1>
    </div>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        //自定义过滤器
        /*app.filter('demo',function () {
            return function (input) {
                //过滤处理
                return 'hello'+input;
            }
        })*/
        //首字母处理
        app.filter('capitalize',function () {
            // 返回过滤后的值
            return function (input) {
                //
                console.log(input.slice(1));
                // input[0].toUpperCase()   首字母大写 G
                // 所有首字母大写
                // 1.字符串切割  ""     2.循环处理所有单个切割字符串   3.拼接  返回字符串
                return input[0].toUpperCase()+input.slice(1);
            }
        })
        app.controller('ctrl',['$scope',function ($scope) {
            $scope.name = "网易";
            $scope.info = "god is a girl"
        }])
    </script>
</body>
</html>

七、依赖注入
将一个通用的漏记或模块封装成一个对象。使用时可以最大成程度复用
使用和被使用的时候产生相互依赖关系

优点： 简化开发  节省代码  自动查找相互依赖

简单的说：就是一个模块，我可以使用你，你也可以使用我，将逻辑封装成一个对象或者函数，在使用者和被使用者相互依赖
常见的模块：
服务模块: $scope、$ http、 $location、$ timeout

推断式依赖注入:
        没有声明，angularjs会将函数名称当成以来名称
        缺点:无法绑定数据
             压缩时完全失去依赖

<body ng-app="app">
    <div ng-controller="ctrl">{{name}}</div>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        //推断式注入
        app.controller('ctrl',function ($rootscope,$http) {
            $http({

            });
        })
    </script>

行内式注入:
    ["$scope","$http"]

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <div ng-controller="ctrl">{{name}}
</div>
</body>
</html>

<script type="text/javascript">
    var app = angular.module("app",[]);
    // 推断式注入
    app.controller("ctrl",["$scope","$http", function(bcd,$http){
        bcd.name = "我是一个依赖注入";
    }])
</script>[/code]
[size=5]八、服务[/size]
内置服务
    $location
    找到绝对路径
        $location.absUrl();
    协议
        $location.protocol();
    端口号:
        $location.port();
    相对路径
        $location.path();
    哈希值:
        $location.hash();
    查询的字符串
        $location.search();
[size=5]注：在node.js环境下运行 用npm引express express-static body-parser[/size][color=#ff0000][/color]
[code=html,html 代码,true]<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
<dl ng-controller="ctrl">
    <dd>{{title}}</dd>
    <dd>{{absUrl}}</dd>
    <dd>{{url}}</dd>
    <dd>{{host}}</dd>
    <dd>{{search}}</dd>
    <dd>{{protocol}}</dd>
    <dd>{{port}}</dd>
    <dd>{{hash}}</dd>
</dl>
    <script type="text/javascript">
 var app = angular.module('app',[]);
        //行内注入
        app.controller('ctrl',["$scope","$location",function ($scope,$location) {
              //内置服务  获取地址相关信息
            $scope.title = "学习$location服务";
            //绝对路径
            $scope.absUrl = $location.absUrl();
            //地址
            $scope.url = $location.url();
            //主机
            $scope.host = $location.host();
            //搜索
            $scope.search= $location.search();
            //协议
            $scope.protocol = $location.protocol();
            //端口:
              $scope.port=$location.port();
              //哈希值
              $scope.hash=$location.hash();

        }])
    </script>
</body>
</html>

定时器 $timeout ||$ interval
setTimeout || setInterval
控制器绑定(“控制器名”,[“ $interval”,function(){$ interval(函数,时间);
}])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
    <p ng-cloak>{{now|date:"yyyy-MM-dd hh:mm:ss"}}</p>
    <button ng-click="stop()">stop</button>
    <p>{{msg}}</p>
</div>
    <script type="text/javascript">

    var app = angular.module("app",[]);
    app.controller('ctrl',["$scope","$timeout","$interval",function ($scope,$timeout,$interval) {
        // $timeout只执行一次
        $timeout(function () {
            $scope.msg = "执行一次";
        },3000)
        //一开始没有加载问题处理
            $scope.now = new Date();

        //计时器    每秒更新一次
        var timer = $interval(function () {
            $scope.now = new Date();
        },1000);
        //停止定时器
        $scope.stop = function () {
            //清除定时器
            $interval.cancel(timer);
        }
    }]);
    </script>
</body>
</html>

过滤：
$filter在控制器中的格式化数据控制器(‘控制器名’,[“$ filter”,function(){

}])

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
<ul ng-controller="ctrl">
        <li>价格:{{}}</li>
        <li>大写:{{str}}</li>
        <li>截取:{{str1}}</li>
</ul>
    <script type="text/javascript">
 var app = angular.module('app',[]);
app.controller("ctrl",["$scope","$filter",function ($scope,$filter) {
    $scope.price = 11.11;
    var currency = $filter('currency')
    $scope.price = currency($scope.currency);
    $scope.str ="god is a girl";
    var uppercase = $filter('uppercase');
    $scope.str = uppercase($scope.uppercase);
    //截取
    var limitTo = $filter('limitTo') ;
    $scope.str1 = limitTo($scope.str,3);

}])
    </script>
</body>
</html>

打印调试信息 $log$ log.log(‘日志’);
$log.info(‘信息’);$ log.warn(‘警告’);
$log.error(‘错误’);$ log.debug(‘调试’);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">

    </ul>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('ctrl',['$log',function ($log) {
            $log.info('普通信息');
            $log.warn('警告信息');
            $log.error('错误信息');
             $log.log('打印信息');
            $log.debug('调试信息');
        }])

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

九.向服务器发起请求 $http 控制器(‘控制器名’,[“$ http",function($http){

 $http({
            method:请求方式(get/post),
            url:地址,
            data:{参数},
            headers:请求头信息,
        }).success(function(data,status,headers,config){
                    //数据    请求状态   请求头  配置信息
        }).error(function(data,status,headers,config){
        })
    }])

1）get请求
$http.get() ==>从后边拿数据
res.send(data);
创造一个data
1.写入json文件
2.写一些数据
返回到前端
处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">
    <li>
        <button ng-click="single()">获取数据</button>
    </li>
        <!-- 应用请求下来的数据 -->
    <li ng-repeat="star in stars">{{star.name}}</li>
    </ul>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('ctrl',['$scope','$http',function ($scope,$http) {
            //获取数据
            $scope.single = function () {
                // 发起网络请求
               $http({
                    //地址
                    url:"/user",
                    method:"get",
                    //请求成功
                }).success(function (info) {
                    // console.log(info);
                    //接收数据
                    $scope.stars = info;
                    //请求失败
                }).error(function (err) {
                     console.log(err);
                });
            }

        }])

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

2） $http post 数据请求$ http.post() ==> 前边最好传一些值
=> 性别年龄
$http.jsonp()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="app">
    <ul ng-controller="ctrl">
    <li>
        <button ng-click="single()">获取数据</button>
    </li>
    </ul>
    <script type="text/javascript">
        var app = angular.module('app',[]);
        app.controller('ctrl',['$scope','$http',function ($scope,$http) {
            //获取数据
            $scope.single = function () {
                // 发起网络请求
               $http({
                    //地址
                    url:"/user",
                    method:"post",
                    //请求头
                    headers:{
                        "Content-Type":"application/x-www-form-urlencoded"
                    },
                    //传参
                    data:{
                        age:10,
                        name:'xiaoming'
                    }
                    //请求成功
                }).success(function (info) {
                    console.log(info);
                    //请求失败
                }).error(function (err) {
                     console.log(err);
                });
            }

        }])

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

server.js代码：

const express = require('express');
const static = require('express-static');
// const bodyParser = require('body-parser');

var server = express();
var data = [{
    name: "樊胜美",
    age: 32
}, {
    name: "曲筱绡",
    age: 26
}, {
    name: "邱莹莹",
    age: 23
}, {
    name: "安迪",
    age: 36
},{
    name: "关雎尔",
    age: 23
}]
// server.use(bodyParser.urlencoded());
server.use('/user', function(req, res) {
    res.send(data);
    // console.log(req.body);
    res.end();
})
server.listen(8080);
server.use(static('./www'));