angularjs与requirejs整合实用技巧

                       Angularjs与Requirejs整合实用技巧

一、简介

关于angularjs的特点这里不啰嗦，本文只介绍三点生产中实用技巧：angularjs与requirejs集成、指令实现类freemarker功能、过滤器使用。

二、实用技巧展示

1、使用angularjs的过程中，很多只是将其当做引入系统中的一个js插件工具，而不是作为前台开发的主体框架，其和requirejs整合可以使前段js文件使用管理更加方便，代码更清晰易于管理。

（1）、从html中引用的js文件介绍使用

Html中直接需要引用require-conf.js、angular-bootstrap.js、require.js，其中require-conf.js、angular-bootstrap.js需要自己定义，require.js引用官方文件即可，其核心引用在于userCtrl。

（2）、定义require-conf.js文件，对系统中用到的js文件做统一配置管理

var paths = {

    //lib

    'jquery': 'js/lib/jquery/jquery',

    'angular':'js/lib/angular/angular',

    'userCtrl':'js/lib/controller/userCtrl'

};

var shim = {

    'angular': {

        exports: 'angular',

        deps: ['jquery']

    }

};

以上代码只简单列举部分引用js文件，并添加依赖关系，此处并没有与requirejs产生关联，requirejs加载新增angular-bootstrap.js文件：

var requireConfig = {

    urlArgs: "bust=v3",

    waitSeconds: 7,

    baseUrl: '',

    paths: paths,

    shim: shim

};

 

requirejs.config(requireConfig);

 

var required = [];

(function () {

    function scripts() {

        return document.getElementsByTagName('script');

    }

 

    for (var i = 0; i < scripts().length;i++) {

        var controller =scripts()[i].getAttribute('controller');//此处加载html中配置的controller，如userCtrl

        if (controller) {

           required.push(controller);

        }

    }

    ;

})();

 

// 加载Controller模块，启动AngularJS应用

require(required, function () {

    angular.bootstrap(document, ["business-app"]);

});

 

angular-bootstrap.js 是js加载的启动器，html中所有引用的js由其统一加载，启动后先读取require-conf.js配置文件，后根据配置的controller去加载页面中用到的js文件。require-conf.js中定义的各种js文件如何被引用，controller将对其控制，userCtrl简单示例如下：

define([ 'core_business', 'jquery-cookie','customService' , 'routeConfig'], function() {

    angular.module("business").controller("userCtrl", userCtrl);

    function userCtrl($scope,$rootScope,$location,customManager) {

       $scope.login = function() {

       };

       document.onkeydown = function(event) {

           var e = event ? event : (window.event ?window.event :null);

           if (e.keyCode == 13) {

              $scope.login();

           }

       };

    };

});

上述代码中设置了需要引用的文件。

2、angularjs指令使用

通过灵活使用angular的directive可以定制各种风格的dom元素，也可以对页面一系列元素做统一封装，一次定义多次使用。如定义页面导航条：

此类展示内容只需要一个标签引用即可实现：

<business:header></business:header>，该标签如下定义：

define(['core_service','xenon-toggles'],function()

{

    angular.module("business.core").directive('businessHeader',function()

    {

       return {

           restrict : 'AE',

           templateUrl : 'resource.root/js/directive/html/header.html',

           replace : true,

           transclude : true,

           controller : function($scope, $element, $attrs,$rootScope)

           {

           $rootScope.$safeApply($scope,function(){

              $scope.navMenus=JSON.parse(window.localStorage.permittedUrls);

           });

           }

       };

    });

});

其中header.html里对导航页做了具体实现。通过business:header和header.html设置之后便可以在html中引用<business:header></business:header>实现导航条效果。

3、filter使用

Filter对于页面元素的即时过滤是非常便利的，通过filter功能可以实现排序、运算、筛选等能力。Filter经过一次定义之后可以被系统中其他模块复用，filter定义示例如下：

define([ 'core_business' ], function() {

    angular.module("business").filter('htmlFilter', ['$sce',function($sce) {

       return function(input) {

           return $sce.trustAsHtml(input);

       };;

    }]);

   

    angular.module("business").filter('searchFilter', ['$rootScope',function($rootScope) {

       return function(filterArray, keyword)

       {

           if (!(filterArrayinstanceof Array))

              return filterArray;

           if (typeof (keyword) =="undefined")

           {

              return filterArray;

           }

           var matchArray = [];

           keyword =keyword.toLocaleLowerCase();

           if (filterArray !=null && filterArray instanceof Array)

           {

              for (var i = 0; i < filterArray.length;i++)

              {

                  var jsonContent =  JSON.stringify(filterArray[i]);

                  jsonContent =jsonContent.toLocaleLowerCase();

                  if(jsonContent.indexOf(keyword)>-1){

                     matchArray.push(filterArray[i]);

                  }

              }

           }

           return matchArray;

       };

    }]);

});

以上代码可实现页面数据帅选的能力。如有菜单列表筛选数据对比。

 

Html中引用示例：

html中使用filter，需要在controller中引用定义filter的文件，可以直接实用angularjs提供的filter能力如排序、大小写转换等能力。