Angularjs(一)

1.什么是angular?

　　Angular诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller ;模块化-视图-控制器）.

　　angular的一些特性:模块化、自动化双向数据绑定、语义化标签、依赖注入等等.

2.定义控制器:

　　controller("控制器名字",["依赖",function(形参){

　　}]}

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css" >
        [ng-cloak]{display:none;}    //使用ng-clock时要在style中引入这个属性样式,否则有时会不起作用
    </style>
</head>
<body>

<ul ng-controller="controllerTest">
        <li>{{name}}</li>
                // 解决双花括号闪烁的方法
        <li ng-bind="name"></li>
        <li ng-cloak>{{name}}</li> 
    
        <li ng-bind-template="{{name}}"></li>
        
    </ul>
    <script src="public/libs/angular/angular.min.js"></script>　　//引入angular,js 
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器
        App.controller("controllerTest",['$scope',function(akshfksdjhf){  //依赖的服务，把依赖的服务注入到处理函数中去
            akshfksdjhf.name = "jack"
        }])
    </script>

3.事件

<div ng-controller="controllerTest">
        <button ng-click="fclick()" ng-dbl-click="fdbclick()">单击</button>
        <button ng-dblclick="fdbclick()">双击</button>
        聚焦:<input type="text" name="" ng-focus = "ffocus()">
        失焦:<input type="text" name="" ng-blur = "fblur()">
        <button ng-mouseover = "fmouseover()">移入</button>
        <button ng-mouseleave = "fmouseleave()">移出</button>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器
    App.controller("controllerTest",['$scope',function($scope){ 
            // 都是往$scope这个对象上面去添加属性和方法
            $scope.fclick = function (){
                alert("单击")
            }
            $scope.fdbclick = function (){
                alert("双击")
            }
            $scope.ffocus = function (){
                alert("聚焦")
            }
            $scope.fblur = function (){
                alert("失焦")
            }
            $scope.fmouseover = function (){
                alert("移入")
            }
            $scope.fmouseleave = function (){
                alert("移出")
            }
        }])
    </script>

4.ng-init指令

　　ng-init指令可以初始化模块model的数据

<div ng-controller="controllerTest" ng-init="name='jack';age=40">
        <h1>{{name}}</h1>　　　　　　　　　　//jack
        <h1>{{age}}</h1>　　　　　　　　　　//40
    </div>
    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器
        App.controller("controllerTest",['$scope',function($scope){ 
            $scope.name = "mack";
        }])
    </script>

5.数据绑定

<div ng-controller="controllerTest">
        <ul>
            <li ng-repeat="value in arr1">{{value.name}}{{value.age}}</li>  <!--遍历数组 -- >
        </ul>
        <ul>
            <li ng-repeat="val in arr2" ng-switch on="val">
                <span ng-switch-when="css">{{val}}</span>   <!--当val=css时显示-->
            </li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器

        App.controller("controllerTest",['$scope',function($scope){ 
            $scope.arr1 = [
                {name : "jack",age : "20"},
                {name : "jack1",age : "21"},
                {name : "jack2",age : "22"}
            ];
            $scope.arr2 = ["html","css","js"]
        }])
    </script>

6.内置过滤器

内置过滤器 9个:

1. currency (货币处理),如果不传递参数，默认是美元符

2. date (日期格式化)

3. filter(匹配子串)

4. json(格式化json对象) 跟stringify相同没有参数

5. limitTo(限制数组长度或字符串长度)

6. lowercase(小写) 没有参数

7. uppercase(大写) 没有参数

8. number(格式化数字) [参数]

