博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
致以后可能会用到的angular(虽然没什么机会)
阅读量:4316 次
发布时间:2019-06-06

本文共 1564 字,大约阅读时间需要 5 分钟。

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的功能,但是介于在以后的工作中用到的机会比较小,所以就不具体的一一列出了。。。。

转载于:https://www.cnblogs.com/zaxxm/p/4101558.html

你可能感兴趣的文章
003.第一个动画:绘制直线
查看>>
ng-深度学习-课程笔记-2: 神经网络中的逻辑回归(Week2)
查看>>
正则表达式的搜索和替换
查看>>
个人项目:WC
查看>>
地鼠的困境SSL1333 最大匹配
查看>>
flume+elasticsearch+kibana遇到的坑
查看>>
【MM系列】在SAP里查看数据的方法
查看>>
C#——winform
查看>>
CSS3 transform制作的漂亮的滚动式导航
查看>>
《小强升职记——时间管理故事书》读书笔记
查看>>
Alpha 冲刺(3/10)
查看>>
Kaldi中的Chain模型
查看>>
spring中的ResourceBundleMessageSource使用和测试示例
查看>>
css规范 - bem
查看>>
UVALive 6145 Version Controlled IDE(可持久化treap、rope)
查看>>
mysql 将两个有主键的表合并到一起
查看>>
底部导航栏-----FragmentTabHost
查看>>
在linux中安装jdk以及tomcat并shell脚本关闭启动的进程
查看>>
apk,task,android:process与android:sharedUserId的区别
查看>>
前端实现文件的断点续传
查看>>