I've tried building a simple Todo List app using ionic framework, however I've experienced a problem.
Whenever I add the ng-controller and ng-reapeat directives to my code, AngularJS expressions stop working.
Here is my code:
index.html
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body>
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">ToDo</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item ng-repeat="todo in TodoList">{{todo.name}}</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
app.js
var app = angular.module('ionicApp', ['ionic'])
app.controller('TodoCtrl', function($scope){
$scope.TodoList = [
{name: "Item 1"},
{name: "Item 2"}
]
})
You are defining the core module of your app in app.js as:
var app = angular.module('ionicApp', ['ionic'])
However, in your html, you're defining your app as:
<html ng-app="starter">
In your ng-app attribute, you're defining this app as an Angular app, and you're referencing a module which does not exist (starter). You need to specify which Angular module to use, which in your app.js at the moment is ionicApp. So try renaming starter to ionicApp, or the otherway around, as long as they have matching names.
Related
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
Am absolutely new to Ionic and Firebase and was trying to create a Sample Project where I am trying to query from the Firebase Database using a check on a value. To make it clear since Firebase doesn't allow a WHERE clause in the SELECT query like conditions, so was trying to learn how to deal with that.
Here is a snapshot of my Firebase database.
My intention is simply to display on my View whichever data has the address value of 700030 in an array as we do in AngularJS using ng-repeat.
var app = angular.module('starter', ['ionic', 'firebase'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.controller('MainCtrl', function($scope, $firebaseArray){
var ref = new Firebase('https://helpee-70271.firebaseio.com');
$scope.result = $firebaseArray(ref);
ref.orderByChild("address").on("child_added", function(data) {
console.log("Initially :" + JSON.stringify($scope.result));
//console.log(data.val().address);
if(data.val().address == "700030"){
console.log(data.val().address);
$scope.result.push(data.val());
}
console.log(JSON.stringify($scope.result));
});
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--Firebase addition start -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!--Firebase addition end -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title text-center">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MainCtrl">
<div>
<div ng-repeat ="results in result">
<div>{{results.name}}</div>
<div>{{results.phNumber}}</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here is my Code snippet. The problem am getting is that while the checking and retrieving of data is being done properly but at the View am seeing that the array containing all the elements irrespective of the Address check is getting printed first followed by the values that should be printed.
Here is the snapshot of the View and the console of the browser
Can anyone please help me how to correct this issue and explain me where am going wrong? Would be highly indebted as am really new to this and am willing to learn. Thanks in advance!!
Your problem is that you are filling your array twice.
First with all the data using this line:
$scope.result = $firebaseArray(ref);
And secondly you add the data you actually want in the child_added listener:
$scope.result.push(data.val());
So the simple solution is to change that first line to:
$scope.result = [];
I am trying to check out my ionic project which is built through angular js but unable to make runnable it on plunker. It's working on my local machine, with all rpm packages, etc
<!DOCTYPE html>
<html data-ng-app='starter.controllers'>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-touch.js"></script>
<link href="style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- your app's js -->
<script src="app.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
</head>
<body ng-app="starter" style="background-color: #E6E6FA; ">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
Link to Plunker here, also need your suggestions to improve it
jQuery is not loading because plunker needs https. Just change the url to src="https://code....
And you are using ionic, so you should include ionic library.
<script src="https://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script>
I'm really new to Angular (and plan to spend the whole week on it), and I'm following a tutorial on youtube and I think the guy who created it must have took a trip to another galaxy so there's no support anymore (but an awesome tut). I can't seem to get my home..html page to render to the browser and I'm at a total lost.
When I enter this URL manually:
https://chore-master-j-s-thomas-1.c9users.io/home
The error I get is: Cannot GET /home
So I'm thinking it has to be my routing.
this is my app.js page
var myApp = angular.module('myApp', [
'ngRoute']).
config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider){
$routeProvider.when('/home', {templateUrl: '/partials/home.html', controller: 'homeController.js'});
$routeProvider.otherwise({redirectTo: '/home'});
$locationProvider.html5Mode({enabled: true, requireBase: false}); }])
And here is my index.ejs:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="lib/bootstrap/bootstrap.css" rel="stylesheet"> <!-- Custom styles for this template -->
<link href="jumbotron-narrow.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="header clearfix">
<nav>
<ul class="nav nav-pills pull-right">
<li role="presentation" class="active">Home </li>
<li role="presentation">About</li>
<li role="presentation">Contact</li>
</ul>
</nav>
<h3 class="text-muted">Chore Master</h3>
</div>
<p class='container' style="margin-left: 50" align="left" >text</p >
<!-- Main Container -->
<div class="container">
<div ng-view></div>
</div>
</div> <!-- /container -->
<!-- scripts to import for angularjs goes here -->
<scripts type="text/javascript" src="libs/angular/angular.js"> </scripts>
<scripts type="text/javascript" src="libs/angular-route/angular- route.js"></scripts>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/homeController.js"> </script>
</body>
</html>
and then my home controller:
myApp.controller('homeController', ['$scope', function($scope){
}]);
I'm really not sure what else will help besides my github but can anyone tell me what I have wrong and what angular parts do I need to study?
Here's my github repo:
https://github.com/J-S-Thomas/Chore_Master.git
You have some small typos when importing angular files:
<scripts type="text/javascript" src="libs/angular/angular.js"></scripts>
<scripts type="text/javascript" src="libs/angular-route/angular-route.js"</scripts>
should be:
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="lib/angular-route/angular-route.js"></script>
Notice the html tag is script, not scripts. And the folder where you placed them is lib not libs.
There might be something wrong with your hosting. When I browse to https://chore-master-j-s-thomas-1.c9users.io/ your index page works ok. But when I attempt to access https://chore-master-j-s-thomas-1.c9users.io/libs/angular/angular.js I get the "cannot GET" error. Your site isn't loading any of your js libs so Angular isn't even launching.
Update: your Bootstrap css is under "lib", remove the "s" from the js libs script tags. Also note you have a typo in those tags where you also added an s.
My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>NoHarm Safety Application</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496