Onsenui does not work when using angular-resource

Onsen UI I would like to incorporate a search using the URL below into the minimum template.
Only onsenui or the search system works, perhaps because of the conflict.
http://www.walbrix.com/jp/blog/2014-01-angularjs-resource.html

<html lang="ja"ng-app="MyApp">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scale=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsenui.css">
    <link rel="stylesheet" href="components/monaca-onsenui/css/onsen-css-components.css">

    <script src="components/monaca-onsenui/js/angular/angular.js">/script>
    <script src="components/angular-resource/angular-resource.min.js">/script>
    <script src="components/monaca-onsenui/js/onsenui.js">/script>
    <script language="javascript">

    // If you erase the following two lines, the contents of json will be displayed (search system works)
      varmodule=ons.bootstrap('MyApp', ['onsen']);
      module.controller('AppController', function($scope){});

    // Erase below to reflect onsenui (search system does not work)
    var app = angular.module('MyApp', ['ngResource']);
    app.controller('MyController',['$scope','$resource', function($scope,$resource){
            var contents = $resource('./contents2.json');
            $scope.contents=contents.query();
        }]);

    </script>
    <title>Material Search</title>
  </head>
  <body>

<!--Top Page-->
    <ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
      <ons-toolbar>
        <div class="center">Search </div>
      </ons-toolbar>
      <br>

      <div class="container"ng-controller="MyController">
          <input type="test" class="search-input" style="width:96%;margin:10px auto;"placeholder="search"ng-model="postalNumber">
              <dl class="dl-horizontal">
            <dtng-repeat-start="entry in contents | filter:postalNumber" > {{entry[0]}} ({{entry[2]}}) </dt>
            <ddng-repeat-end>{{entry[3]}}</dd>
              </dl>
        </div>

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

The contents2.json statements are as follows:
[
["Material Name", "Material Type", "Material Description 1", "Material Description 2"]
]
I would appreciate it if you could let me know.
Thank you for your cooperation.

monaca onsen-ui angularjs

2022-09-30 14:12

1 Answers

// Delete the following two lines to see the contents of json (search system works)
varmodule=ons.bootstrap('MyApp', ['onsen']);
module.controller('AppController', function($scope){});

// Erase below to reflect onsenui (search system does not work)
var app = angular.module('MyApp', ['ngResource']);
app.controller('MyController',['$scope','$resource', function($scope,$resource){
    var contents = $resource('./contents2.json');
    $scope.contents=contents.query();
}]);

Why don't you make it look like this?

var module=angular.module('MyApp', ['onsen', 'ngResource'));
module.controller('MyController',['$scope','$resource', function($scope,$resource){
    var contents = $resource('./contents2.json');
    $scope.contents=contents.query();
}]);

2022-09-30 14:12

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656