angular--入门

于 2019-02-01 15:48:44 发布
阅读量315 收藏
点赞数
分类专栏： 前端 angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/adminBfl/article/details/86740345
版权

 

目录

 

表达式使用

数据双向绑定

初始化执行

控制器

事件执令

循环数组

循环对象数组

内置服务 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>

页面显示

数据双向绑定

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

页面效果

 

初始化执行

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

页面第一次打开效果

控制器

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

页面效果  相加

事件执令

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

页面效果 点击运算

点击事件中的执行方法可以用 ; 分号隔开  ng-click="grade=1;selectList({id:0})"

循环数组

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

页面效果

循环对象数组

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

页面效果

内置服务 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/

{
  "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)"
    },
  ]
}

页面效果

别浪呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Angular
Poggie的博客
07-22 4207
学习前端的第一周，从Angular开始，使用Vs code
angular-webpack:带有Webpack的Angular入门套件
05-14
Angular Webpack 带有的Angular入门套件入门依存关系（> = 6.9.1）设置git clone https://github.com/bellizio/angular-webpack.git cd angular-webpack yarn install概述这是一个基于官方的Angular Webpack入门工具...
angular入门
04-25
快速了解angular
angular-express
05-25
入门要开始使用，您可以简单地克隆有角度的种子存储库并安装依赖项：先决条件您需要git来克隆有角度的种子存储库。 您可以从获得git。 我们还使用了许多node.js工具来初始化和测试角度种子。 您必须安装了node.js...
angular-firebase
07-12
入门 要开始使用，您可以简单地克隆 angular-seed 存储库并安装依赖项： 先决条件 您需要 git 来克隆 angular-seed 存储库。 您可以从获取 git。 我们还使用了许多 node.js 工具来初始化和测试 angular-seed。 您...
angular-googleMapApi
07-17
入门要开始使用，您可以简单地克隆 angular-seed 存储库并安装依赖项：先决条件您需要 git 来克隆 angular-seed 存储库。 您可以从获取 git。 我们还使用了许多 node.js 工具来初始化和测试 angular-seed。 您必须...
Angular2-入门
01-02
Why Angular2 Angular1.x显然非常成功，那么，为什么要剧烈地转向Angular2？
angular
qq_40097898的博客
12-04 1379
Angular 坑 一、ng-include指令     错在哪里，记得在第一次使用ng-include的时候，这样引用文件，始终在页面上都不显示footer.html的内容，后来明白ng-include需要的是一个变量，所以我们可以改写成 ’views/include/footer.html’ ">  或定义一个scope变量，如：scope变量， 如： $scope.foote
angular入门教程
最新发布
07-22
如果你是初学者，以下是一个简单的 Angular 入门教程，帮助你开始学习 Angular： 1. 安装 Angular CLI：首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，使用 npm 安装 Angular CLI。在命令行中运行以下...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值