angular.js小知识总结

Posted 2020-09-25

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于angular.js小知识总结的主要内容，如果未能解决你的问题，请参考以下文章

线程学习知识点总结

VS中添加自定义代码片段——偷懒小技巧

回归 | js实用代码片段的封装与总结（持续更新中...）

python小知识片段

“未捕获的类型错误：无法在 Websocket Angular JS 上读取未定义的属性‘延迟’”