Create Your First Mobile App with Ionic and AngularJS

Step by Step Guide to Create Mobile App with Ionic And Angular Js

In the previous section we have learned how the ionic framework is imported into the project.

Next we will show you how to create an ionic APP application.

The creation of APP uses HTML, CSS, and Javascript to build, so we can create a www directory and create the index.html file in the directory as follows:

 <! DOCTYPE html>
 <html>
   <head>
     <meta charset = "utf-8">
     <title> Todo </ title>
     <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width">

     <link href = "lib / ionic / css / ionic.css" rel = "stylesheet">

     <script src = "lib / ionic / js / ionic.bundle.js"> </ script>

     <! - files included in the APP created using Cordova / PhoneGap, provided by Cordova / PhoneGap, (display 404 during development) ->
     <script src = "cordova.js"> </ script>
   </ head>
   <body>
   </ body>
 </ html>

In the above code, we introduced Ionic CSS files, Ionic JS files, and Ionic AngularJS extended ionic.bundle.js (ionic.bundle.js).

The ionic.bundle.js file already contains the Iular core JS, AngularJS, Ionic's AngularJS extension, which can be called from the lib / js / angular directory if you need to introduce other Angular modules.

cordova.js is generated when using Cordova / PhoneGap to create an application and does not need to be introduced manually. You can find the file in the Cordova / PhoneGap project, so the display 404 is normal during the development process.

Create APP

Then we have to achieve a header, sidebar, list and other applications, the design is as follows:

Create sidebar

The sidebar is created using the ion-side-menus controller.

Edit the index.html file we created earlier and modify the contents of <body> as follows:

 <body>
   <ion-side-menus>
     <ion-side-menu-content>
     </ ion-side-menu-content>
     <ion-side-menu side = "left">
     </ ion-side-menu>
   </ ion-side-menus>
 </ body>

Controller Resolution:

ion-side-menus: is a container with a sidebar menu that can be expanded by clicking the button or sliding the screen.
ion-side-menu-content : Contains the main contents of the container, you can slide the screen to expand the menu.
ion-side-menu : Contains the container for the sidebar.

Initialize APP

Next we create a new AngularJS module and initialize it in www / js / app.js:

 angular.module ('todo', ['ionic'])

Then add the ng-app attribute to our body tag:

 <body ng-app = "todo">

In the index.html file <script src = "cordova.js"> </ script> above the introduction of app.js file:

 <script src = "js / app.js"> </ script>

Modify the contents of the index.html file body tag, as shown below:

 <body ng-app = "todo">
   <ion-side-menus>

     <! - Center Content ->
     <ion-side-menu-content>
       <ion-header-bar class = "bar-dark">
         <h1 class = "title"> Todo </ h1>
       </ ion-header-bar>
       <ion-content>
       </ ion-content>
     </ ion-side-menu-content>

     <! - left menu ->
     <ion-side-menu side = "left">
       <ion-header-bar class = "bar-dark">
         <h1 class = "title"> Projects </ h1>
       </ ion-header-bar>
     </ ion-side-menu>

   </ ion-side-menus>
 </ body>

try it"

The above steps we have completed the application of the basic API.

Create a list

First create a controller TodoCtrl :

 <body ng-app = "todo" ng-controller = "TodoCtrl">

In the app.js file, use the controller to define the list data:

 angular.module ('todo', ['ionic'])

 .controller ('TodoCtrl', function ($ scope) {
   $ scope.tasks = [
     {title: 'rookie tutorial'},
     {title: 'www.runoob.com'},
     {title: 'rookie tutorial'},
     {title: 'www.runoob.com'}
   ];
 });

In the index.html page data list we use Angular ng-repeat to iterate the data:

 <! - Center Content ->
 <ion-side-menu-content>
   <ion-header-bar class = "bar-dark">
     <h1 class = "title"> Todo </ h1>
   </ ion-header-bar>
   <ion-content>
     <! - list ->
     <ion-list>
       <ion-item ng-repeat = "task in tasks">
         {{task.title}}
       </ ion-item>
     </ ion-list>
   </ ion-content>
 </ ion-side-menu-content>

After modifying the index.html body tag the code is as follows:

  <body ng-app = "todo" ng-controller = "TodoCtrl">
     <ion-side-menus>

     <! - Center Content ->
     <ion-side-menu-content>
       <ion-header-bar class = "bar-dark">
         <h1 class = "title"> Todo </ h1>
       </ ion-header-bar>
       <ion-content>
         <! - list ->
         <ion-list>
           <ion-item ng-repeat = "task in tasks">
             {{task.title}}
           </ ion-item>
         </ ion-list>
       </ ion-content>
     </ ion-side-menu-content>

     <! - left menu ->
     <ion-side-menu side = "left">
       <ion-header-bar class = "bar-dark">
         <h1 class = "title"> Projects </ h1>
       </ ion-header-bar>
     </ ion-side-menu>

     </ ion-side-menus>
     <script src = "http://www.runoob.com/static/ionic/js/app.js"> </ script>
     <script src = "cordova.js"> </ script>
 </ body>

