Improve this

AngularJS 1.x

Before reading this section, we suggest you reading Getting Started and Fundamentals to grasp the basics of Onsen UI. Don’t worry, it won’t take more than 5 minutes.

AngularJS bindings for Onsen UI provide AngularJS directives that enhance the core Web Components and expose a AngularJS-like API to interact with them.

Setup AngularJS 1.x bindings

AngularJS 1.x bindings for Onsen UI is separated from the core but distributed in the same package. To load it in your project, please include onsenui.js and angular.js before angular-onsenui.js.

<link rel="stylesheet" href="onsenui.css"/>
<link rel="stylesheet" href="onsen-css-components.css"/>
<script src="angular.min.js"></script>
<script src="onsenui.min.js"></script>
<script src="angular-onsenui.min.js"></script>

After loading angular-onsenui.js, the onsen AngularJS module is ready to use.

var module = angular.module('my-app', ['onsen']);
module.controller('AppController', function() { });

Hello World with AngularJS 1.x

To get started, let’s create a simple Hello World application. The following sample code is a React version of Onsen UI HelloWorld.

<!DOCTYPE html>
<html lang="en" ng-app="my-app">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="onsenui.css"/>
  <link rel="stylesheet" href="onsen-css-components.css"/>
  <script src="angular.min.js"></script>
  <script src="onsenui.min.js"></script>
  <script src="angular-onsenui.min.js"></script>
</head>

<body>
  <ons-page ng-controller="PageController">
    <ons-toolbar>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button ng-click="alert('Hello World!')">
        Click me!
      </ons-button>
    </p>
  </ons-page>

  <script>
    var module = angular.module('my-app', ['onsen']);
    module.controller('PageController', function($scope) {
      $scope.alert = function(message) {
        ons.notification.alert(message);
      };
    });
  </script>
</body>
</html>

Using Onsen UI into your app is really simple. Just include each element in your HTML and plug funcionality from the controller with the standard ng-* attributes.

Some components have methods and properties. Use the var attribute to save a reference into a scoped variable. For example, the following <ons-navigator var="myNavigator"> can be accessed via $scope.myNavigator variable, which exists in the current $scope object.

For more information about AngularJS 1.x itself, we recommend reading the official AngularJS docs.