angularjs1-1

<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />'
</header>
<div ng-app="myMode">
    <p>在输入框中尝试输入:</p>
    <p>姓名:<input type="text" ng-model="name"></p>
    <hello></hello>
    {{name}}
    <p ng-bind="name"></p>
</div>
<script src="angular-1.3.0.js"></script>
<script type="text/javascript">
var myModele=angular.module("myMode",[]);
myModele.directive("hello",function(){
    return{        
     restrict:'E',
     template:'<div class="red">hello 2131313<strong>你好</strong>everyone</div>',
     replace:true
    }
})
</script>
<style type="text/css">
.red{
color:red;
}
</style>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="angular.min.js"></script>

</header>
<div ng-app="">
  hello angular
    <p>在输入框中尝试输入:</p>
    <p>姓名:<input type="text" ng-model="name"></p>
    <div ng-bind="name"></div>   //网络慢不会出现{{}}
    {{name}}
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="personController">
        名: <input type="text" ng-model="person.firstName"><br>
        姓: <input type="text" ng-model="person.lastName"><br>
        <br>
        姓名: {{person.firstName + " " + person.lastName}}
    </div>
</div>
<script>
    //在angularjs中不建议这样写  控制器污染了全局命名空间
    var app = angular.module("myApp", []);
    app.controller("personController", function($scope,$http) {
        $http.get('data.php').success(function(data){
            console.log(data);
        }).error(function(err, status, headers, config){
        })
     //$http.post 采用postJSON方式发送数据到后台, 解决办法:在php中使用 $postData=file_get_contents('php://input', true); 这样就可以获取到前端发来的数据
    var postData={text:'这是post的内容'};
    var config={params:{id:'5',name:'张三'}}
    $http.post('data1.php',postData,config) .success(function(data) {
        console.log(data);
    }).error(function(data){
        //错误代码
    });
       //jsonp
        myUrl ="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_CALLBACK";
        $http.jsonp(myUrl).success(
                function(data){
                    console.log(data);
                }
        ).error(function(){
            alert('shibai');
        });
        $http('post',url).success(function(){
        }).error(function(){
        })
    });
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
</header>
<div ng-app="myApp">
        <div ng-controller="firstController">
            <p>在输入框中尝试输入:</p>
        <p>姓名:<input type="text" ng-model="firstName"></p>
        {{firstName | uppercase }}}
        {{lastName}}
        {{price | currency}}
    </div>
    <div ng-controller="secondController">
        <ul>
            <li ng-repeat="p in person">
                姓名:{{p.name}}
                年龄:{{p.age}}
            </li>
        </ul>
        <p>循环对象:</p>
        <ul>
            <li ng-repeat="x in names | orderBy:'country'">
                {{ x.name + ', ' + x.country }}
            </li>
        </ul>

        <p>输入过滤: </p>
        <p><input type="text" ng-model="name"></p>
        <ul>
            <li ng-repeat="x in names | filter:name | orderBy:'country'">
                {{ (x.name | uppercase) + ', ' + x.country }}
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
  var app=angular.module("myApp",[]);
  app.controller('firstController',function($scope){
      $scope.firstName="zhangsan";
      $scope.lastName="李四";
      $scope.price="12121212";
  });
  app.controller('secondController',function($scope){
      $scope.person=[
          {name:'张三',age:'25'},
          {name:'李四',age:'30'},
          {name:'王五',age:'36'}
      ];
      $scope.names = [
          {name:'Jani',country:'Norway'},
          {name:'Hege',country:'Sweden'},
          {name:'Kai',country:'Denmark'}
      ];
  });
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="personController">
        名: <input type="text" ng-model="person.firstName"><br>
        姓: <input type="text" ng-model="person.lastName"><br>
        <br>
        姓名: {{person.firstName + " " + person.lastName}}
    </div>
</div>
<script>
    //在angularjs中不建议这样写  控制器污染了全局命名空间
    var app = angular.module("myApp", []);
    app.controller("personController", function($scope,$http) {
        $http.get('data.php').success(function(data, status, headers, config){
            console.log(data);
            console.log(status);
            console.log(headers);
            console.log(config);
        }).error(function(err, status, headers, config){
        })
        $scope.firstName = "John";
        $scope.lastName = "Doe";
    });
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="angular.min.js"></script>
</header>
<div ng-app="myApp">
        <div ng-controller="firstController">
            <p>在输入框中尝试输入:</p>
        <p>姓名:<input type="text" ng-model="firstName"></p>
        {{firstName}}
        {{lastName}}
    </div>
    <div ng-controller="secondController">
        {{person[0].name}}
        {{person[0].age}}
        <ul>
            <li ng-repeat="p in person">
                姓名:{{p.name}}
                年龄:{{p.age}}
            </li>
        </ul>
    </div>
</div>
<script type="text/javascript">
  var app=angular.module("myApp",[]);
  app.controller('firstController',function($scope){
      $scope.firstName="张三";
      $scope.lastName="李四";
  });
  app.controller('secondController',function($scope){
      $scope.person=[
          {name:'张三',age:'25'},
          {name:'李四',age:'30'},
          {name:'王五',age:'36'}
      ]
  });
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/yaowen/p/7224661.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值