try it"

Create an add page

Modify the index.html in the </ ion-side-menus> add the following code:

 <script id = "new-task.html" type = "text / ng-template">

   <div class = "modal">

     <! - Modal header bar ->
     <ion-header-bar class = "bar-secondary">
       <h1 class = "title"> New Task </ h1>
       <button class = "button button-clear button-positive" ng-click = "closeNewTask ()"> Cancel </ button>
     </ ion-header-bar>

     <! - Modal content area ->
     <ion-content>

       <form ng-submit = "createTask (task)">
         <div class = "list">
           <label class = "item item-input">
             <input type = "text" placeholder = "What do you need to do?" ng-model = "task.title">
           </ label>
         </ div>
         <div class = "padding">
           <button type = "submit" class = "button button-block button-positive"> Create Task </ button>
         </ div>
       </ form>

     </ ion-content>

   </ div>

 </ script>

In the above code, we defined the new template page with <script id = "new-task.html" type = "text / ng-template"> .

The createTask (task) function is triggered when the form is submitted.

ng-model = "task.title" assigns the form's input data to the title property of the task object.

Modify the contents of <ion-side-menu-content> , the code is as follows:

 <! - Center Content ->
 <ion-side-menu-content>
 <ion-header-bar class = "bar-dark">
   <h1 class = "title"> Todo </ h1>
   <! - Add button ->
   <button class = "button button-icon" ng-click = "newTask ()">
     <i class = "icon ion-compose"> </ i>
   </ button>
 </ ion-header-bar>
 <ion-content>
   <! - list ->
   <ion-list>
     <ion-item ng-repeat = "task in tasks">
       {{task.title}}
     </ ion-item>
   </ ion-list>
 </ ion-content>
 </ ion-side-menu-content>

app.js file, the controller code is as follows:

 angular.module ('todo', ['ionic'])

 .controller ('TodoCtrl', function ($ scope, $ ionicModal) {
   $ scope.tasks = [
     {title: 'rookie tutorial'},
     {title: 'www.runoob.com'},
     {title: 'rookie tutorial'},
     {title: 'www.runoob.com'}
   ];

   // create and load the model $ ionicModal.fromTemplateUrl ('new-task.html', function (modal) {
     $ scope.taskModal = modal;
   }, {
     scope: $ scope,
     animation: 'slide-in-up'
   });

   // form when calling $ scope.createTask = function (task) {
     $ scope.tasks.push ({
       title: task.title
     });
     $ scope.taskModal.hide ();
     task.title = "";
   };

   // open the new model $ scope.newTask = function () {
     $ scope.taskModal.show ();
   };

   // Close the new model $ scope.closeNewTask = function () {
     $ scope.taskModal.hide ();
   };
 });

Create sidebar

Through the above steps we have achieved new features, and now we add sidebar function for the app.

Modify the contents of <ion-side-menu-content> , the code is as follows:

 <! - Center Content ->
 <ion-side-menu-content>
   <ion-header-bar class = "bar-dark">
     <button class = "button button-icon" ng-click = "toggleProjects ()">
       <i class = "icon ion-navicon"> </ i>
     </ button>
     <h1 class = "title"> {{activeProject.title}} </ h1>
     <! - Add button ->
     <button class = "button button-icon" ng-click = "newTask ()">
       <i class = "icon ion-compose"> </ i>
     </ button>
   </ ion-header-bar>
   <ion-content scroll = "false">
     <ion-list>
       <ion-item ng-repeat = "task in activeProject.tasks">
         {{task.title}}
       </ ion-item>
     </ ion-list>
   </ ion-content>
 </ ion-side-menu-content>

Add sidebar:

 <! - left column ->
 <ion-side-menu side = "left">
 <ion-header-bar class = "bar-dark">
   <h1 class = "title"> Projects </ h1>
   <button class = "button button-icon ion-plus" ng-click = "newProject ()">
   </ button>
 </ ion-header-bar>
 <ion-content scroll = "false">
   <ion-list>
     <ion-item ng-repeat = "project in projects" ng-click = "selectProject (project, $ index)" ng-class = "{active: activeProject == project}">
       {{project.title}}
     </ ion-item>
   </ ion-list>
 </ ion-content>
 </ ion-side-menu>

The ng-class command in the <ion-item> sets the menu activation style.

