[monaca][onsenui][AngularJS][ui-router]最小化的onsenui/ui-router项目

2 年 ago

新, 韵

3 minutes

为了同时在Monaca中引入Onsen UI和UI-Router，需要额外的一些步骤，所以我将项目的最低配置转化为了步骤。

只安装了ui-router的情况下

在只导入「angular-ui-router」的「Onsen UI V2 Angular 1 Minimum」中，会出现以下错误。

原因）

  <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」，创建一个新项目。

2. 引入angularjs的组件

在「JS/CSS组件」中搜索并添加”angular”。

该版本是截至2017年9月21日最新可用的版本，为”1.6.6″。
无法安装build-xxx。

导入的文件是1个。

components/angular/angular.js

※ 听说.min.js已经进行了优化和压缩，所以日志看起来并没有出现。
在构建时，加载不含.min的js文件比较方便，可以方便地查看日志。

3. 引入Onsen UI的组件

搜索”onsenui”并点击”添加”。
因为我对”Onsen UI（Monaca版本）”的区别不太清楚，所以没有进行安装。

我会检查并保存4个文件，其中包括js和css文件。

components/onsenui/css/onsenui.css

4. 删除lib设置 lib

为了反映onsenui中的components，我们将删除与lib相关的配置。

4.1. 删除lib目录

删除lib目录。

删除index.html文件中的lib加载设置。

删除index.html中lib文件夹的加载设置。

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

此时，没有出现任何错误。

5. 引入angular-ui-router的组件

在「JS/CSS组件」中搜索并添加「angular-ui-router」。

选择并保存「angular-ui-router」。

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

到目前为止，引导过程已经完成。
在此时点，loader.js的加载顺序如下所示。

angular-ui-router

接下来，我们将引入一个简单的代码作为确认使用。

6. 确认使用代码引入

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'
            })

    }]);

<!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的用法
(来源：引用元）

源代码

我把它上传到了Github。你可以下载zip文件，然后在monaca中导入，就可以直接使用了。