I encountered a very strange problem during development today. I first recorded it and made a simple solution. Later I analyzed it slowly. Today I use require. when js is added to AngularJS, an error will be reported when Jquery AngularJS is loaded for the first time. If 'app' in ng-app = 'app' is removed, no error will be reported, the last simple solution is to use RequireJS of earlier versions. You only need to use RequireJS of earlier versions than 2.1. Wait for time to analyze the cause.
The test code is as follows:
Master Page file index.html
<! DOCTYPE html>
<Html lang = "en" ng-app = 'app'>
<Head>
<Meta charset = "UTF-8"/>
<Title ng-bind = "title"> </title>
<Meta name = "viewport" content = "width = device-width, initial-size = 1.0"/>
<Meta name = "keywords" content = "">
<Meta name = "description" content = "">
<Meta name = "author" content = "widuu">
<Link rel = "stylesheet" type = "text/css" href = "http://libs.useso.com/js/bootstrap/2.3.2/css/bootstrap.min.css">
<Style type = "text/css">
. Navbar {
Margin-top: 20px;
}
Body {
Background-color: # 62E2EF;
}
</Style>
</Head>
<Body>
<! -- Navigation bar start -->
<Div class = "navbar-fixed-top">
<Div class = "navbar-inner">
<Div class = "container">
<A class = "brand"> Widuu </a>
<Ul class = "nav">
<Li class = "active"> <a href = ""> homepage </a> </li>
<Li> <a href = ""> Test </a> </li>
<Li> <a href = ""> hello </a> </li>
</Ul>
</Div>
</Div>
</Div>
<! -- Navigation bar end -->
<! -- Container start -->
<Div class = "container" style = "margin-top: 50px;">
<Div class = "row">
Hi!
<P>
<H1>
Hello, Widuu.
</H1>
</Div>
</Div>
<! -- Container end -->
</Body>
<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>
</Html>
Main. JS file
Require (['angular '], function (angular ){
Angular. module ('app', []). run (function ($ rootScope ){
$ RootScope. title = "hello bootstrap ";
})
});
Question about loading js files in requirejs and angularjs
Probably in require. comfig. configure require in js. js, then gettext is an angular module, and translations is a js file generated using gettext. The code is part of the gettext module, and then the app. in js, gettext is used as the dependent module and the translations are unknown. how does js load through requirejs ???
### Index. js: <Meta charset = "utf-8">
<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">
<Meta name = "viewport" content = "width = device-width">
<! -- Load the root require context -->
<Script src = "vendor/require. js"> </script>
<Script src = "app/components/require. config. js"> </script>
<Script> require (['app'], function () {}) </script>
<Style>
</Style>
</Head>
### Require. config. js: require. config ({
BaseUrl: 'app ',
// UrlArgs: 'r = [@ REV] (/user/REV )@',
Paths :{
Config: '../config ',
Angular: '../vendor/angular ',
Bootstrap: '../vendor/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,
});
### The following is the translations. js file: angular. module ('gettext'). run (['gettextcatalog ', function (gettextCatalog ){
/* Jshint-W100 */
GettextCatalog. setStrings ('zh _ Hans ', {"Advanced": "Advanced", "Are you sure you want to delete the {row. _ id }}
/* Jshint + W100 */
}]);
### Angular-gettext file 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;/* irrelevant deleted */
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 {
/* Irrelevant deletion */
}
};
}
]). 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 );
};
}
]);
});
### Next is angularjs entry 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 pai_deps = [
'$ Activities. Ctives VES ',
'Ngsanitize ',
'Pasvaz. bindonce'
];
// Load the core components
Require ([
'Controllers/all ',
'Ctictives/all ',
'Filters/all'
], Function (){
// Bootstrap the app
Angular
. Element (document)
. Ready (function (){
$ ('HTML '). attr ('NG-controller', 'dashctrl ');
Angular. bootstrap (document, pai_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;
});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
