require.js로 리소스로드하기

require.js로 헤더에 리소스 또는 리소스를로드하고 싶습니다. 내가 어떻게 할 수 있니? 여기 내 컨트롤러 및 색인에 대한 현재 코드가 있습니다. 나는 angularjs에 익숙하지 않으며이 도전 과제를 해결하는 데 도움을 주셔서 감사합니다.require.js로 리소스로드하기

Require.js :

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="UTF-8"> 
<title>App Demo</title> 
<script data-main="js/main" src="js/require.js"></script> 
<script src="js/controllers.js"></script> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div class="main" ng-view></div> 
</body> 
</html>

App.js :

define(function() { 
var myApp = angular.module('myApp', [ 
'ngRoute', 
'artistControllers' 
]); 

myApp.config(['$routeProvider', function($routeProvider) { 
$routeProvider. 
when('/list', { 
templateUrl: 'partials/list.html', 
controller: 'ListContrIndex.htmloller' 
}). 
when('/details/:itemId', { 
templateUrl: 'partials/details.html', 
controller: 'DetailsController' 
}). 
otherwise({ 
redirectTo: '/list' 
}); 
}]); 
    return app; 
    });

Controller.js : JS에 위치/

require.config({ 
    baseUrl: "js",  
    paths: { 
     'angular': '.../lib/angular.min', 
     'angular-route': '.../lib/angular-route.min', 
     'angularAMD': '.../lib/angular-animate.min.js' 
    }, 
    shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] }, 
    deps: ['app'] 
    });

에 Index.html require.js

define(['app'], function (app) { 
var artistControllers = angular.module('artistControllers', ['ngAnimate']); 

artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) { 
$http.get('js/data.json').success(function(data) { 
$scope.artists = data; 
$scope.artistOrder = 'name'; 
}); 
}]); 

artistControllers.controller('DetailsController', ['$scope', '$http','$routeParams', function($scope, $http, $routeParams) { 
$http.get('js/data.json').success(function(data) { 
$scope.artists = data; 
$scope.whichItem = $routeParams.itemId; 

if ($routeParams.itemId > 0) { 
    $scope.prevItem = Number($routeParams.itemId)-1; 
} else { 
    $scope.prevItem = $scope.artists.length-1; 
} 

if ($routeParams.itemId < $scope.artists.length-1) { 
    $scope.nextItem = Number($routeParams.itemId)+1; 
} else { 
    $scope.nextItem = 0; 
} 

}); 
}]);

}); 스크립트를로드 할 파일을 지정하는

출처

2016-10-17 Ringodabad

<스크립트 데이터 메인 = "스크립트/주"SRC = "JS/require.js">이 코드를 – Mahi

에 추가하십시오.이 샘플 코드는 http://embed.plnkr.co/Mk2qHB8zUB28PDViNjv4/ – Thaadikkaaran

사용 data-main="path/file.js" ..

출처

2016-10-17 07:24:36

<!doctype html> 
<html lang="en" ng-app="myApp"> 
<head> 
<meta charset="UTF-8"> 
<title>App Demo</title> 
<script data-main="js/main" src="js/require.js"></script> 
<link rel="stylesheet" href="css/style.css"> 
</head> 
<body> 
    <div class="main" ng-view></div> 
</body> 
</html>

과 main.js에서

<script data-main="path/file.js" src="js/require.js"></script>

require.config({ 
     baseUrl: "js",  
     paths: { 
      'angular': '.../lib/angular.min', 
      'angular-route': '.../lib/angular-route.min', 
      'angularAMD': '.../lib/angular-animate.min.js' 
     }, 
     shim: { 'angular-animate.min': ['angular'], 'angular-route': ['angular'] }, 
     deps: ['app'] 
     }); 

require(['requireModule,'requireModule2'],function(requireModule,requireModule2){ 
//code to start the application 
})

에 코드를 통해 응용 프로그램을 시작하는 것을 허용하지 않습니다

요구 사항. define AngularJS Components as RequireJS Modules

출처

2016-10-17 07:31:48

을 참조 할 수 있습니다. 아직도 문제는 무엇입니까? – Ringodabad

main.js 파일을 만들었습니까? –

RequireJS는 baseUrl을 기준으로 모든 코드를로드합니다. baseUrl은 일반적으로 페이지에로드 할 최상위 스크립트의 데이터 주 속성에 사용되는 스크립트와 동일한 디렉토리로 설정됩니다. data-main 속성은 require.js가 스크립트로드를 시작하기 위해 검사 할 특별한 속성입니다. 이 예제는 스크립트의 base을 끝낼 것이다,이에 대한 자세한 내용은

<!--This sets the baseUrl to the "scripts" directory, and 
loads a script that will have a module ID of 'main'--> 
<script data-main="scripts/main.js" src="scripts/require.js"/>

확인 Loading JS Files - Require.js

출처

2016-10-17 08:49:37

require.js로 리소스로드하기

답변

관련 문제