致以后可能会用到的angular(虽然没什么机会)

angular是一种框架,它在一定程度上补足了HTML在构建应用方面的缺陷,它使用称为标识符的结构,让浏览器能够识别。比如:使用两个大括号进行数据绑定;在angular认为,一切DOM操作都是不合理的,所以在使用angular的时候,根本就不用进行DOM操作,它提供了简单适用的方法来替代传统的DOM操作,具体后面会提到;angular还有自己独特的匹配指令,指示器,和ajax语句。

首先,要使用angular必须先给一个作用域,比如:<body ng-app></body>。这句话的意思就是将作用域的范围规定在body里面,我们可以在body里面使用任何angular的操作。

然后,在进行angular操作的时候,我们要先确定一个操作器比如:<div ng-controller></div>这样就定义了一个操作器,我们可以在其中使用‘ng-click="fun()"‘绑定事件,在传统的js中,如果我们想要动态的实现表单的增删改查,很多时候需要进行字符串的拼接,然后用"innerHTML"来实现,但是在angular中我只需要很简单的一句话就OK了,"<ul><li ng-repeat=‘i in info‘>{{i}}</li></ul>"来进行实现,同时在JS中的写法为

"

function show($scope) {
        $scope.info =[‘1‘,‘2‘,‘3‘,‘4‘];
        $scope.msg = function () {
            $scope.info.push(‘xts‘);
        }
        $scope.del = function () {
            $scope.info.pop();
        }
        $scope.cha = function () {
            $scope.info[0] = ‘xxm‘;
        }
    }

"

其中"show"是控制器的名称,而"info"则是对应了"ng-repeat"里面"info"的,比较重要的是"$scope"这个参数,不能够随便修改,我们就通过它来实现数据的链接,将后台的数据传送到页面。

angular中还为我们提供了很好的匹配指令,能够通过属性名,元素名,注释,类名来改变页面中的内容。具体写法为:

var myComm = angular.module(‘mycommand‘, []);
            //名字中不要有特殊字符  ‘-‘
        myComm.directive(‘commandinfo‘, function() {
            //A 属性  E 元素 M 注释 C class

return {
                restrict: ‘AEMC‘,
                template: ‘要修改的内容‘,
                replace: true
            }
        });

而且我们还可以对匹配到的对象进行很多其他的操作,具体就不一一列出了,因为太多了。

还有比较重要的一点就是angular中对ajax的写法:

首先对该作用域实现模块化: var mycon=angular.module("con",[]);

然后在控制器中实现ajax:

mycon.controller(‘show‘,[‘$scope‘,‘$http‘,function($scope,$http){
            $http({
                method:"post",
                url:"/getname"
            }).success(function(d){
                $scope.info=d;
            })
        }]);

其实和jQuery中的写法差别不是很大,主要就是"$scope","$http"这两个参数。

其实angular中还有许许多多牛B的功能,但是介于在以后的工作中用到的机会比较小,所以就不具体的一一列出了。。。。

时间: 2024-08-04 03:35:18

致以后可能会用到的angular(虽然没什么机会)的相关文章

vue 全局引用jq(打包后可能会遇到的问题)

问题描述:全局引用jquery打包到线上可能会不好使. 第一步: var path = require('path') var webpack = require('webpack') function resolve(dir) { return path.join(__dirname, '..', dir) } module.exports = { entry: './src/main.js', externals: { 'BMap': 'BMap', // 'BMap_Symbol_SHAP

angular指令监听ng-repeat渲染完成后执行自定义事件方法

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己创建自定义指令. 在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,所以可以通过判断$last的值来监听ng-repeat的执行状态, 怎么在遍历过程中拿到$last的值:自定义指令 v

利用angular指令监听ng-repeat渲染完成后执行脚本

业务中有时需要在异步获取数据并用ng-repeat遍历渲染完页面后执行某个操作,angular本身并没有提供监听ng-repeat渲染完成的指令,所以需要自己动手写.有经验的同学都应该知道,在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even,$index会随着每次遍历(从0开始)递增,当遍历到最后一个时,$last的值为true,so,通过判断$last的值来监听ng-repeat的执行状态,怎么在遍历过程中拿到$la

半小时入门Angular 2

本文首发于由电子工业出版社出版<揭秘Angular 2>一书,基于第5章概览改写. 作者简介:广发证券互联网金融技术团队,是Angular早期坚定的践行者.作为全新一代的证券业 IT 研发组织,团队致力于用更新更好的技术打造行业方案.支持业务创新. 责编:陈秋歌,寻求报道或者投稿请发邮件至chenqg#csdn.net,或加微信:Rachel_qg. 了解更多前沿技术资讯,获取深度技术文章推荐,请关注CSDN研发频道微博. Angular 2.0 于去年 9 月正式发布. 尽管同一时间里 Re

angular简介和其特点介绍

这篇文章主要介绍了angular简介和其特点介绍,本文讲解了关于和jquery的比较.关于适用场合.关于UI的结合.关于angularjs的特点等内容,需要的朋友可以参考下以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用.而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨到angularjs跨度较大,研究了一段时间的angularjs ,下面从整体上说说感受吧:     关于和jquery的比较

angular简介和其特点介绍(上)

这篇文章主要介绍了angular简介和其特点介绍,本文讲解了关于和jquery的比较.关于适用场合.关于UI的结合.关于angularjs的特点等内容,需要的朋友可以参考下以前开发(web或者移动端)前端主要使用jQuery+原生js,如果使用某些前端UI框架的话,它自己还可能提供一些API可以使用.而且目前很多UI框架都是基于jQuery的,所以说一下由jQuery跨到angularjs跨度较大,研究了一段时间的angularjs ,下面从整体上说说感受吧: 关于和jquery的比较 首先an

使用&lt;mvc:resources&gt;后@Controller无法访问

在使用静态资源<mvc:resources>后可能会无法访问@Controller,找了半天的错误后才发现原来还得在添加这个 <!-- 配置静态目录 --> <mvc:annotation-driven/> <mvc:resources location="/html/" mapping="/html/"/> <mvc:resources location="/back_css/" mappi

大型的支付系统,如支付宝、财付通每天交易额都非常巨大,后系统是如何对账、风控的呢?

为了可以更好地解释支付结算系统对账过程,我们先把业务从头到尾串起来描述一下场景,帮助大家理解:一个可能得不能再可能的场景,请大家深刻理解里面每个角色做了什么,获取了哪些信息:某日阳光灿烂,支付宝用户小明在淘宝上看中了暖脚器一只,价格100元.犹豫再三后小明使用支付宝网银完成了支付,支付宝显示支付成功,淘宝卖家通知他已发货,最近几日注意查收. 小明:持卡人,消费者,淘宝和支付宝的注册会员,完成了支付动作,自己的银行账户资金减少,交易成功.银行:收单银行,接受来自支付宝的名为“支付宝BBB”的100

Maya 建模完成后的整理

我们在使用Maya建模完成后可能会进行发布,为了自己或他人的方便使用,我们需要对建立好的模型进行些处理: 1. 删除历史记录:选择模型,Edit -> Delete by Type -> History 2. 数值归零: 选择模型,Modify -> Freeze Transformations 3. 打组: 选择模型,按Ctrl + G,并置于地平面之上,并重命名群组 4. 删除参考图等其他冗余 5. 优化场景: File -> Optimize Scene Size