AngularJS+requirejs+juqery中出現的問題總結

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

今天開發的時候遇到一個很奇怪的問題，先記錄下來和簡單的解決辦法，以後慢慢分析，今天使用require.js來加在AngularJS的時候，只要require了Jquery AngularJS 第一次載入的時候就會報錯，如果去掉ng-app='app' 中的 ‘app’ 就不報錯，最後簡單的解決方案，就是使用低版本的RequireJS,只要使用2.1版本以下就可以，等有時間分析一下原因。

現在可以用了，測試代碼如下:

首頁檔案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-scale=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>

<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" >Widuu</a>
            <ul class="nav">
                <li class="active"><a href="">首頁</a></li>
                <li><a href="">測試</a></li>
                <li><a href="">你好</a></li>
            </ul>
        </div>
    </div>
</div>


<div class="container" style="margin-top:50px;">
    <div class="row">
        你好呀
        <p>
        <h1>
            Widuu 你好呀
        </h1>
    </div>
</div>

</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>

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:<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    
    <script src="vendor/require/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/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;
});

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More