angularjs 基础

Posted 2020-11-07 caijw

angularjs 学习

<div ng-app="hd" ng-controller="ctrl">
    {{name}}
</div>

var m = angular.module(‘hd‘, []);
m.controller(‘ctrl‘, [‘$scope‘, function($scope){
    $scope.name = ‘cjw‘;
}])

ng-cloak 避免闪屏幕

ng-bind和{{}}

<h3 ng-bind="name"></h3>
{{name}}

双向绑定

<div ng-app="cjw" ng-controller="ctrl">
    <input type="text" ng-model="name">
    {{name}}
</div>
<script>
    var m = angular.module(‘cjw‘, []);
    m.controller(‘ctrl‘, [‘$scope‘, function($scope){
        $scope.name = ‘cjw‘;
    }])
</script>

radio

<input type="radio" ng-model="staus" ng-value="1">开启
<input type="radio" ng-model="staus" ng-value="0">关闭

checkbox

<input type="checkbox" ng-model="video" ng-true-value="1" ng-false-value="0">

select

<select name="" id="" ng-model="city" ng-options="v.vlaue as v.name for v in data"></select>

global 函数

angular.version
angular.uppercase
angular.copy
angular.forEach

angular.toJson JSON.strigify()
angular.fromJson JSON.parse()

判断函数

angular.isArray
angular.isUndefined
angular.isString
angular.isObject
angular.isNumber
angular.isElement
angular.equals

ng-disabled 不可点击

ng-repeat ng-class ng-class-odd ng-class-even

<ul ng-repeat="(k, v) in data">
    <li>{{v.name}}</li>
    <li ng-class="{blue: v.id==1, orange: v.id==2}">{{v.url}}</li>
    <li>{{k}}</li>
</ul>

ng-model-options

 <input type="text" ng-model="title" ng-model-options="{updateOn:‘default blur‘,debounce:{default:2000,blur:0}}">
    {{title}}

全选 反选

<table>
    <tr>
        <td>全选 <input type="checkbox" ng-model="all"> </td>
        <td></td>
        <td></td>
    </tr>
    <tr ng-repeat="v in data">
        <td><input type="checkbox" ng-checked="all"> </td></td>
        <td>{{v.name}}</td>
        <td>{{}}</td>
    </tr>
</table>

ng-class

<li ng-class="{blue: v.id==1, orange: v.id==2}">{{v.url}}</li>

ng-style

<span ng-style="{color:color,fontSize:size+‘px‘}">后盾人</span>

事件

ng-click
ng-mouseover

过滤器

currency number
{{price|currency:‘￥‘:1}}
{{price|number:2}}
lowercase uppercase
{{name|lowercase}}
{{name|uppercase|lowercase}}
limitTo
{{data|limitTo:3:1}}
date
{{time|date:‘yyyy年MM月dd日 HH时mm分ss秒‘}}
{{data|orderBy:‘click‘:true}}
{{data|filter:‘后盾人‘:true}}

 $scope.data = $filter(‘orderBy‘)($scope.data,‘id‘,true);

$scope.status = {id: false, click: false, title: false};
        $scope.orderBy = function (field) {
            $scope.status[field]=!$scope.status[field];
            $scope.data = $filter(‘orderBy‘)($scope.data, field, $scope.status[field]);
        }

$watch

 $scope.$watch(‘news‘, function (n, o) {
            $scope.error = n.title.length>3?‘标题长度输入错误‘:‘‘;
        }, true);

指令

m.directive(‘hdcms‘, [function () {
    return {
        restrict: ‘AEC‘,//a attr e element  c class
        template: ‘指令‘
    }
}]);

<div hd-cms color="orange">你好</div>
 m.directive(‘hdCms‘, [function(){
        return {
            restrict: ‘AEC‘,
            template: function(elem, attr){
                return "<span style=‘color:"+attr[‘color‘]+"‘>"+$(elem).html()+"</span>";
            }
        }
    }])

replace: false//是否替换本来节点

m.directive(‘hdCms‘, [function () {
        return {
            restrict: ‘EA‘,//a attr e element  c class
//            replace: true,
//            template:‘abc‘
            templateUrl: ‘../view/hdcms.html‘
        }
    }]);

