一、angular表达式

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <!--
        如果要使用angular 1、必须先引入相关的框架
        2、必须在页面body上写一个属性ng-app表示使用angular js应用
        3、表达式页面如果需要展示数据，需要写上两个大括号，例：{{表达式或者变量}}
    -->
</head>
<body ng-app>
    {{100*100}}
</body>
二、双向绑定
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-app>
    <!--
        ng-model 指令是指给input起名；后台如果接收表单数据，可以根据ng-model中的属性名获取值
        页面也可以通过这个属性获取值，本质数据放到当前页面的$
        scope中保存
    -->
    请输入你的姓名：<input ng-model="myName"><br>
    {{myName}},你好！！！
</body>
三、初始化指令
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
</head>
<body ng-app ng-init="myName='张三'">
    <!--
        ng-init是初始化指令，只要页面已加载就执行ng-init
        $scope是angular js内置对象，有请求的数据和相应的数据，还有方法
    -->
    请输入你的姓名：<input ng-model="myName"><br>
    {{myName}},你好
</body>
四、
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script>
        /*
        * 1、var app=angular.module('myApp',[]);
        * 定义一个myApp的模块后在body标签上声明使用模块的名称
        *2、app.controller('myController',function ($scope) {}
        * 在模块中声明控制器后在body标签上声明使用控制器
        */
        var app=angular.module('myApp',[]);//定义了一个myApp的模块
        //定义控制器$scope响应请求的数据和方法
        app.controller('myController',function ($scope) {
            $scope.add=function () {
                return parseInt($scope.X)+parseInt($scope.Y);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
X:<input ng-model="X"><br>
Y:<input ng-model="Y"><br>
运算结果：{{add()}}
</body>
五、事件指令
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script>
        //定义app模块
        var app=angular.module('myApp',[]);
        //定义myController控制器
        app.controller('myController',function ($scope) {
            $scope.add=function () {
                $scope.Z=parseInt($scope.X)+parseInt($scope.Y);
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
X:<input ng-model="X"><br>
Y:<input ng-model="Y"><br>
<button ng-click="add()">运算</button><br>
结果：{{Z}}
</body>
六、循环数组
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]);
        //定义控制器
        app.controller('myController',function ($scope) {
            //声明数组list
            $scope.list=[123,12,22,1323];
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        <tr ng-repeat="list in list">
            <td>{{list}}</td>
        </tr>
    </table>
</body>
七、循环对象遍历数组
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]);
        //定义控制器
        app.controller('myController',function ($scope) {
            //定义数组
            $scope.list=[
                {name:'lisi',saylary:12120,sui:120},
                {name:'zhangsan',saylary:2200,sui:20},
                {name:'张三',saylary:391073,sui:390}
            ]
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        <tr>
            <td>姓名</td>
            <td>工资</td>
            <td>税收</td>
        </tr>
        <tr ng-repeat="list in list">
            <td>{{list.name}}</td>
            <td>{{list.saylary}}</td>
            <td>{{list.sui}}</td>
        </tr>
    </table>
八、内置服务
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/angular.min.js"></script>
    <script>
        var app=angular.module('myApp',[]);
        //定义控制器，$http主要欧诺个来发送http请求，ajax请求，$http.get用来发送get请求
        app.controller('myController',function ($scope,$http) {
            $scope.findAll=function () {
                $http.get('data.json').success(function (response) {
                    $scope.list=response;
                });
            }
        });
    </script>
</head>
<body ng-app="myApp" ng-controller="myController" ng-init="findAll()">
    <table>
        <tr>
            <td>姓名</td>
            <td>工资</td>
            <td>税收</td>
        </tr>
        <tr ng-repeat="list in list">
            <td>{{list.name}}</td>
            <td>{{list.salary}}</td>
            <td>{{list.sui}}</td>
        </tr>
    </table>
</body>

angular前端框架简单小案例的更多相关文章

  1. Angular.js路由 简单小案例

    代码案例: <html> <head> <meta charset="utf-8"> <title>AngularJS 路由实例&l ...

  2. JavaWeb_(Struts2框架)Ognl小案例查询帖子

    此系列博文基于同一个项目已上传至github 传送门 JavaWeb_(Struts2框架)Struts创建Action的三种方式 传送门 JavaWeb_(Struts2框架)struts.xml核 ...

  3. angular前端框架

    总所周知,在前端开发中,大家用的比较多的框架就是angular,vue,react等,今天就为大家讲一下angular大家框架的原理及运用 1.本次所举的例子是以依赖require.js的, < ...

  4. 基于Pytorch的简单小案例

    神经网络的理论知识不是本文讨论的重点,假设读者们都是已经了解RNN的基本概念,并希望能用一些框架做一些简单的实现.这里推荐神经网络必读书目:邱锡鹏<神经网络与深度学习>.本文基于Pytor ...

  5. SSM框架CRUD小案例

    1.数据库准备 部门tbl_dept 员工tbl_emp 建立员工和部门的外键 2.在IDEA创建SSM项目环境 2.1配置Web模块 最上面的图是错误示范,注意!!! 在Tomcat配置了项目路径, ...

  6. 搭建angular前端框架 命令

    首先必备的工具都下下好. 然后现在开始输入命令行创建angular 项目 1.node cd .. 2.yo bower grunt 3.npm install -g generator-angula ...

  7. angular中ng-bind指令小案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. touch滑动事件---简单小案例

    html: <!--导航栏头部--><div class="type_nav"> <ul class="clearfix " v- ...

  9. Twig---和vue或angular前端框架并存

    <h1> {% verbatim %} {{message}} {% endverbatim %} </h1> 上面这种方式虽然能够解决,前台渲染的问题,但是还是会报错: 第二 ...

随机推荐

  1. 如何在非 sudo 用户下运行 docker 命令?

    当我们在一台 Linux 系统中安装了 Docker 后, 有时候会遇到下面这样的错误, 我们在运行 docker 的命令时必须加上 sudo, 例如: sudo docker ps, 但是我们其实更 ...

  2. 尝试用Vue.js开发网页小游戏的过程

    准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...

  3. 【转载】pyinstaller的使用和几个坑

    1.-w是不显示命令窗口,  -i 图标文件的路径  这是改变图标的,但是我发现只能改变任务栏里的和命令窗口的图标,并不能改变exe文件的图标.另外这些参数要加载pyinstaller和路径中间. 2 ...

  4. [Qt] QlineEdit 限制输入，例如只能输入整数

    要注意validor的作用域,如果超出作用域,则会无效.例如下面的代码,在UI的类的构造函数里.所以要new一个validtor. QIntValidator *intValidator = new ...

  5. Ubuntu 18.04更换apt-get源

    使用apt-get安装时,会很慢,更换了国内的源后,就可以解决这个问题了. 1. 备份sources.list文件 sudo cp /etc/apt/sources.list /etc/apt/sou ...

  6. Spring Boot @EnableAutoConfiguration和 @Configuration的区别

    Spring Boot @EnableAutoConfiguration和 @Configuration的区别 在Spring Boot中,我们会使用@SpringBootApplication来开启 ...

  7. Memo-Tech

    Qt install Qt on Ubuntu Download *.run file; Click downloaded file to install. Note that gcc module ...

  8. CF1285 --- Dr. Evil Underscores

    CF1285 --- Dr. Evil Underscores 题干 Today as a friendship gift, Bakry gave Badawy \(n\) integers \(a_ ...

  9. 几年前的今天，Google发了这几篇“大”新闻

    免责声明: 因阅读本文所导致的任何时间或经济上的损失,皆由您自行承担,本小编概不负责. 估计今天我的朋友圈会被"震惊!"刷屏,来看看 Google 做过哪些令人"震惊&q ...

  10. 《例说51单片机（C语言版）（第3版）》——1-3 认识MCS-51的存储器结构

    本节书摘来异步社区<例说51单片机(C语言版)(第3版)>一书中的第1章,第1.3节,作者:张义和,王敏男,许宏昌,余春长,更多章节内容可以访问云栖社区"异步社区"公众 ...