angular1基础

来源：互联网发布：杜蕾斯大胆爱厚度知乎编辑：程序博客网时间：2024/05/16 03:35

自定义指令directive

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <!-- directive:myTest --><div class="my-test"></div><div class="myTest"></div><div my-test></div><my-test></my-test><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope',function($scope){    }]);    app.directive('myTest' , function(){        return {            restrict:'ECMA',  //E:元素 C:类  M:注释  A:属性            replace:true,  //是否替换原元素            template:'<h1>文字</h1>'    //模版要求只能有一个根元素            // templateUrl:'./url.html'  //也可引入外部html文件        }    })</script></body></html>

这里写图片描述

作用域

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl' ng-init="nme='tim'">     <h1>myctl {{nme}}</h1><div class="two" ng-controller='two'>    <h2>two {{nme}}</h2>    <div class="three" ng-controller='three'>        <h3>three {{nme}}</h3>    </div></div><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope',function($scope){        // $scope.nme = 'tom'    }])    app.controller('two',['$scope',function($scope){        // $scope.nme = 'jack'    }])    app.controller('three',['$scope',function($scope){    }])</script></body></html>

这里写图片描述

松开26行注释

    app.controller('two',['$scope',function($scope){        $scope.nme = 'jack'    }])

这里写图片描述

自定义过滤器

能将一个单词的任意字母变为大写

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <div>{{ 'testing' | toBig : 5 }}</div><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope',function($scope){    }]);    app.filter( 'toBig' , function(){        return function( word , b ){            var word2 = word.split('')            word2.splice( b , 1 , word.charAt(b).toUpperCase() )            word2.join('')            return word2.join('') ;        }    })</script></body></html>

这里写图片描述

传参

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <div>{{ 'testing' | fn : 'a' : 'b' : 'c' }}</div><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope',function($scope){    }]);    app.filter( 'fn' , function(){        return function( word , one , two , three ){            console.log( word , one , two , three )            return word ;        }    })</script></body></html>

这里写图片描述

服务

http服务

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <h1>{{ name }}</h1><h1>{{ address }}</h1><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope','$http',function(scope,http){        http({            url:'./data.php',            method:'post',        }).success(function(dt){            scope.name = dt.name ;            scope.address = dt.addr ;        })    }]);    </script></body></html>

data.php

<?php     echo '{"name":"tom","addr":"usa"}';?>

这里写图片描述

http的请求头

headers:{‘Content-Type’:’application/json’}

app.controller('myctl',['$scope','$http',function(scope,http){    http({        url:'./data.php',        method:'post',        headers:{'Content-Type':'application/json'},        data:{sum:100,ctg:'physic'},    }).success(function(dt){        console.log(dt)    })}]);

这里写图片描述

headers:{‘Content-Type’:’application/x-www-form-urlencoded’}

app.controller('myctl',['$scope','$http',function(scope,http){    http({        url:'./data.php',        method:'post',        headers:{'Content-Type':'application/x-www-form-urlencoded'},        data:'sum=100&ctg=physic',    }).success(function(dt){        console.log(dt)    })}]);

这里写图片描述

get请求

get请求，传参应该用params , 这样的话ng会自动将参数拼接到地址后面
data传参是给post用的

app.controller('myctl',['$scope','$http',function(scope,http){    http({        url:'./data.php',        method:'get',        params:{name:'tom',age:18},    }).success(function(dt){        console.log(dt)    })}]);

这里写图片描述

JSONP

app.controller('myctl',['$scope','$http',function(scope,http){    http({        url:'./data.php',        method:'jsonp',        params:{            callback:'JSON_CALLBACK'        },    }).success(function(dt){        console.log(dt)    })}]);

data.php

<?php $fn = $_GET['callback'];echo $fn.'({"name":"tom","addr":"usa"})'; ?>

这里写图片描述

location

location.search() angular认为第一个#后面的？才是请求参数location.hash() angular认为第一个#不是锚点，后面再次出现的#才是锚点
$location.path() angular认为第一个#开始后面属于path

这里写图片描述

$interval $timeout

app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){    var address = 0 ;    var t1 = interval( function(){        console.log( address++ )        if( address > 30 ){            interval.cancel(t1)         }    }, 100 );}]);

timeout

app.controller('myctl',['$scope','$interval','$timeout',function(scope , interval , timeout ){    var t2 = timeout(function(){        console.log(9999)    },2000);    scope.btn = function(){        timeout.cancel(t2)    }}]);

控制器里使用服务

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <h1>{{ nowtime }}</h1><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',['$scope','$filter',function(scope,filter){        var now = new Date ;        var date = filter('date');        var now1 = date( now , 'yyyy-MM-dd');        scope.nowtime = now1;    }]);    </script></body></html>

自定义服务的两种方式

    // 使用自定义服务    app.controller('myctl',['$scope','myservice',function(scope,ms){        ms.say('google')    }]);        //使用factory自定义的服务    app.factory( 'myservice' , ['$log' , function(log){        return {            say:function(word){                log.log('hello '+word)            }        }    }])    //使用service自定义服务    app.service('myservice' , ['$log' , function(log){        this.say = function(word){            log.log('你好,'+word )        }    }])

这里写图片描述

app.value

var app = angular.module('myapp',[]);// 使用自定义服务app.controller('myctl',['$scope','pi','version','$log',function(scope,p,v,log){    log.log(p);    log.log(v);}]);    // 定义常量app.value('pi',3.1415926);app.value('version','1.0.0');

config配置

为angular新增一个过滤器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <h1>{{ 8 | test_filter }}</h1><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.config(['$logProvider','$filterProvider',function($logProvider,$filterProvider){        //新增一个过滤器        $filterProvider.register('test_filter',function(){            return function(arg){                return arg*arg ;            }        })    }])</script></body></html>

这里写图片描述

app.run

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp' ng-controller='myctl'> <h1>{{ addr }}</h1><script src="./angular.min.js"></script><script>    var app = angular.module('myapp',[]);    app.controller('myctl',function(){})    // 可以直接运行$http服务    app.run(['$rootScope','$http',function($rootScope,$http){        $rootScope.addr = 'UN'        $http({            url:'./data.php',            method:'get',        }).success(function(dt){            console.log(dt)        })    }])</script></body></html>

这里写图片描述

angular模块拆分到不同文件

目录结构

这里写图片描述

index.html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body ng-app='myapp'> <div ng-controller='controller1'>    <input type="text" ng-model='data1'>    <input type="text" ng-model='data1'></div><div ng-controller='controller2'>    <input type="text" ng-model='data2'>    <input type="text" ng-model='data2'></div><script src="../angular.min.js"></script><script src="module1.js"></script><script src="module2.js"></script><script src="app.js"></script></body></html>

app.js

(function(){    angular.module('myapp',['module1','module2'])})()

module1.js

(function(){    angular.module( 'module1' , [])        .controller('controller1' , function($scope){            $scope.data1 = 100 ;        })})()

module2.js

(function(){    angular.module( 'module2' , [])        .controller('controller2' , function($scope){            $scope.data2 = 200 ;        })})()

这里写图片描述

阅读全文

1 0