angular的初步使用 

<!doctype html>

<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>angularjs 进阶</title>
    <script type="text/javascript" src="js/angular.min.js"></script>
</head>
<body ng-app = "app1"><!--代表angular这个环境-->
    <div ng-controller="myCtrl"> <!--代表controller-->
        <input type="text" ng-model = "msg"><!--model-->
            {{msg}}<!--model-->
    </div>
</body>
<script type="text/javascript">
    angular.module('app1',[]).controller('myCtrl',function($scope){
            $scope.msg = "angular"
    })
</script>
</html>

2.方法的绑定
angular.module("app",[]).controller("myCtrl",function($scope){
     $scope.msg = "liyang"
     $scope.reverse = function(){
          return  $scope.msg.split("").reverse().join("") //反转字符串
     }
})

<!doctype html>

<html lang="en">
<head>
    <meta charset = "UTF-8">
    <title>angularjs 进阶</title>
</head>
<body ng-app = "app"><!--代表angular这个环境-->
    <div ng-controller="myCtrl"> <!--代表controller-->
        <input type="text" ng-model = "msg"><!--model-->
            {{reverse()}}<!--方法的绑定-->
    </div>
</body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myControl.js"></script>
</html>

3.事件绑定
<!DOCTYPE html>
<html>
<head>
    <title>angular js进阶</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <script type="text/javascript" src="../js/angular.min.js"></script>
</head>
<body ng-app="app" ng-controller = "myCtr">
<input type="text" ng-model="user.name">
<input type="text" ng-model="user.pwd"> <!--模型绑定-->
<div ng-click = "loginAction()">登录</div><!--事件绑定-->
</body>
<script type="text/javascript">
    app = angular.module("app",[]);
    app.controller("myCtr",function($scope){
    $scope.user={name:"",pwd:""}
    $scope.loginAction=function(){
        alert($scope.user.name)
    }
    })
</script>
</html>

 

posted @ 2015-12-01 00:07  离子  阅读(151)  评论(0)  编辑  收藏  举报