您的位置: 首页  >  文章  >  angular.js入门

angular.js入门

分类: 文章 • 2022-10-17 15:16:28

 

目录

 

表达式使用

数据双向绑定

初始化执行

控制器

事件执令

循环数组

循环对象数组

内置服务 http

表达式使用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-1 表达式</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
</head>
<!-- ng-app在这个标签里的可以使用 angular语法 -->
<body ng-app>
    <!-- 花括号里面写变量 -->
    {{100+100}}
</body>
</html>

页面显示

angular.js入门

数据双向绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-2 双向绑定</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
</head>
<!-- ng-app在这个标签里的可以使用 angular语法 -->
<body ng-app>
    <!-- ng-model 双向绑定变量的属性名 -->
   请输入姓名: <input ng-model="name">
   {{ name }}
</body>
</html>

页面效果

angular.js入门

 

初始化执行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-3 初始化执令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
</head>
<!-- ng-init 初始化方法给变量name赋默认值 -->
<body ng-app ng-init="name='往大豪'">
    <!-- ng-model 双向绑定变量的属性名 -->
   请输入姓名: <input ng-model="name">
   {{ name }}
</body>
</html>

页面第一次打开效果

angular.js入门

控制器

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-3 初始化执令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
    <script>
        //建立模块 myApp模块名 [] 其他子模块
        var app=angular.module("myApp",[])
        //创建控制器 $scope 控制层和视图层交换数据的桥梁
        app.controller("myController",function($scope){

            $scope.add=function(){
                return  parseInt($scope.x)+parseInt($scope.y);
            }
        });
    </script>
</head>
<!-- ng-app 指定模块名  ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
    第一个数:<input ng-model="x" > <input ng-model="y">
{{add()}}
</body>
</html>

页面效果  相加

angular.js入门

事件执令

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-4 事件执令</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
    <script>
        //建立模块 myApp模块名 [] 其他子模块
        var app=angular.module("myApp",[])
        //创建控制器 $scope 控制层和视图层交换数据的桥梁
        app.controller("myController",function($scope){
            // 添加 add 方法
            $scope.add=function(){
                // 添加 z 变量
                $scope.z=parseInt($scope.x)+parseInt($scope.y);
            }
        });
    </script>
</head>
<!-- ng-app 指定模块名  ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
    第一个数:<input ng-model="x" > <input ng-model="y">
    <button ng-click="add()">运算</button>
{{z}}
</body>
</html>

页面效果 点击运算

angular.js入门

循环数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-5 循环数组</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
    <script>
        //建立模块 myApp模块名 [] 其他子模块
        var app=angular.module("myApp",[])
        //创建控制器 $scope 控制层和视图层交换数据的桥梁
        app.controller("myController",function($scope){
            // 定义数组变量
         $scope.list=[102,201,303,402];
         
        });
    </script>
</head>
<!-- ng-app 指定模块名  ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
<table>
    <!-- 再循环的位置加  x 循环后的变量 list 要循环的变量-->
    <tr ng-repeat="x in list">
        <td>{{x}}</td>
    </tr>
</table>
</body>
</html>

页面效果

angular.js入门

循环对象数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-6 循环对象数组</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
    <script>
        //建立模块 myApp模块名 [] 其他子模块
        var app=angular.module("myApp",[])
        //创建控制器 $scope 控制层和视图层交换数据的桥梁
        app.controller("myController",function($scope){
            // 定义数组变量
         $scope.list=[{name:"张三",age:"13",sex:"男"},
                        {name:"李四",age:"3",sex:"女"},
                        {name:"王五",age:"23",sex:"男"},];
         
        });
    </script>
</head>
<!-- ng-app 指定模块名  ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController">
<table>
    <!-- 再循环的位置加  x 循环后的变量 list 要循环的变量-->
    <tr >
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>

    <tr ng-repeat="person in list">
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td>{{person.sex}}</td>
        </tr>
</table>
</body>
</html>

页面效果

angular.js入门

内置服务 http

封装ajax 需要放在tomcat里运行

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>angularDemo-6 循环对象数组</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 导入angular -->
    <script src="js/angular.min.js"></script>
    <script>
        //建立模块 myApp模块名 [] 其他子模块
        var app=angular.module("myApp",[])
        //创建控制器 $scope 控制层和视图层交换数据的桥梁
        app.controller("myController",function($scope,$http){
            $scope.findList=function(){
                // 定义内置请求对象
                $http.get("https://www.easy-mock.com/mock/5bf274cfa733fb71407cf649/example/angularDemo").success(
                    function(res){
                        $scope.list= res.data;
                    }
                )
            }
        })
    </script>
</head>
<!-- ng-app 指定模块名  ng-controller 指定控制器-->
<body ng-app="myApp" ng-controller="myController" ng-init="findList()">
<table>
    <!-- 再循环的位置加  x 循环后的变量 list 要循环的变量-->
    <tr >
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
    </tr>

    <tr ng-repeat="person in list">
        <td>{{person.name}}</td>
        <td>{{person.age}}</td>
        <td>{{person.sex}}</td>
    </tr>
</table>
</body>
</html>

EasyMock测试

json对象地址 https://www.easy-mock.com/mock/5bf274cfa733fb71407cf649/example/angularDemo

EasyMock官网 https://www.easy-mock.com/

angular.js入门

{
  "data": [{
      "name": "@cname",
      "age": "@integer(60, 100)",
      "sex": "@integer(1, 2)"
    },
    {
      "name": "@cname",
      "age": "@integer(60, 100)",
      "sex": "@integer(1, 2)"
    },
    {
      "name": "@cname",
      "age": "@integer(60, 100)",
      "sex": "@integer(1, 2)"
    },
  ]
}

页面效果

angular.js入门

相关推荐