Angular.js 学习笔记整理二

来源：互联网发布：centos设置中文编辑：程序博客网时间：2024/05/17 06:44

一、数据相关指令(双向绑定)[/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       =>   switchng-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>

打印调试信息 loglog.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）httppost数据请求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'));

阅读全文

0 0

Angular.js 学习笔记 整理二

Angular.js 学习笔记整理二