码迷,mamicode.com
首页 > Web开发 > 详细

angularjs1-1

时间:2017-07-23 16:38:52      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:erb   ext   对象   stat   head   文档   file   data   $scope   

<!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>

 

angularjs1-1

标签:erb   ext   对象   stat   head   文档   file   data   $scope   

原文地址:http://www.cnblogs.com/yaowen/p/7224661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!