Here we create a new js file app2.js (in order not to be confused with the previous), the code is as follows:

 angular.module ('todo', ['ionic'])
 / **
  * The Projects factory handles saving and loading projects
  * from local storage, and also lets us save and load the
  * last active project index
  * /
 .factory ('Projects', function () {
   return {
     all: function () {
       var projectString = window.localStorage ['projects'];
       if (projectString) {
         return angular.fromJson (projectString);
       }
       return [];
     },
     save: function (projects) {
       window.localStorage ['projects'] = angular.toJson (projects);
     },
     newProject: function (projectTitle) {
       // Add a new project
       return {
         title: projectTitle,
         tasks: []
       };
     },
     getLastActiveIndex: function () {
       return parseInt (window.localStorage ['lastActiveProject']) || 0;
     },
     setLastActiveIndex: function (index) {
       window.localStorage ['lastActiveProject'] = index;
     }
   }
 })

 .controller ('TodoCtrl', function ($ scope, $ timeout, $ ionicModal, Projects, $ ionicSideMenuDelegate) {

   // A utility function for creating a new project
   // with the given projectTitle
   var createProject = function (projectTitle) {
     var newProject = Projects.newProject (projectTitle);
     $ scope.projects.push (newProject);
     Projects.save ($ scope.projects);
     $ scope.selectProject (newProject, $ scope.projects.length-1);
   }


   // Load or initialize projects
   $ scope.projects = Projects.all ();

   // Grab the last active, or the first project
   $ scope.activeProject = $ scope.projects [Projects.getLastActiveIndex ()];

   // called to create a new project
   $ scope.newProject = function () {
     var projectTitle = prompt ('Project name');
     if (projectTitle) {
       createProject (projectTitle);
     }
   };

   // called to select the given project
   $ scope.selectProject = function (project, index) {
     $ scope.activeProject = project;
     Projects.setLastActiveIndex (index);
     $ ionicSideMenuDelegate.toggleLeft (false);
   };

   // Create our modal
   $ ionicModal.fromTemplateUrl ('new-task.html', function (modal) {
     $ scope.taskModal = modal;
   }, {
     scope: $ scope
   });

   $ scope.createTask = function (task) {
     if (! $ scope.activeProject ||! task) {
       return;
     }
     $ scope.activeProject.tasks.push ({
       title: task.title
     });
     $ scope.taskModal.hide ();

     // Inefficient, but save all the projects
     Projects.save ($ scope.projects);

     task.title = "";
   };

   $ scope.newTask = function () {
     $ scope.taskModal.show ();
   };

   $ scope.closeNewTask = function () {
     $ scope.taskModal.hide ();
   }

   $ scope.toggleProjects = function () {
     $ ionicSideMenuDelegate.toggleLeft ();
   };


   // Try to create the first project, make sure to defer
   // this by using $ timeout so everything is initialized
   // properly
   $ timeout (function () {
     if ($ scope.projects.length == 0) {
       while (true) {
         var projectTitle = prompt ('Your first project title:');
         if (projectTitle) {
           createProject (projectTitle);
           break
         }
       }
     }
   });

 });

body-side-menus The code is as follows ::

 <ion-side-menus>

 <! - Center Content ->
 <ion-side-menu-content>
   <ion-header-bar class = "bar-dark">
     <button class = "button button-icon" ng-click = "toggleProjects ()">
       <i class = "icon ion-navicon"> </ i>
     </ button>
     <h1 class = "title"> {{activeProject.title}} </ h1>
     <! - Add button ->
     <button class = "button button-icon" ng-click = "newTask ()">
       <i class = "icon ion-compose"> </ i>
     </ button>
   </ ion-header-bar>
   <ion-content scroll = "false">
     <ion-list>
       <ion-item ng-repeat = "task in activeProject.tasks">
         {{task.title}}
       </ ion-item>
     </ ion-list>
   </ ion-content>
 </ ion-side-menu-content>

 <! - left column ->
 <ion-side-menu side = "left">
 <ion-header-bar class = "bar-dark">
   <h1 class = "title"> Projects </ h1>
   <button class = "button button-icon ion-plus" ng-click = "newProject ()">
   </ button>
 </ ion-header-bar>
 <ion-content scroll = "false">
   <ion-list>
     <ion-item ng-repeat = "project in projects" ng-click = "selectProject (project, $ index)" ng-class = "{active: activeProject == project}">
       {{project.title}}
     </ ion-item>
   </ ion-list>
 </ ion-content>
 </ ion-side-menu>

 </ ion-side-menus>

try it"

Simplidigital

Create Your First Mobile App with Ionic and AngularJS

Step by Step Guide to Create Mobile App with Ionic And Angular Js

Create APP

Create sidebar

Initialize APP

Create a list

Create an add page

Create sidebar

Share this