angular.js小知识总结

angular-watch.html 代码如下:

<script>
            var app = angular.module(‘app‘,[]);
            app.controller(‘ctrl‘,function($scope){
                $scope.init = {
                    price : 20,//单价
                    count : 5, //数量
                    money : 3  //运费
                };
                $scope.a = 0;
                $scope.$watch(‘init.count‘,function(newVal,oldVal){
                    console.log(newVal + ‘:‘ + oldVal);
                    $scope.a = newVal > 10 ? 0: $scope.init.count * $scope.init.money;
                },true);//第三个参数
                $scope.sum = function(){
                    return $scope.init.price * $scope.init.count;
                }
            });
        </script>
        单价 : <input type="text" ng-model="init.price"/><br /><br />
        数量 : <input type="number" ng-model="init.count"/><br /><br />
        总价 : {{sum()}}<br /><br />
        运费 : {{a}}

angular-filter 代码如下:

<script>
            var app = angular.module(‘app‘,[]);
            app.run([‘$routeScope,$filter‘,function($routeScope,$filter){
                $routeScope.a = 12;
                $routeScope.name = $filter(‘number‘)(123456789);
            }])
        </script>

angula-drag 代码如下:

<!DOCTYPE html>
<html ng-app="app">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box {
                width: 100px;
                height: 100px;
                background: salmon;
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>

    <body>
        <script src="js/jquery.3.1.1.js"></script>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘app‘, []);
            app.directive(‘myDrag‘, function() {
                return {
                    link: function(scope, element, attr) {
                        element.on(‘mousedown‘, function(ev) {
                            var This = $(this);
                            var disX = ev.clientX - $(this).offset().left;
                            var disY = ev.clientY - $(this).offset().top;
                        });
                        $(document).on(‘mousemove‘, function() {
                            This.css({
                                left: ev.clientX - disX,
                                top: ev.clientY - disY
                            })
                        })
                        $(document).on(‘mouseup‘,function(){
                            $(document).off();
                        })
                    },
                    restrict: ‘A‘
                }
            })
        </script>
        <div id="box" my-drag></div>
    </body>

</html>

angular-disabled 代码如下:

<script>
            var app = angular.module(‘app‘,[]);
            var timer;
            app.controller(‘ctrl‘,function($scope,$interval){
                $scope.iNum = 5;
                $scope.isDisabled = true;

                timer = $interval(function(){
                    $scope.iNum--;
                    if ($scope.iNum == 0) {
                        $interval.cancel(timer);
                        //取消定时器
                        $scope.isDisabled = false;
                    }
                },1000);
            });
        </script>
        <div ng-controller="ctrl">
            <input type="button" ng-disabled="isDisabled" value="{{iNum}}"/>
        </div>

angular-directive 代码如下:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p{
                width: 300px;
                height: 300px;
                border: 1px solid saddlebrown;
                display: none;
            }
            .on{
                background: red;
            }
        </style>
        <script src="js/angular.min.js"></script>
        <script src="js/jquery-1.9.1.js"></script>
        <script>
            var app = angular.module(‘app‘,[]);
            app.controller(‘ctrl‘,function($scope){
                $scope.data = [
                {title:‘新闻‘,"con":‘新闻‘},
                {title:‘娱乐‘,"con":‘娱乐‘},
                {title:‘体育‘,"con":‘体育‘}
                ];
                $scope.data2 = [
                {title:‘八卦‘,"con":‘八卦‘},
                {title:‘军事‘,"con":‘军事‘},
                {title:‘农业‘,"con":‘农业‘}
                ];
            });
            app.directive(‘myTab‘,function(){
                return{
                    link:function(scope,element,attr){
                        element.delegate(‘input‘,‘click‘,function(){
                            $(this).attr(‘class‘,‘on‘).siblings(‘input‘).attr(‘class‘,‘‘);
                            $(this).siblings(‘p‘).eq($(this).index()).show().siblings(‘p‘).hide();
                        });
                    },
                    //element.delegate : 事件委托
                    restrict:‘ECMA‘,
                    replace:true,
                    //scope:true,
                    scope:{
                        myId : ‘@‘, //随便起个名字
                        //@ : 针对字符串
                        //= : 针对数据和变量
                        myData:‘=‘
                    },//隔离控制器0
                    templateUrl:‘tpl.html‘
                }
            })
        </script>
    </head>
    <body ng-controller="ctrl">
        <div>
            <my-tab my-id="div1" my-data="data"></my-tab>
            <my-tab my-id="div2" my-data="data2">{{name}}</my-tab>
        </div>
    </body>
