Angular.js -- 基础（2）

最新推荐文章于 2023-03-12 14:55:41 发布

Lazy_Life

最新推荐文章于 2023-03-12 14:55:41 发布

阅读量179

点赞数

分类专栏： Angular.js 和 Angular2..

本文链接：https://blog.csdn.net/lazy_life/article/details/81209436

版权

Angular.js 和 Angular2.. 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.Angular.js 过滤器：

九种自带的过滤器：

<body ng-app="App">
    <ul ng-controller="dome">
        //（1）：currency:将货币格式化
        <li>{{price | currency:"$"}}元</li>                         //输出$11.11元
        //（2）：date：获取当前时间，格式：y（年）M（月）d（日）EEEE（星期）hh（时）mm（分）ss（秒）sss（毫秒）
        <li>{{date | date:"yyyy年MM月dd日 EEEE hh:mm:ss"}}</li>     //输出当前时间
        //（3）：lowercase：将文本转换成小写
        <li>{{str | lowercase | limitTo:5}}</li>                   //输出hello
        //（4）：uppercase：将文本转换成大写
        <li>{{str | uppercase | limitTo:-5}}</li>                  //输出WORLD
        //（5）：number：获取小数点后几位的数字
        <li>{{num | number:"3"}}</li>                              //输出10.123
        //（6）：limitTo：（+）获取前几位；（-）获取后几位,就是从最后一位开始往前数；可以为字符串，数组，对象等
        <li>{{arr | limitTo:-1}}</li>                              //输出["js"]
        //（7）：json：同json.stringify相似，就是将对象形式转换成字符串形式
        <li>{{obj | json}}</li>
        //（8）：filter：过滤满足条件的内容，将过滤的内容输出，可以为字符串，对象，数组等
        <li>{{arr | filter:"s"}}</li>                              //输出["css","js"]
        <li>{{ school | filter:{name:"大黄"} }}</li>               //注：这种情况一定要两边留有空格
        //（9）：orderBy：进行排序，有两个值，第一个值表示按什么进行排序；第二个值为Boolean值，true为由大到小，false为由小到大；
        <li>{{school | orderBy:"age":false}}</li>
    </ul>
</body>
<script>
    var App = angular.module("App",[]);
    App.controller("dome",["$scope",function("$scope"){
        $scope.price = 11.11;
        $scope.date = new Date();      //获取当前日期时间
        $scope.str = "Hello World";
        $scope.arr = ['html','css','js'];
        $scope.obj = {
            "name" : "小明",
            "age" : 14
        };
        $scope.school = [
            {"name" : "小明","age" : 14},
            {"name" : "小花","age" : 15},
            {"name" : "大黄","age" : 12},
            {"name" : "小伟","age" : 25},
        ];
    }])
</script>

2.自定义过滤器：

<body ng-app="App">
    <div ng-controller="Demo">
        <h1>{{uname | demo:-22:'-吃鸡'}}</h1>        //输出：自我介绍：小花-22-吃鸡
        //demo是自定义的过滤器，uname是一个实参，把这个实参放在了demo里面的第一个形参的位置（相当于demo的位置），demo的冒号后面又是实参，对应下面filter中的形参
        <h2>{{str | cap}}</h2>                      //输出：Hello world
    </div>
    <script>
        var App = angular.module("App",[]);
        App.controller("Demo",["$scope",($scope) => {
            $scope.uname = "小花";
            $scope.str = "hello world"
        }])
        //自定义过滤器,第一个参数是自定义过滤器的名字
        App.filter("demo",function(){
            return function(uname,age,hobby){       //与上面的实参相对应
                console.log(uname);     //'小花'
                console.log(age);       //-22
                console.log(hobby);     //'-吃鸡'
                return "自我介绍：" + uname + age + hobby;
            }
        });
        //自定义过滤器，将文本内容首字母大写
        App.filter("cap",function(){
            return function(str){
                console.log(str)      //hello world
                return str[0].toUppercase() + str.slice(1)
            }
        })
    </script>
</body>

3.Angular.js 中的依赖注入：

Angular.js 中有很多的依赖，比如：$scope；$location；$http；$timeout；$log；$filter；$interval；等等。。。

依赖注入有分为两种方式：

（1）声明式依赖注入（行内式），以数组的形式进行声明；

App.controller("控制器名字",["$scope","$log",function(arr,suv){        //形参，可以随便定义名字，要与依赖的名称相对应
    arr.name = "jack";
    suv.log("123");
    等等等等。。。。
}])

（2）推断式依赖注入，没有明确的声明依赖，效率不高；

App.controller("控制器名字",function($scope,$log){      //参数名字不可进行更改
    $scope.name = "jack";
    $log.info("信息");
    等等等等。。。
})

4.一些常用的依赖注入：

（1）$timeout；$interval:

<body ng-app="App">
    <div ng-controller="Demo">
        <h1>{{str}}</h1> 
        <button ng-click="begin()">begin</button>
        <button ng-click="stop()">stop</button>
        <h2>{{time | date:'yyyy-MM-dd hh:mm:ss'}}</h2>
    </div>
    <script>
        var App = angular.module("App",[]);
        App.controller("Demo",["$scope","$timeout","$interval",function($scope,$timeout,$interval){
        //将h1中内容延迟两秒显示；
        $timeout(function(){
            $scope.str = "延迟两秒显示"
        },2000)
        //点击begin让h2中的时间显示并运作，点击stop让时间停止；
        var timer = "";
        $scope.begin = function(){
            timer = $interval(function(){
                $scope.time = new Date();
            },1000)
        };
        $scope.stop = function(){
            $interval.cancel(timer)
        }
        }])
    </script>
</body>

（2）$location: 就是对原生的 location 进行的封装；

<script>
    var App = angular.module("App",[]);
    App.controller("Demo",["$location",function($location){
        console.log($location.absUrl())     //当前文件完整的绝对路径 
        console.log($location.host())       //服务(localhost...)
        console.log($location.search())     //地址栏中的参数
        console.log($location. hash())      // # 哈希值
        console.log($location.protocol())   //协议(http/https)
        console.log($location.port())       //端口号
    }])
</script>

（3）$log: 对控制台console.log()的封装；

$log.info("普通信息");
$log.warn("警告");
$log.error("错误");
$log.log("打印");
$log.debug("调试")

（4）$http: 异步请求，就是对ajax进行的封装；

<script>
    var App = angular.module("App",[]);
    App.controller('DemoController',["$scope","$http","$log",function($scope,$http,$log){
        $http({
            url : "./地址",
            method : "POST",
            headers : {          //写POST请求是必须要加的请求头（有多种）
                "Content-Type" : "application/x-www-form-urlencoded"
            },
            data : {            //POST请求时的参数
                sex : "nan"    
            },
            params : {         //GET请求时的参数
                uname : 'mack',
                age : 18
            },				
        }).then(function(data){           //then中有两个回调，第一个表示成功，第二个表示失败
            $log.info(data)
        })
    }])
</script>

Lazy_Life

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angular.js -- 基础（2）

1.Angular.js 过滤器：九种自带的过滤器：&lt;body ng-app="App"&gt; &lt;ul ng-controller="dome"&gt; //（1）：currency:将货币格式化 &lt;li&gt;{{price | currency:"$"}}元&lt;/li&gt;
复制链接

扫一扫