scope: {color:‘@hdColor‘}
scope: {color:‘=hdColor‘}
scope: {color: ‘&hdColor‘}

 @
单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive my-name="{{name}}"></div>，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。

=
双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive age="age"></div>,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

<
单项绑定的前缀标识符，和=使用类似。不同的是改变内部scope不会反映到parent的scope

使用方法：在元素中使用属性，好比这样<my-component my-attr="parentModel">,directive的定义scope: { localModel:‘<myAttr‘ }。代码 

&
绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive change-my-age="changeAge()"></div>，注意，属性的名字要用-将多个个单词连接。

m.directive(‘hdCms‘, [function () {
        return {
            restrict: ‘E‘,
            replace: true,
            templateUrl: ‘../view/57.html‘,
            controller: [‘$scope‘, function ($scope) {
                $scope.data = [
                    {id: 1, name: ‘后盾人‘},
                    {id: 1, name: ‘hdcms‘},
                    {id: 1, name: ‘hdphp‘}
                ];
            }]
        }
    }]);

$interval $interval.cancel(id);

 $scope.getClientHeight=function(){
            $scope.clientHeight = $window.document.body.clientHeight;
        }
        $scope.getScrollHeight=function(){
            $scope.scrollHeight = $window.document.body.scrollHeight;
        }
        $scope.prompt=function(){
            $scope.content = $window.prompt(‘请输入内容‘);
        }

m.controller(‘ctrl1‘, [‘$scope‘, ‘$cacheFactory‘, function ($scope, $cacheFactory) {
        var obj = $cacheFactory(‘hdphp‘);
        //sessionStorage  localStorage
        obj.put(‘web‘, {name: ‘后盾人‘, url: ‘houdunren.com‘});
        obj.put(‘user‘, {name: ‘向军‘, mail: ‘[email protected]‘});
        $scope.data = obj.get(‘web‘).name;
        //删除缓存数据
//        obj.remove(‘web‘);
//        obj.removeAll();
//        obj.destroy();
//        console.log(obj.get(‘web‘));
//        console.log(obj.get(‘user‘));
    }]);
    m.controller(‘ctrl2‘, [‘$scope‘, ‘$cacheFactory‘, function ($scope, $cacheFactory) {
        var obj = $cacheFactory.get(‘hdphp‘);
        $scope.data = obj.get(‘web‘).name;
    }]);

$http

m.controller(‘ctrl‘, [‘$scope‘, ‘$http‘, function ($scope, $http) {
        $http({
            method:‘get‘,
            url:‘1.php‘
        }).then(function(response){
            //成功时执行
            console.log(response);
            $scope.data = response.data;
        },function(response){
            //失败时执行  hdphp
            console.log(response);
        });
    }]);

dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。
service层：主查写逻辑代码的，但在angularJS里也可以持久化数据（充当数据容器），以供不同的controller高用。
controller层：即控制层，在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑，尽量写在service层里。
所以，就有了创建自定义服务的三种方式。

 var app = angular.module(‘myApp‘, []);
    app.factory(‘myFactory‘, function($http,$q) {
        var service = {};
        service.name = "张三";
        //请求数据
        service.getData = function(){
            var d = $q.defer();
            $http.get("url")//读取数据的函数。
            .success(function(response) {
                d.resolve(response);
            })
            .error(function(){
                d.reject("error");
            });
            return d.promise;
        }       
        return service;
    });
    app.controller(‘myCtrl‘, function($scope, myFactory) {
        //alert(myFactory.name);
        myFactory.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });;
    });

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{r}}</h1>
</div>
<script>
    var app = angular.module(‘myApp‘, []);

    app.service(‘myService‘, function($http,$q) {
        this.name = "service";
        this.myFunc = function (x) {
            return x.toString(16);//转16进制
        }
        this.getData = function(){
            var d = $q.defer();
            $http.get("ursl")//读取数据的函数。
                .success(function(response) {
                d.resolve(response);
            })
                .error(function(){
                alert(0)
                d.reject("error");
            });
            return d.promise;
        }
    });
    app.controller(‘myCtrl‘, function($scope, myService) {
        $scope.r = myService.myFunc(255);
        myService.getData().then(function(data){
            console.log(data);//正确时走这儿
        },function(data){
            alert(data)//错误时走这儿
        });
    });
</script>