一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

AngularJS+requirejs+juqery中出现的问题总结

时间:2015-10-29 编辑:简简单单 来源:一聚教程网

今天开发的时候遇到一个很奇怪的问题,先记录下来和简单的解决办法,以后慢慢分析,今天使用require.js来加在AngularJS的时候,只要require了Jquery AngularJS 第一次加载的时候就会报错,如果去掉ng-app='app' 中的 ‘app’ 就不报错,最后简单的解决方法,就是使用低版本的RequireJS,只要使用2.1版本以下就可以,等有时间分析一下原因。

现在可以用了,测试代码如下:

主页文件index.html



   
   
   
   
   
    css" href="http://libs.useso.com/js/bootstrap/2.3.2/css/bootstrap.min.css">
   







   

        你好呀
       


       


            Widuu 你好呀
       


   





JS文件 main.js

require(['angular'],function(angular){
    angular.module('app',[]).run(function($rootScope){
        $rootScope.title = "hello bootstrap";
    })
});

requirejs和angularjs加载js文件的问题

大概就是在require.comfig.js中配置require.js,然后gettext是一个angular 的module,translations是用gettext生成的js文件,看代码是属于gettext module的一部分,然后再app.js中,将gettext作为依赖模块,不知道这个translations.js通过requirejs怎么加载???
###index.js:
   
   
   
   
   
   
 
###require.config.js:require.config({
  baseUrl: 'app',
  // urlArgs: 'r=[@REV](/user/REV)@',
  paths: {
    config:                   '../config',
    angular:                  '../vendor/angular/angular',
    bootstrap:                '../vendor/bootstrap/bootstrap',
    jquery:                   '../vendor/jquery/jquery-1.8.0',
       'gettext':                '../vendor/angular-gettext',
      //'gettext-trans':          '../vendor/translations'
  },
  shim: {
    angular: {
      deps: ['jquery','config'],
      exports: 'angular'
    },
    bootstrap: {
      deps: ['jquery']
    },
      'gettext':            {
                                deps: ['angular', '../vendor/translations'],
                                exports: 'gettext'
                            },
      //'gettext-trans':      ['angular', 'gettext']
  },
  waitSeconds: 60,
});
###下面是translations.js文件:angular.module('gettext').run(['gettextCatalog', function (gettextCatalog) {
/* jshint -W100 */
    gettextCatalog.setStrings('zh_Hans', {"Advanced":"高级","Are you sure you want to delete the {{row._id}}
/* jshint +W100 */
}]);
###angular-gettext文件angular.module('gettext', []);
angular.module('gettext').constant('gettext', function (str) {
  return str;
});
angular.module('gettext').factory('gettextCatalog', [
  'gettextPlurals',
  '$http',
  '$cacheFactory',
  '$interpolate',
  '$rootScope',
  function (gettextPlurals, $http, $cacheFactory, $interpolate, $rootScope) {
    var catalog;/*不相关的删了*/
    return catalog;
  }
]);
angular.module('gettext').directive('translate', [
  'gettextCatalog',
  '$parse',
  '$animate',
  function (gettextCatalog, $parse, $animate) {
    // Trim polyfill for old browsers (instead of jQuery)
    // Based on AngularJS-v1.2.2 (angular.js#620)
    return {
        /*不相关的删了*/
      }
    };
  }
]).directive('translate', [
  '$compile',
  function ($compile) {
    return {
      restrict: 'A',
      priority: -350,
      link: function (scope, element) {
        var msgstr = element.prop('__msgstr');
        element.html(msgstr);
        $compile(element.contents())(scope);
      }
    };
  }
]);
angular.module('gettext').filter('translate', [
  'gettextCatalog',
  function (gettextCatalog) {
    return function (input) {
      return gettextCatalog.getString(input);
    };
  }
]);
});
###然后是angularjs的入口app.js:define([
  'angular',
  'jquery',
  'lodash',
  'require',
  'bindonce',
    'gettext',
   // 'gettext-trans'
],
function (angular, $, _, appLevelRequire, gettext) {
  "use strict";
  var app = angular.module('myapp', [gettext]),
    pre_boot_modules = [],
    register_fns = {};
  app.useModule = function (module) {
    if (pre_boot_modules) {
      pre_boot_modules.push(module);
    } else {
      _.extend(module, register_fns);
    }
    return module;
  };
  app.config(function ($routeProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
    $routeProvider
      .when('/dashboard', {
        templateUrl: 'app/partials/dashboard.html',
      })
    // this is how the internet told me to dynamically add modules :/
    register_fns.controller = $controllerProvider.register;
    register_fns.directive  = $compileProvider.directive;
    register_fns.factory    = $provide.factory;
    register_fns.service    = $provide.service;
    register_fns.filter     = $filterProvider.register;
  }).run(function(gettextCatalog){
          gettextCatalog.currentLanguage = 'zh_CN';
          gettextCatalog.debug = true;
      });

  var apps_deps = [
    '$strap.directives',
    'ngSanitize',
    'pasvaz.bindonce'
  ];

  // load the core components
  require([
    'controllers/all',
    'directives/all',
    'filters/all'
  ], function () {
    // bootstrap the app
    angular
      .element(document)
      .ready(function() {
        $('html').attr('ng-controller', 'DashCtrl');
        angular.bootstrap(document, apps_deps)
          .invoke(['$rootScope', function ($rootScope) {
            _.each(pre_boot_modules, function (module) {
              _.extend(module, register_fns);
            });
            pre_boot_modules = false;
            $rootScope.requireContext = appLevelRequire;
            $rootScope.require = function (deps, fn) {
              var $scope = this;
              $scope.requireContext(deps, function () {
                var deps = _.toArray(arguments);
                // Check that this is a valid scope.
                if($scope.$id) {
                  $scope.$apply(function () {
                    fn.apply($scope, deps);
                  });
                }
              });
            };
          }]);
      });
  });
  return app;
});

热门栏目