欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

AngularJS重型前端框架

程序员文章站 2022-04-22 19:34:02
一、AngularJs AngularJs是一种前端的重型框架,而现在正在被Aue.js所取代。而Aue的和AngularJs大同小异。 AngularJs核心功能有MVC、模块化、自动化双向数据绑定、依赖注入等等。 我在刚接触时,会感觉到是一个另类的java代码,它包括前端,controller层 ......

一、angularjs

  angularjs是一种前端的重型框架,而现在正在被aue.js所取代。而aue的和angularjs大同小异。

  angularjs核心功能有mvc、模块化、自动化双向数据绑定、依赖注入等等。

  我在刚接触时,会感觉到是一个另类的java代码,它包括前端,controller层,service层,这实在是有点像java代码。而它controller层中也类似java是调用相应的service层代码;service层有点区别,angular中的service层是发送请求,而这好像就是angularjs的核心功能mvc。

  依赖注入即前端函数中的形参,可以直接注入到controller。

  1.1前端页面指令

    1、ng-model:用于绑定数据,可以将输入到文本框中,可以实时输出变量。

    2、ng-init:在访问页面的时候同时加载该函数。

    3、ng-click:点击事件。传递具体数据ng-click(方法名('1'))。常用的还是点击事件。

    4、ng-app:指令用于告诉 angularjs 应用当前这个元素是根元素,不太了解没学前端。

    5、ng-repeat="x in list":循环指令

    6、ng-if="条件":判断指令

   1.2表达式

    {{entity.id}}:可以取值。

   2.1controller层  

      我感觉其中就是给页面中的事件,调用service层的方法,然后就是该方法成功返回后的事件。

//搜索,$scope.search前端页面中的search事件,page,rows是参数
    $scope.search=function(page,rows){      
    //调用service层的方法,并传入参数,success后的处理 goodsservice.search(page,rows,$scope.searchentity).success( function(response){ $scope.list=response.rows; $scope.paginationconf.totalitems=response.total;//更新总记录数 } ); }

  2.2service层

    service层主要就是发送请求。而事务则是使用的@transactional注解。

//搜索
    this.search=function(page,rows,searchentity){
//路径中.do是在web.xml中规定的
        return $http.post('../goods/search.do?page='+page+"&rows="+rows, searchentity);
    }

二、开发

    与常规的ssm开发不尽相同。分布式开发时模块开发,所以可能controller层,并不是和service是同一模块,这样相同的方法就可以重复调用。

    1.1controller层

      与常规的ssm开发略微的不同,其中的注入service使用的是@reference,该注解是ali下的。

    1.2service层

      其中@service注解是ali下的。