</html>

angular-anchorScroll 代码如下:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box div{
                width: 200px;
                height: 300px;
                border: 1px solid red;
                margin-bottom: 20px;
            }
            #box ul{
                position: fixed;
                top: 20px;
                right: 20px;
            }
            #box ul li{
                width: 150px;
                height: 30px;
                border: 1px solid red;
                text-align: center;
                list-style: none;
                margin-top: -1px;
            }
        </style>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘app‘,[]);
            app.controller(‘ctrl‘,function($scope,$location,$anchorScroll){
                $scope.arr = [1,2,3,4,5,6];
                $scope.show = function(id){
                    $location.hash(id);
                    //hash()设置地址栏里的信息,可以设置也可以获取
                    $anchorScroll();
                    //清空上次执行的
                    //在执行一次
                }
            })
        </script>
    </head>
    <body ng-controller="ctrl">
        <div id="box">
            <ul>
                <li ng-repeat="id in arr" ng-click="show(‘div‘ + id)">div{{id}}</li>
            </ul>
            <div ng-repeat="id in arr" id="div{{id}}">div{{id}}</div>
        </div>
    </body>
</html>

angular-bootstrap 代码如下:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            p{
                width: 200px;
                height: 200px;
                border: 1px solid salmon;
                text-align: center;
                line-height: 200px;
            }
        </style>
    </head>
    <body>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘app1‘,[]);
            var app = angular.module(‘app2‘,[]);
            app.controller(‘ctrl1‘,function($scope){
                $scope.a = 30;
            });
            app.controller(‘ctrl2‘,function($scope){
                $scope.b = 20;
            });
            var oDiv = document.getElementsByTagName(‘div‘);
            angular.element(document).on(‘click‘,function(){
                angular.bootstrap(oDiv[0],[‘app1‘]);
                angular.bootstrap(oDiv[1],[‘app2‘]);
                                //参数 模块定义给谁,模块名
                //手动开启angular应用模式
            })
        </script>
        <div ng-controller="ctrl1">{{a}}</div>
        <div ng-controller="ctrl2">{{b}}</div>
    </body>
</html>

cachFactory 代码如下:

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘app‘,[]);
            app.controller(‘ctrl‘,function($scope,$cacheFactory){
                var cache = $cacheFactory(‘myCache‘,{capacity:3});
                //capacity:2 限制size的个数
                //默认删除第一条
                cache.put(‘name‘,‘lily‘);
                cache.put(‘age‘,‘20‘);
                cache.put(‘sex‘,‘women‘);
                //cache.remove(‘name‘);
                //info() 当前这条详细信息
                console.log(cache.get(‘name‘));
                //console.log(cache.info());
            })
        </script>
    </head>
    <body ng-controller="ctrl">
    </body>
</html>

$loaction

<!DOCTYPE html>
<html ng-app="mk">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module(‘mk‘,[]);
            app.controller(‘ctrl1‘,function($scope,$location){
                $scope.url = ‘http://www.baidu.com#/path/abd?news=123456&user=name&pass=123‘;
                var a = $location.hash(‘hi‘);
                var b = $location.search(‘name=rose‘);
                console.log($location.url());//相对路径 : /path/abd?news=123456&user=name&pass=123
                console.log($location.absUrl());//绝对路径 : http://127.0.0.1:8020/%E5%A4%8D%E4%B9%A0/$location.html#/path/abd?news=123456&user=name&pass=123
                console.log($location.host());//主机名 : 127.0.0.1
                console.log($location.port());//端口号 : 8020
                console.log($location.search());//数据 : Object {news: "123456", user: "name", pass: "123"}
                console.log($location.path());//盘符 : /path/abd
                console.log($location.protocol());//协议 : http
            })
        </script>
    </head>
    <body ng-controller="ctrl1">
    </body>
