品优购_AngularJs_前端框架的八种常用指令

最新推荐文章于 2019-08-17 17:07:08 发布
最新推荐文章于 2019-08-17 17:07:08 发布
阅读量414 收藏 3
点赞数 1
分类专栏： 品优购 AngularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42333583/article/details/82263262
版权

1 表达式:np-app

ng-app 定义anglar起作用的范围,在body里面器作用,用来定义模块的

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo1_表达式</title>
        <script src="js/angular.min.js"></script>
    </head>
    <!--ng-app 定义anglar起作用的范围,在body里面起作用,用来定义模块的-->
    <body ng-app>
        {{100+100}}
    </body>
</html>

 2 双向绑定 ng-model

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo2_双向绑定</title>
        <script src="js/angular.min.js"></script>
    </head>
    <!--ng-model 指令用于绑定变量,这样这个变量在作用域范围内就可以使用-->
    <body ng-app>
        请输入您的大名:<input ng-model="bianliangming" /></br>
        {{bianliangming}}
    </body>
</html>

3 初始化变量ng-init

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo1_初始化变量</title>
        <script src="js/angular.min.js"></script>
    </head>
    <!--ng-init指令  初始化指令,用于初始化变量的-->
    <body ng-app ng-init="myname='东方不败'">
        请输入您的大名:<input ng-model="myname" /></br>
        {{myname}},你好!
    </body>
</html>

4 控制器 ng-controller

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo4_控制器</title>
        <script src="js/angular.min.js"></script>
        
        <script>
            //自定义一个模块,等于把html中的 ng-app内容引入到script
            var app=angular.module("app",[]);
            //括号中必须加$scope,他是html和anglar之间的桥梁,只有加上才是一个anglar的一部分
            //$scope相当于从html中的ng-model中取变量,要不然取不出变量,add也相当于一个变量了
            app.controller("control",function($scope){
                $scope.add=function(){
                    return parseInt($scope.x) +parseInt($scope.y)
                }
            })
        </script>
    </head>

    <body ng-app="app" ng-controller="control">
        X:<input ng-model="x" /></br>
        Y:<input ng-model="y" /></br>
        结果:{{add()}}
    </body>
</html>

5    事件指令 ng-click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo5_事件指令</title>
        <script src="js/angular.min.js"></script>
        
        <script>
            //自定义一个模块,等于把html中的 ng-app内容引入到script
            var app=angular.module("app",[]);
            //括号中必须加$scope,他是html和anglar之间的桥梁,只有加上才是一个anglar的一部分
            //$scope相当于从html中的ng-model中取变量,要不然取不出变量,add也相当于一个变量了
            app.controller("control",function($scope){
                $scope.add=function(){
                    $scope.z= parseInt($scope.x) +parseInt($scope.y)
                }
            })
        </script>
    </head>
    
    <!--ng-click是单击指令,单击后执行script中的angular指令-->
    <body ng-app="app" ng-controller="control">
        X:<input ng-model="x" /></br>
        Y:<input ng-model="y" /></br>
        <button ng-click="add()">运算</button></br>
        结果:{{z}}
    </body>
</html>

6 循环数组 ng-repeat

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo6_循环数组</title>
        <script src="js/angular.min.js"></script>
        
        <script>
            //自定义一个模块,等于把html中的 ng-app内容引入到script
            var app=angular.module("app",[]);
            //有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope发生改变时也会立刻重新渲染视图.
            app.controller("control",function($scope){
                //定义了一个数组
                $scope.list= [100,192,203,434 ];
            });
        </script>
    </head>
    
    <!--ng-click是单击指令,单击后执行script中的angular指令-->
    <body ng-app="app" ng-controller="control">
        <table>
            <tr ng-repeat="z in list">
            <!--要取出数组必须循环,不能直接输出数组,要不然没有显示-->
            <td  >{{z}}</td>
        </tr>
        </table>
    </body>
</html>

7  循环对象数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo7_循环对象数组</title>
        <script src="js/angular.min.js"></script>
        
        <script>
            //自定义一个模块,等于把html中的 ng-app内容引入到script
            var app=angular.module("app",[]);
            //有了$scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的$scope发生改变时也会立刻重新渲染视图.
            app.controller("control",function($scope){
                //定义了一个对象数组
                $scope.list=  [
                {name:'张三',shuxue:100,yuwen:93},
                {name:'李四',shuxue:88,yuwen:87},
                {name:'王五',shuxue:77,yuwen:56}
            ];;
            });
        </script>
    </head>
    
    <!--ng-click是单击指令,单击后执行script中的angular指令-->
    <body ng-app="app" ng-controller="control">
        <table>
            <tr ng-repeat="z in list">
            <!--要取出数组必须循环,不能直接输出数组,要不然没有显示-->
                <td  >{{z.name}}</td>
                <td  >{{z.shuxue}}</td>
                <td  >{{z.yuwen}}</td>
        </tr>
        </table>
    </body>
</html>

 

