【www.bbyears.com--jquery】
今天开发的时候遇到一个很奇怪的问题，先记录下来和简单的解决办法，以后慢慢分析，今天使用require.js来加在AngularJS的时候，只要require了Jquery AngularJS 第一次加载的时候就会报错，如果去掉ng-app="app" 中的 ‘app’ 就不报错，最后简单的解决方法，就是使用低版本的RequireJS,只要使用2.1版本以下就可以，等有时间分析一下原因。
现在可以用了，测试代码如下:
主页文件index.html
Widuu
- 首页
测试
你好
你好呀
Widuu 你好呀
<script type="text/javascript" data-main="js/main" src="http://libs.useso.com/js/require.js/2.0.6/require.min.js"></script>
<script type="text/javascript">
requirejs.config({
baseUrl: "js/",
paths: {
"angular": "http://libs.useso.com/js/angular.js/1.2.0rc3/angular.min",
"jquery" : "http://libs.useso.com/js/jquery/1.10.1/jquery.min",
"bootstrap" : "http://libs.useso.com/js/bootstrap/2.3.2/js/bootstrap.min",
},
shim :{
"bootstrap" : {
deps : [ "jquery" ],
exports : "bootstrap"
},
"angular": {"exports": "angular"},
},
deps:["bootstrap"]
});
</script>
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:
<script src="vendor/require/require.js"></script>
<script src="app/components/require.config.js"></script>
<script>require(["app"], function () {})</script>
###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;
});