最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
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;
});
-
上一个: js事件冒泡和事件委托的详解
-
下一个: js模块加载seajs框架的教程
相关文章
- AngularJS监听路由变化的方法 06-02
- AngularJS表格添加序号的方法 05-18
- 利用angularjs1.4制作的简易滑动门效果 05-10
- AngularJS执行流程详解 04-14
- AngularJS 使用ng-repeat报错 [ngRepeat:dupes] 02-08
- AngularJS入门教程:Helloworld 12-26