集腋成裘-05-angularJS -初识angular

私以为angular的最大特点是:只关注数据

1.1 angular之:双向绑定

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div ng-app="">    
        <input type="text" ng-model="str">
        <input type="text" ng-model="str">
    </div>


</body>
</html>

双向绑定-Code

既可以输入,同时还是输出.大致原理也可以理解,设置一个变量,每次修改文本框的值给变量重新赋值.然后变量值修改以后,给页面上绑定该变量的元素重新赋值显示.

1.2 angular之:模板

模板在angular中有ng-module与{{}}常用

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div ng-app="">    
        <input type="text" ng-model="a">
        *
        <input type="text" ng-model="b">
        =
        <span>{{a}}*{{b}}={{a*b}}</span>
    </div>


</body>
</html>

模板-Code

1.3 angular之:列表

在列表中显示中常用的是ng-repeat

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div ng-init="arr=[1,53,654,12,5]">    
        <ul><li ng-repeat="item in arr">{{item}}</li></ul>
    </div> 
</body>
</html>

循环数组

<!DOCTYPE html>
<html ng-app="">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">

    </script>
</head>
<body>
    <div ng-init="users=[{name:'张三',age:20},{name:'李四',age:40}]">    
        <ul><li ng-repeat="item in users">姓名: {{item.name}} 年龄: {{item.age}}</li></ul>
    </div> 
</body>
</html>

循环json

1.4 angular之:控制器

　　controller作用存放代码,将angular与JavaScript互通

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>controller测试</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("test",[]);
        app.controller("firstContr",function($scope){
            $scope.a=12;
            $scope.alert=function(s){
                window.alert(s);
            }
        })
    </script>
</head>
<body>
    <div ng-controller="firstContr">    
         <input type="text" >
         <input type="button" value="弹框" ng-click="(alert(a))">
    </div> 
</body>
</html>

controller测试

1.5 angular之:依赖注入

　　简单的说,函数的参数有定义方决定

1.6 angular之:过滤器

　　关键字是filter

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("test",[]);
        app.controller("firstContr",function($scope){
            $scope.items=[{name:'商品 1',price:10,time:1472565995363},{name:'商品 2',price:710,time:1472568995363}];

            $scope.alert=function(s){
                window.alert(s);
            }
        })
    </script>
</head>
<body>
    <div ng-controller="firstContr">    
         <ul><li ng-repeat="item in items">
            <h3>{{item.name}}</h3>
            <span>{{item.price|currency}}</span> 
            <i>{{item.time|date:"yyyy-MM-dd"}}</i>
         </li></ul>
    </div> 
</body>
</html>

过滤器

1.7angular之:数据交互

　　常用的是$http,

　　1.7.1:get请求

　　$http.get(url,参数);

<!DOCTYPE html>
<html ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>数据交互</title>
    <script src="../js/angular.js"></script>
    <script type="text/javascript">
        var app = angular.module("test",[]);
        app.controller("firstContr",function($scope,$http){
             $http.get('Calculate.php',{
                 params:{a:12,b:5}
            }).success(function(res){alert(res);}).
             error(function(){alert('失败了')});
             
        })
    </script>
</head>
<body>
    <div ng-controller="firstContr">    
         
    </div> 
</body>
</html>

简单格式

<?php
echo $_GET['a']+$_GET['b'];
?>

集腋成裘-05-angularJS -初识angular

猜你喜欢