AngularJS的笔记

1.在template模板中，加了required是会对表单进行自动验证。

2.angular.bind() 是用来改变this指向的（$.proxy()），angular.copy()是用来拷贝对象的如果有2个参数 =》angular.copy(a, b) a会拷贝覆盖b的对象，b里面的对象不存在的，只是和a一样的对象。angular.extend(b, a) 是b继承了a的对象成为一个新的对象包含a和b里面的值

3.angularjs的工具方法api：

　　1.angular.isArray() 判断是否为数组

　　2.angular.isDate() 判断是否为时间对象

　　3.angular.isDefined() 判断是不是defined

　　4.angular.isUndefined() 判断是否为undefined

　　5.angular.isFunction() 判断是否为函数

　　6.angular.isNumber() 判断是否为数值

　　7.angular.isObject()　判断是否为对象

　　8.angular.isString() 判断是否为字符串类型

　　9.angular.isElement() 判断是否为元素 console.log(angular.isElement(document.body)); true

　　10.angular.equals(a, b) 判断2个元素是否相等 var a = 1; var b =2; 定义数组和数组用这个方法也是相等的，NAN和NAN也是相等的

　　11.angular.forEach(values, function(value, i){ this.push( value + i) }, result) var values = ['a', 'b', 'c']; var result= []; 其中的this就是result

　　12.angular.fromJson() 和 angular.toJson()

　　13.angular.identity(str) 和 angular.noop()

　　14.angular.lowercase() 给字符串转小写 angular.uppercase()转大写

　　15.Angularjs的手册：http://shouce.jb51.net/angularjs-en/

　　16.angular.bootstrap(document, ['myApp']) 可以在一个document里面绑定多个ng-app 实现按需加载的功能

　　17.angular.injector 注册器

　　18.在.controller('a', function($scope, $timeout){ $timeout(function(){$scope.name = 'hellow'},2000)}) 可以通过angular里面的内置方法做到动态的变化视图

　　　　1. 还有一种是用原生的setTime(function(){ $scope.$apply(function(){$scope.name = 'hellow'}) },2000) 这样也可以实现动态视图变化

　　　　2.$interval是定时器也是angular原生的去除定时器是$interval.cancel(timer)

　　19.run()方法 ['$rootScope',function($rootScope){$rootScope.name = 'hi'}] 必须这样写才是最好的，之后打包不会报错记住咯

　　20.<div ng-bind="name"></div> 解决刷新会有一闪而过的问题

　　 21.$scope, $rootScope, $timeout, 过滤器:$filter

　　 22.过滤器的整体

　　 23.https://www.bootcdn.cn/ ui库

　　 24.controller 里面as 方法

　　 25.<select ng-options="color.name for color in colors" ng-model="mycolor"></select> <a>{{mycolor.name}}</a>

　　26.验证的问题:

　　 27.ng-minlength=5（最少为5个）字符串长度为5就是false 小于5就是验证失败。

　　 28.angularjs的自定义指令：directvie, 在自定义标签中，在标签中使用ng-init 需要在directive中定义scope:true 才可以实现独立，不会操作多个自定义标签共享数组

　　 29.模拟百度的搜索下拉功能

　　 30.$interpolate 插值计算的使用方法

　　 31.ngRoute

<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<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>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.2.9/angular-route.min.js"></script>  
</head>
<body>
    <div ng-controller='myCtrl'>
        <ul>
            <li><a href="" ng-click="$location.path('aaa/123')">首页</a></li>
            <li><a href="" ng-click="$location.path('bbb')">b页面</a></li>
            <li><a href="" ng-click="$location.path('aaa/456')">c页面</a></li>
        </ul>
        <ng-view></ng-view>
    </div>
    <script>
        var m1 = angular.module('myApp', ['ngRoute'])
        m1.config(['$routeProvider', function($routeProvider){
            $routeProvider
                    .when('/aaa/:num',{
                        template: '<p>首页1</p>{{name}}',
                        controller: 'myCtrl'
                    })
                    .when('/aaa',{
                        template: '<p>首页1aaa</p>{{name}}',
                        controller: 'myCtrl'
                    })
                    .when('/bbb',{
                        template: '<p>b页面</p>{{name}}',
                        controller: 'myCtrl2'
                    })
                    .when('/ccc',{
                        template: '<p>c页面</p>{{name}}',
                        controller: 'myCtrl3'
                    })
                    .otherwise({
                        redirectTo: '/aaa'
                    })
        }])

        m1.run(['$rootScope', function($rootScope){
            $rootScope.$on('$routeChangeStart', function(event, current, pre){
                // console.log('start');
                console.log(event); // 与原生的对象差不多
                console.log(current); // 路由路径值信息
                console.log(pre); // 上一个路由的信息
            })
        }])

        m1.controller('myCtrl',['$scope', '$location', '$routeParams',function($scope, $location, $routeParams){
            $scope.name = '2'
            $scope.$location = $location
            // console.log($routeParams);
        }])
        m1.controller('myCtrl2',['$scope', '$location',function($scope, $location){
            $scope.name = '23'
            $scope.$location = $location
        }])
        m1.controller('myCtrl3',['$scope', '$location',function($scope, $location){
            $scope.name = '24'
            $scope.$location = $location
        }])
    </script>
</body>
</html>

　　32.ngResource 插件可以配合route

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<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>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-route.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.3.8/angular-resource.min.js"></script>
</head>
<body>
    <div ng-controller="a1">
        <input type="button" value="张三" ng-click="$location.path('aaa/zhangsan')">
        <input type="button" value="李四" ng-click="$location.path('aaa/lisi')">
        <ng-view></ng-view>
    </div>

    <script>
        var m1 = angular.module('myApp', ['ngRoute', 'ngResource'])

        m1.config(['$routeProvider', function($routeProvider){
            $routeProvider
                        .when('/aaa/:name',{
                            template: '<div>{{data.name}}</div><div>{{data.age}}</div><div>{{data.job}}</div>',
                            controller: 'a1'
                        })
                        .otherwise({
                            redirectTo: '/aaa/zhangsan'
                        })
        }])

        m1.controller('a1', ['$scope', '$resource', '$location','$routeParams', function($scope, $resource, $location, $routeParams){
            $scope.$location = $location
            console.log($routeParams);

            if($routeParams.name){
                var objRe = $resource($routeParams.name+'.json', {}, {})

                $scope.data = objRe.get();
                // 也可以使用objRe.query 是针对数组多个对象的

                /**
                 * var objRe = $resource(':name.:aaa', {aaa: 'json'}, {})
                 * $scope.data = objRe.get({name: 'lisi'})
                 * 
                */
            }

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

　　33. 事件传播

<!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'  >
   <div ng-controller="a1">
       {{count}}
       <!-- $emit() 向上传播  $broadcast() 向下传播 -->
       <div ng-controller="a1" ng-click="$emit('myEvent')">
            {{count}}
            <div ng-controller="a1">
                {{count}}
            </div>
        </div>
   </div>
</body>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
    var m1 = angular.module('myApp', [])
   
    m1.controller('a1', ['$scope', function($scope){
        $scope.$on('myEvent', function(event){
            $scope.count++;
            /*
                event.targetScope 目标    event.currentScope当前
                event.name 事件名字
                event.stopPropagation()  阻止时间冒泡
            */
        })
        $scope.count = 0
    }])
</script>
</html>

posted @ 2021-06-02 16:42 艺术就是派大星_s 阅读(76) 评论(0) 收藏举报

刷新页面返回顶部

艺术就是派大星_s

AngularJS的笔记

公告