[monaca][onsenui][AngularJS][ui-router]onsenui/ui-router最小限プロジェクト

monacaでonsenuiとui-routerを同時に導入するには、ちょっとひと手間かかるので、最低限プロジェクトの構成方法を手順化してみました。

# ui-routerだけ導入した場合

「Onsen UI V2 Angular 1 Minimum」に「angular-ui-router」だけ導入すると、以下エラーが発生します。

![minimum01.png](https://qiita-image-store.s3.amazonaws.com/0/184714/550459aa-32d6-0f1f-5b3d-6835c59abf17.png)

## 原因）

```index.html
  <script src="components/loader.js"></script>
  <script src="lib/angular/angular.min.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/onsenui/js/angular-onsenui.min.js"></script>
```

javascriptの読み込み順が、本来読み込まれるべき順番と異なるため（だと思います）
loader.jsには、「Cordova (PhoneGap) Loader」等、最初に読み込まれるべきライブラリが入っているため、後に持ってくることはできません。


# onsenui/ui-routerプロジェクトの作成方法

## 1. 新規プロジェクト作成

「Onsen UI V2 JS Minimum」を選択し、新規プロジェクトを作成します。

![minimum02.png](https://qiita-image-store.s3.amazonaws.com/0/184714/b92630c2-8633-d643-9e3e-380fc464ee81.png)

## 2. angularjsのcomponents導入

「JS/CSSコンポーネント」から「angular」を検索し、追加します。

![minimum05.png](https://qiita-image-store.s3.amazonaws.com/0/184714/71817551-3df8-6172-2bd3-e132ccbb2d10.png)

![minimum09.png](https://qiita-image-store.s3.amazonaws.com/0/184714/e6fbe33a-5205-86b0-6cb1-43a50e7a8c4e.png)

バージョンは、2017/09/21時点で「1.6.6」が導入可能な最新バージョンです。
build-xxxというのは導入できません。

![minimum10.png](https://qiita-image-store.s3.amazonaws.com/0/184714/9a6b04b8-6709-5047-e9a4-77626afb9eeb.png)

導入するファイルは1件

* components/angular/angular.js 

※min.jsは最適化、圧縮されているらしく、ログがまず出てきません。
　構築時には、min抜きのjsファイルを読み込んだ方がログが確認できて便利です。
　（以下同様）

![minimum12.png](https://qiita-image-store.s3.amazonaws.com/0/184714/4461710f-ef8c-3c08-bbc4-c9ba8abe3605.png)


## 3. onsenuiのcomponents導入

「onsenui」を検索し、「追加」します。
＃「Onsen UI (Monaca Version)」は違いがよく分からなかったので導入してません。

![minimum04.png](https://qiita-image-store.s3.amazonaws.com/0/184714/1dcaf65c-9302-6d2d-6091-e6c4e1772e5a.png)

![loading09.png](https://qiita-image-store.s3.amazonaws.com/0/184714/31728d47-3065-54a2-0ea1-adbe355b6fbe.png)

![loading10.png](https://qiita-image-store.s3.amazonaws.com/0/184714/6fed47fe-906e-7455-f91b-0c5d14670925.png)

jsとcssの計4件をチェックし、保存します。

* components/onsenui/js/angular-onsenui.js
* components/onsenui/js/onsenui.js
* components/onsenui/css/onsen-css-components.css
* components/onsenui/css/onsenui.css

## 4. lib設定の削除

componentsのonsenuiを反映させるため、lib関連の設定を削除します。

### 4.1. libディレクトリの削除

libディレクトリを削除します。

![minimum03.png](https://qiita-image-store.s3.amazonaws.com/0/184714/02bcabd8-e757-f88b-68d9-67db72085028.png)

### 4.2. index.htmlのlib読み込み設定削除

index.htmlのlib以下読み込み設定も削除します。

```index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">

  <script>
    ons.ready(function() {
      console.log("Onsen UI is ready!");
    });
  </script>
</head>
<body>
  This is a template for Onsen UI app.
  
  <ons-button>BUTTON</ons-button>
</body>
</html>
```

この時点で、エラーは出ていません。

![minimum15.png](https://qiita-image-store.s3.amazonaws.com/0/184714/cec49329-f7de-2675-f912-152a92cff67d.png)

## 5. angular-ui-routerのcomponents導入

「JS/CSSコンポーネント」から「angular-ui-router」を検索し、追加します。

![minimum07.png](https://qiita-image-store.s3.amazonaws.com/0/184714/849f3fec-9363-3386-4dd9-d0c1021ead31.png)

![loading05.png](https://qiita-image-store.s3.amazonaws.com/0/184714/ab9aeb9f-2d8f-093f-0cb1-314f8c4829be.png)

「angular-ui-router」を指定し、保存します。

* components/angular-ui-router/release/angular-ui-router.js

![minimum17.png](https://qiita-image-store.s3.amazonaws.com/0/184714/56d7b821-3a7a-f562-71b0-ef567bb99ab1.png)

ここまでで導入手順は完了です。
この時点での、loader.jsの読み込み順は以下のようになっております。

* monaca-cordova-loader
* monaca-core-utils
* angular
* onsenui
* angular-onsenui
* angular-ui-router


この後、確認用に簡単なコードを導入していきます。

## 6. 確認用コード導入

```script.js
var myApp = angular.module('MyApp', ['onsen', 'ui.router']);

myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

		$stateProvider
			.state('page-A', {
				url: '/pageA',
				templateUrl: 'pageA.html'
			})
			.state('page-B', {
				url: '/pageB',
				templateUrl: 'pageB.html'
			})
		
	}]);
```

```index.html
<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <script src="script.js"></script>

  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
</head>
<body ng-app="MyApp">

	<ons-page>
		<ons-toolbar>
			<div class="center">Minimum</div>
		</ons-toolbar>
		
		<ons-button ui-sref="page-A">pageA</ons-button>
		<ons-button ui-sref="page-B">pageB</ons-button>
		
		<div style="padding: 20px 10px;" ui-view></div>
		
		<script id="pageA.html" type="text/ng-template">
			<div>pageAだよ</div>
		</script>
		<script id="pageB.html" type="text/ng-template">
			<div>pageBだよ</div>
		</script>

	</ons-page>
	
</body>	
</html>
```

引用元）[Angularjs UI Routerの使い方](https://qiita.com/nogson/items/63d8f007fe987e2dfe9e) 

![minimum18.png](https://qiita-image-store.s3.amazonaws.com/0/184714/d4d858c4-eef5-e22b-8792-d3e79242fd61.png)

# ソースコード

Githubにあげてみました。zipをDLして、monacaにインポートすると、そのまま使えます。

https://github.com/miz21358/ui-router-minimum