angularJsプロジェクトとrequireJsの統合方法
8631 ワード
angularjs、requirejsの基礎知識についてはご自身でお勉強ください
一、簡単な事例の項目目録は以下の通りである.
-index.html
-scriptsフォルダ
--コントロールフォルダ
--- mianController.js
--- controller1.js
---controller2.js
--directivesフォルダ
---mainDirective.js
---directive.js
--app.js
--router.js
--main.js
二、トップページ
まずあなたのindex.htmlは次のようになります.
トップページでhtmlはrequireJsライブラリファイルを導入し、エントリ関数mainを指定するだけです.jsは、angularjsアプリケーションを手動で起動するので、ここではトップページにng-app='webApp'を追加する必要はありません.
三、配置mian.js
requireについてconfig()の構成は大体以下の通りです(自分のプロジェクトの状況に応じて、ここでは簡単に構成しました)、
だから全体的にmain.jsこのファイルが行うことは、requirejsがすべてのファイルを非同期でロードすることです.
その中のdeps:['bootstrap']に気づいたのは、bootstrapを先にロードすることを教えてくれたことだ.jsファイル.
四、手動でangularjs応用を起動する
そしてbootstrap.jsは私がangularjsアプリケーションを手動で起動するために使用したもので、コードは以下の通りです.
ここではappに依存する.jsとrouter.js、この2つのファイルを見てみましょう.
五、ウェブサイトのルート設定
ここではui-routerを使用します.だから私たちのrouterjsは主にルーティングを定義するために使用されるべきで、ui-routerの構成については自分で関連知識を見てください.ここでは簡単に省略します.
六、angular.module
この時、普段angularjsアプリを書いているのを見てみましょう.
だから私たちのapp.jsはそうすべきだ
その中で私たちのapp.jsに依存するmainControllerとmainDirectiveは主にangularのコントローラと命令をロードするために使用される
七、コントローラ
私たちのmainControllerjsはこうです
主に各コントローラをロードするために使用されます(すべてのコントローラがこのファイルにロードされます).それ以外は必要ありません.コントローラファイルがたくさんあるので、必要に応じて追加できます.
controller1.jsファイル(他のコントローラcontroller 2ファイルと類似)
その中でmoduleに依存する.js
そしてmodule.jsは以下の通り
八、指令
同じ理屈だjsも似ています.リファレンスコントローラ
九、その他
一、簡単な事例の項目目録は以下の通りである.
-index.html
-scriptsフォルダ
--コントロールフォルダ
--- mianController.js
--- controller1.js
---controller2.js
--directivesフォルダ
---mainDirective.js
---directive.js
--app.js
--router.js
--main.js
二、トップページ
まずあなたのindex.htmlは次のようになります.
<!doctype html>
<!-- <html xmlns:ng="//angularjs.org" id="ng-app" ng-app="webApp"> -->
<htmls>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>
<body>
<!-- html -->
<script type='text/javascript' src='../scripts/lib/require.js' data-main='../scripts/main.js'></script>
</body>
</html>トップページでhtmlはrequireJsライブラリファイルを導入し、エントリ関数mainを指定するだけです.jsは、angularjsアプリケーションを手動で起動するので、ここではトップページにng-app='webApp'を追加する必要はありません.
三、配置mian.js
require.config({
paths:{
//
'jquery': '//cdn.staticfile.org/jquery/1.10.2/jquery.min',
'angular': '//cdn.staticfile.org/angular.js/1.2.10/angular.min',
'angular-route': '//cdn.staticfile.org/angular-ui-router/0.2.8/angular-ui-router.min','domReady': '//cdn.staticfile.org/require-domReady/2.0.1/domReady.min',
//js
'bootstrap': "../scripts/bootstrap",
'app': "../scripts/app",
'router': "../scripts/router"
..... js ，
},
shim:{
'angular':{
exports:'angular'
},
'angular-route':{
deps:['angular'],
exports: 'angular-route'
}
},
deps:['bootstrap'],
urlArgs: "bust=" + (new Date()).getTime() // ，
});requireについてconfig()の構成は大体以下の通りです(自分のプロジェクトの状況に応じて、ここでは簡単に構成しました)、
だから全体的にmain.jsこのファイルが行うことは、requirejsがすべてのファイルを非同期でロードすることです.
その中のdeps:['bootstrap']に気づいたのは、bootstrapを先にロードすることを教えてくれたことだ.jsファイル.
四、手動でangularjs応用を起動する
そしてbootstrap.jsは私がangularjsアプリケーションを手動で起動するために使用したもので、コードは以下の通りです.
define(['require',
'angular',
'angular-route',
'jquery',
'app',
'router'
],function(require,angular){
'use strict';
require(['domReady!'],function(document){
angular.bootstrap(document,['webapp']);
});
});ここではappに依存する.jsとrouter.js、この2つのファイルを見てみましょう.
五、ウェブサイトのルート設定
ここではui-routerを使用します.だから私たちのrouterjsは主にルーティングを定義するために使用されるべきで、ui-routerの構成については自分で関連知識を見てください.ここでは簡単に省略します.
define(["app"],
function(app){
return app.run([
'$rootScope',
'$state',
'$stateParams',
function ($rootScope, $state, $stateParams) {
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams
}
])
.config(function($stateProvider, $urlRouterProvider, $locationProvider, $uiViewScrollProvider){
// state
$uiViewScrollProvider.useAnchorScroll();
//
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home',{
//abstract: true,
url:'/home',
views: {
'main@': {
templateUrl: '../view/home.html'
}
}
})
})六、angular.module
この時、普段angularjsアプリを書いているのを見てみましょう.
var app = angular.module("xxx",["xxx"]);
app.controller("foo",function($scope){});
app.directive(...)だから私たちのapp.jsはそうすべきだ
define(["angular",
'mainController',
'mainDirective'
],function(angular){
return angular.module("webapp",['ui.router','ngStorage','ngSanitize','webapp.controllers','webapp.directive']);
})その中で私たちのapp.jsに依存するmainControllerとmainDirectiveは主にangularのコントローラと命令をロードするために使用される
七、コントローラ
私たちのmainControllerjsはこうです
define(['controller1','controller2'],function(){});主に各コントローラをロードするために使用されます(すべてのコントローラがこのファイルにロードされます).それ以外は必要ありません.コントローラファイルがたくさんあるので、必要に応じて追加できます.
controller1.jsファイル(他のコントローラcontroller 2ファイルと類似)
define(['../scripts/controller/module.js','jquery'],function(controllers,$){
'use strict';
controllers.controller('controller1',function($scope){
// js
})
})その中でmoduleに依存する.js
そしてmodule.jsは以下の通り
define(['angular'], function (angular) {
'use strict';
return angular.module('webapp.controllers', []);
});八、指令
同じ理屈だjsも似ています.リファレンスコントローラ
九、その他