8 内置服务  $http

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>入门demo8_内置服务</title>
        <script src="js/angular.min.js"></script>
        <!--引入html中的control到script中-->
        <script>
            var app=angular.module("app",[]);
            app.controller("control",function($scope,$http){
                $scope.findAll=function(){
                    $http.get("data/data.json").success(
                        function(response){
                            $scope.list=response;
                        }
                    )
                }
            });
        </script>
        
        
    </head>
        
    <body ng-app="app" ng-controller="control" ng-init="findAll()">
        <table>
            <tr ng-repeat="z in list">
                <td>{{z.name}}</td>
                <td>{{z.yuwen}}</td>
                <td>{{z.shuxue}}</td>
            </tr>
        </table>
    </body>
</html>

weixin_42333583
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
传智播客_黑马_品优购_2018
08-14
【标题】"传智播客_黑马_品优购_2018"指的是一个由传智播客和黑马程序员联合推出的2018年品优购相关的IT培训课程资源。这个课程可能涵盖了电子商务、互联网产品开发、运营等多个方面，旨在帮助学员掌握最新的技术和...
品优购_day03_课程讲义_V1.31
08-08
品优购电商系统开发第3章规格及模板管理传智播客.黑马程序员 课程目标目标1：理解和运用angularJS的service目标2：理解和运用控制器继承目标3：掌握
品优购网站_品优购_前端代码——商城_
10-01
实现了基本功能，三个页面，有足够的继续开发潜力，
Angularjs常用指令
稻草人
09-09 523
ng-repeat和ng-options的区别ng-show和ng-if的区别常用指令和服务
AngularJS 常用指令
KingCruel的专栏
03-22 608
1、directive指令改变div样式 First Second Third appDirectives.directive("changeElement", function () { return { link: function (scope, elements, attrs, controller) { el
AngularJS系列(一)——常用指令
咸鱼老罗的博客
09-08 966
资料 学习参考：http://www.runoob.com/angularjs/angularjs-tutorial.html 概述 AngularJS1.x是基于MVC的js架构。 jQuery是dom搜索驱动，AngularJS是数据驱动。对于熟悉jq的同学来说，学习使用Angular就用angular的方式思考实现、即数据的角度。而不用JQ的角度、即操作dom。 引用文件：angu
AngularJS 最常用指令的功能
zhangh8627的专栏
07-13 2424
在这里我整理了一下 AngularJS 中常用到的指令，包含它们的书写格式及指令的用法，功能。不过这里的整理有些不完整，不过在后面的使用过程中会逐步的去完善，里面有些知识点是摘录自网络上的，但是我都去调试检验代码的可行性，加以自己的理解去整理，有些部分加上了自己的理解。 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合      
唯品优购_blankett7y_品优购_小程序、购物商城、web前端_
10-01
标题中的“唯品优购_blankett7y_品优购_小程序、购物商城、web前端”揭示了这个项目是关于一个名为“唯品优购”的在线购物平台的前端开发，其中涉及到了小程序和Web商城的实现。这个项目可能集成了“blankett7y”这...
AngularJS的常用指令
u014752221的博客
12-05 858
AngularJS的常用指令 ng-app初始化一个模块； ng-init指令初始化应用程序数据。; ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。 如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。； ng-change 指令用于告诉 AngularJS 在 HTML 元...
angularjs常用指令
weixin_45293888的博客
08-17 258
angularjs开发前的准备 导入angularjs的文件 <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> 在body标签中添加两个指令 ng-app和ng-controller 在脚本语言中，添加angularjs的基本架子 <script t...
AngularJS常用指令
哎
02-04 338
AngularJS指令用于扩展HTML。ng-前缀的特殊属性 ng-app：该指令启动一个AngularJS应用。 ng-init：该指令初始化应用程序数据 ng-model：该指令定义模型，该模型是变量在AngularJS使用 ng-repeat：该指令将重复集合中的每个项目的HTML元素。 angularjs表达式：数据绑定，由两个花括号{{}}组成，可以把数据绑定到HTML，类似javascr
Angularjs 常用指令
LexKaing 学习天地
07-06 285
ng指令太多了，参考官网：https://docs.angularjs.org/api/ng/directive常用的：ng-app 指令定义一个 AngularJS 应用程序。（如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果）ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程...
AngularJS系列之常用指令
林老师带你学编程
09-06 2117
这节给大家介绍一下AngularJS中一些常用的指令，例如：ng-app、ng-init、ng-repeat、ng-model等等之类的指令。 那什么是AngularJS的指令呢，其实就是相当于HTML中的一些属性值，例如input中的type属性等等之类的。 下面就来介绍一下AngularJS中的指令： AngularJS 指令： AngularJS 指令是扩展的 HTM
学习品优购总结[二](前端框架AngularJS)
weixin_39720449的博客
06-25 207
AngularJS简介 诞生于2009年，现在被Google收购。 优势：angularJS可以替代js完成部分操作。 AngularJS四大特征 1.MVC模式 AngularJS可以进行分层，每一层都是独立的，代码简洁且阅读性强。 Model:数据,其实就是angular变量($scope.XX); View: 数据的呈现,Html+Directive(指令); Controller:操作数据...
AngularJs的基础——常用指令
bboyjoe的博客
12-29 659
一.常用指令： 1)ng-app:定义应用程序的根元素； 2)ng-model:绑定应用程序数据到html元素； 3)ng-bind:绑定html元素到应用程序数据； Angular基础 在输入框中尝试输入： 姓名： {{name}} 显示效果：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值