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

最新推荐文章于 2019-08-17 17:07:08 发布
最新推荐文章于 2019-08-17 17:07:08 发布
阅读量432 收藏 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>

前端——品优购项目（html+css）_前端品优购
2401_84447390的博客
04-27 332
技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】2px;
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
黑泽君
01-15 870
day02_品优购电商项目_02_前端框架AngularJS入门 + 品牌列表的实现 + 品牌列表分页的实现 + 增加/修改/删除品牌的实现 + 品牌分页条件查询的实现_用心笔记
Angularjs常用指令
稻草人
09-09 543
ng-repeat和ng-options的区别ng-show和ng-if的区别常用指令和服务
AngularJS 常用指令
KingCruel的专栏
03-22 624
1、directive指令改变div样式 First Second Third appDirectives.directive("changeElement", function () { return { link: function (scope, elements, attrs, controller) { el
AngularJS系列(一)——常用指令
咸鱼老罗的博客
09-08 981
资料 学习参考：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 2441
在这里我整理了一下 AngularJS 中常用到的指令，包含它们的书写格式及指令的用法，功能。不过这里的整理有些不完整，不过在后面的使用过程中会逐步的去完善，里面有些知识点是摘录自网络上的，但是我都去调试检验代码的可行性，加以自己的理解去整理，有些部分加上了自己的理解。 第一 迭代输出之ng-repeat标签 ng-repeat让table ul ol等标签和js里的数组完美结合      
品优购_day02_课程讲义_V1.31
08-08
【品优购电商系统开发第2章品牌管理】课程主要关注使用AngularJS前端框架进行品牌管理功能的实现。AngularJS是由Misko Hevery等人在2009年创建，后来被Google收购，广泛应用于Google的产品中。这个框架以其独特的...
品优购_day05_服务器FastDFS_V1.31
08-08
在品优购电商系统的开发过程中，第五章主要涉及商品录入的功能实现，特别是商品分类、电商概念的理解以及富文本编辑器、文件上传至服务器FastDFS和AngularJS图片上传等技术的应用。以下是这些知识点的详细说明： **...
day01_品优购电商项目_01_走进电商 + 分布式框架-Dubbox + 品优购-框架搭建 + 逆向工程 + 品牌列表展示 + 常见错误_用心笔记
黑泽君
01-14 1033
day01_品优购电商项目_01_走进电商 + 分布式框架-Dubbox + 品优购-框架搭建 + 逆向工程 + 品牌列表展示 + 常见错误_用心笔记
品优购电商系统开发：AngularJS品牌管理实战
品优购电商系统开发的第2章主要聚焦于品牌管理功能的实现，通过传智播客和黑马程序员的课程，学员将掌握AngularJS前端框架的深入应用。本章节课程目标明确，旨在提升开发者的技能和理解。 首先，课程目标分为六点：...
品优购网站_品优购_前端代码——商城_
10-01
实现了基本功能，三个页面，有足够的继续开发潜力，
AngularJS的常用指令
u014752221的博客
12-05 876
AngularJS的常用指令 ng-app初始化一个模块； ng-init指令初始化应用程序数据。; ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。 如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。； ng-change 指令用于告诉 AngularJS 在 HTML 元...
angularjs常用指令
weixin_45293888的博客
08-17 298
angularjs开发前的准备 导入angularjs的文件 <script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script> 在body标签中添加两个指令 ng-app和ng-controller 在脚本语言中，添加angularjs的基本架子 <script t...
AngularJS常用指令
sg392361615的专栏
10-12 342
ng-app 指令 ng-app指令用来标明一个AngularJS应用程序 标记在一个AngularJS的作用范围的根对象上 系统执行时会自动的执行根对象范围内的其他指令 可以在同一个页面创建多个ng-app节点 ng-bind 指令 shit'">   {{username}} -->       n
Angularjs 常用指令
LexKaing 学习天地
07-06 317
ng指令太多了，参考官网：https://docs.angularjs.org/api/ng/directive常用的：ng-app 指令定义一个 AngularJS 应用程序。（如果移除了 ng-app 指令，HTML 将直接把表达式显示出来，不会去计算表达式的结果）ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。 ng-model 指令把元素值（比如输入域的值）绑定到应用程...
AngularJS系列之常用指令
林老师带你学编程
09-06 2130
这节给大家介绍一下AngularJS中一些常用的指令，例如：ng-app、ng-init、ng-repeat、ng-model等等之类的指令。 那什么是AngularJS的指令呢，其实就是相当于HTML中的一些属性值，例如input中的type属性等等之类的。 下面就来介绍一下AngularJS中的指令： AngularJS 指令： AngularJS 指令是扩展的 HTM
品优购前端开发资源分享与代码案例
品优购这样的项目很可能是一个电商平台，它需要前端开发人员设计和实现用户界面，同时确保良好的用户体验。 其次，"代码"一词表明了这是一个涉及软件开发的过程。考虑到文件信息中提到了"我的自己的代码"，这意味着...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值