9. orderBy(排序) [name,boolean]

 1 <div ng-controller="controllerTest">
 2         <ul>
 3             <li>{{num1|currency:"￥"}}</li>
 4             <li>{{ndate|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li>
 5             <li>{{arr|filter:"1" }}</li>
 6             <li>{{arrobj|filter:{age:12} }}</li>
 7             <li>{{arrobj|json}}</li>
 8             <li>{{str|limitTo:2}}</li>
 9             <li>{{num1|number:4}}</li>
10             <li>{{str|uppercase|lowercase}}</li>
11             <li>{{arrobj|orderBy:age:false }}</li>
12             <li>{{num1 |zdy}}</li>
13         </ul>
14     </div>
15 
16 
17 
18     <script src="public/libs/angular/angular.min.js"></script>
19     <script>
20         var App = angular.module("App",[]); 
21         // 定义控制器
22 
23         App.controller("controllerTest",['$scope',function($scope){
24             $scope.num1 = 456; 
25             $scope.ndate = new Date();
26             $scope.arr = ["111","128","895","54"]
27             $scope.arrobj = [
28                 {name:"jack",age:12,phone:"456789112"},
29                 {name:"jack5",age:142,phone:"456789112"},
30                 {name:"3",age:188,phone:"456789112"},
31             ]
32             $scope.str = "hello"
33             $scope.str2 = "wwww"
34         }])
35         App.filter("zdy",function(){
36                 return function(num1){
37                     console.log(num1)
38                     return "hello" + num1;
39                 }
40             })
41     </script>

7.依赖注入

　　声明式依赖注入:

App.controller("controllerTest01",['$scope',function($scope){   
    //写在这个数组里面的称为服务，依赖了一系列的服务，当你需要用到的时候就依赖，然后注入到处理函数中去
}])

　　推断式依赖注入:(不推荐,影响效率)

App.controller("controllerTest01",function($scope,$http,$log){ 
      //依赖的完整名称，系统会根据实参数进行查找
})

8.内置服务:

　　--定时器:$timeout,$interval

<div ng-controller="controllerTest">
        <ul>
            <li>{{taday}}</li>
            <li>{{now|date:"yyyy/MM/dd hh:mm:ss EEE"}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        // 定义控制器
        App.controller("controllerTest",function($scope,$timeout,$interval){
            $scope.taday = "你好"
            $timeout (function(){
                $scope.taday = "现在是什么时间?"
                $interval (function(){
                    $scope.now = new Date()
                },100)
            },1000)
        })
    </script>

　　--$location

<div ng-controller="controllerTest01">
        <ul>
            <li>绝对路径：{{absurl}}</li>
            <li>服务：{{host}}</li>
            <li>查询字符串(参数)：{{search}}</li>
            <li>端口号：{{port}}</li>
            <li>协议:{{protocol}}</li>
            <li>哈希（锚点）：{{hash}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 
        App.controller("controllerTest01",['$scope','$location',function($scope,$location){  
            console.log($location)
            $scope.absurl = $location.absUrl();
            $scope.host = $location.host();
            $scope.port = $location.port();
            $scope.search = $location.search();   //对http有要求
            $scope.protocol = $location.protocol();
            $scope.hash = $location.hash();
        }])

    </script>

　　--$log:(对console的封装)

<script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]); 

        App.controller("controllerTest01",['$scope','$location','$timeout','$interval',"$log",function($scope,$location,$timeout,$interval,$log){
            $log.log("普通输出");
            $log.warn("警告");
            $log.error('错误')
            $log.info("普通")
        }])

</script>

　　--$filter:

<div ng-controller="controller01">
        <ul>
            <li>{{price}}</li>
            <li>{{str}}</li>
            <li>{{str1}}</li>
        </ul>
    </div>

    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]);

        App.controller("controller01",['$scope','$filter',function($scope,$filter){
            // $filter可以引入九种内置的过滤器，这个是过滤器的第二种用法
            $scope.price = 99.99;
            var currency = $filter('currency');
            $scope.price = currency($scope.price);

            $scope.str = "hello angular";
            var uppercase = $filter('uppercase');
            $scope.str = uppercase($scope.str);

            $scope.str1 = $filter('limitTo')($scope.str,5)
        }])

    </script>

　　-$http:

<div ng-controller="controller01">
        <ul>

        </ul>
    </div>



    <script src="public/libs/angular/angular.min.js"></script>
    <script>
        var App = angular.module("App",[]);

        App.controller("controller01",['$scope','$filter','$http',function($scope,$filter,$http){
            // $http 本质是对ajax的封装，放到服务底下运行
            // 1.5以上使用then方法，类似于promise中的then
            // 1.5以下就直接使用success方法和error方法
            $http({
                method: 'GET',
                url: './02.json',
                params : {    //get请求的参数
                    uname : 'aaaa',
                    age : 30
                }
            }).then(function(data){
                console.log(data);     //封装过的，该对象底下的data属性放的是数据
                console.log(data.data);
            },function(err){
                console.log(err)
            });

            $http({    
                method : "POST",
                url : "/sendData",
                headers : {   //post请求最好设置请求头
                    "content-type" : "application/x-www-form-urlencoded"
                },
                data : {    //post请求的参数
                    uname : "aaa",
                    age : 30
                }
            }).then(function(data){
                console.log(data)
                console.log(data.data.data);   //想要的后台的数据
            },function(err){
                console.log(err);
            })

        }])
</script>

posted on 2019-03-13 21:19 1234wu 阅读(177) 评论(0) 收藏举报

刷新页面返回顶部