</html>
时间: 2024-10-11 10:18:38

angular.js小知识总结的相关文章

开发Ionic应用前Angular js必备知识

Angular js是一个Web应用框架,它极其流行,已经成为目前使用最广泛的Javascript工具之一.Ionic基于AngularJS构建而成,所以学习一些AngularJS的知识很有必要.Ionic并没有独立开发一套完整的Web应用框架,而是对AngularJS进行了扩展,给它添加了大量界面组件和其他的移动端友好的特性. 本篇文章会带你了解AngularJS的核心知识并介绍一些基础知识.我们学会控制器,顾名思义,它会控制(control)你的数据.接着我们介绍作用于,它会连接控制器和用户

js小知识分享

HTTP是Hyper Text Transfer Protocol(超文本传输协议)的缩写.它的发展是万维网协会(World Wide Web Consortium)和Internet工作小组IETF(Internet Engineering Task Force)合作的结果,(他们)最终发布了一系列的RFC,RFC 1945定义了HTTP/1.0版本.其中最著名的就是RFC 2616.RFC 2616定义了今天普遍使用的一个版本--HTTP 1.1.为纪念Tim Berners-Lee提出HT

js小知识

1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大

js小知识 正则表达式的定义

js定义正则表达式有两种方式:普通方式,构造函数方式 正则对象是js的内置对象 正则的属性 正则的方法 js中字符串的方法 一.普通方式(双斜杠//方式):var  reg = /表达式/附加参数 表达式放在双斜杠"//"中,表达式是一个字符串,可以使用特殊字符 附加参数放在第二个斜杠"/"的后秒,是用来扩展表达式的含义,主要有三个参数:g,i,m:g代表可以全局配置:i代表不区分大小写配置:m代表可以多行配置:这三个参数可以任意组合或者不加任何参数: 例如: va

Js小知识及一些常见易混淆的知识点

1.offsetleft  =  整数(可以是正,也可以是负数).如果是浮点数,则始终向下取整 =90px,因为像素里没有小数,自动抛弃整数,表现为向下取整 2.区别假设:body{     height:2000px  }function getInfo(){var s = "";s += " 网页可见区域高:"+ document.body.clientHeight;——可见高度是2000px,表示全部可见高度 s += " 网页可见区域宽:"

常用JS小知识汇总

1 上传图片:html代码 <input id="image" type='file' name='myFile' size='15' onchange="showPicture(this)" /> <img id="111" src="img/1.jpg" width="133" height="200" /> js代码: <script type=&qu

js小知识-replace的回调函数

replace() 方法返回一个由替换值替换一些或所有匹配的模式后的新字符串.模式可以是一个字符串或者一个正则表达式, 替换值可以是一个字符串或者一个每次匹配都要调用的函数. 注意:原字符串不会改变. 语法 str.replace(regexp|substr, newSubStr|function) 参数 regexp (pattern) 一个RegExp 对象或者其字面量.该正则所匹配的内容会被第二个参数的返回值替换掉. substr (pattern) 一个要被 newSubStr 替换的字

js小知识 delete操作符

说明:delete操作符用于删除对象的某个属性. 语法: delete object.property //删除 对象.属性 delete object['property'] //删除 对象['属性'] 返回值:bool类型,成功删除的时候回返回true,否则返回false. 注意: 如果你删除的属性在对象上不存在,那么delete将不会起作用,但仍会返回true 如果 delete 操作符删除成功,则被删除的属性将从所属的对象上彻底消失.然后,如果该对象的原型链上有一个同名属性,则该对象会从

js 小知识

1 window事件 2 window.onload=function(){alert("页面创建中****");}; 3 window.onunload=function(){alert("页面卸载中****");}; 4 window.onbeforedeactivate =function(){alert("页面卸载中****")}; 定时 1 window.status="xxxxx" 2 var now =new D