The problem which i have been facing now is that after JSON.parse(localStorage.getItem('user_info')));
how can i put this string in $scope object ?
please suggest something for my problem.
Thanks in advance
You'll need to define an AngularJS controller and then bind it to your Ionic view with the ng-controller directive. Below is an example — I recommend playing around with it on play.ionic.io.
js
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
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">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">LocalStorage Example</h1>
</ion-header-bar>
<ion-content class="padding" ng-controller="MyController">
<h1>{{userInfo}}</h1>
</ion-content>
</ion-pane>
</body>
</html>
angular.module('app', ['ionic']).controller('MyController', function($scope) {
// localStorage.setItem('user_info', JSON.stringify('Hello World'));
$scope.userInfo = JSON.parse(localStorage.getItem('user_info'));
});
Related
This is a very basic ng-click example. I can't seem to get it to work. Not sure what the issue is. I swear I've used Angular before! Here's a jsbin:
JS Bin
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>{{1 + 2}}</h1>
<button ng-click="alert('hello world')">Click me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Module:
angular.module('app', []);
It will be helpful to you while doing angularjs you should add the controller, In your case, I have created a function and passed a string value to show a message by the alert.
var app=angular.module('app', []);
app.controller('testCtrl',function($scope){
$scope.showalert=function(str){
alert(str);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-strict-di ng-controller="testCtrl">
<h1>{{1 + 2}}</h1>
<button ng-click="showalert('hai this is angularjs click event')"> click Me!..</button>
</div>
i am trying to include the view page in angularjs but it is working.
Here is my code
rootService.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
viewCustomer.js
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
masterPage.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html ng-app="viewCustomer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Add Company</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="https://code.angularjs.org/1.4.4/angular-resource.js"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
</head>
<body>
<div >
ViewCustomer
<div ng-view></div>
</div>
</body>
</html>
checker.jsp
<h3 ng-controller="checkerController">{{headingTitle}}</h3>
Above code i used but it is not working in browser console error is
Error: [$injector:modulerr] http://errors.angularjs.org/1.4.4/$injector/modulerr?p0=viewCustomer&p1=%5B%24injector%3Aunpr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.4%2F%24injector%2Funpr%3Fp0
can any one help me to fix this
Please change $routProvider to $routeProvider in your rootService.js file. So your rootService.js will look like this:
var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.config(function($routeProvider){
$routeProvider
.when('/CustomerList',{
templateUrl: 'resources/view/checker.jsp',
controller: 'checkerController'
})
})
In viewCustomer.js you dont have to declare the module again, change it as,
// remove this line var viewCustomerModule = angular.module('viewCustomer',['ngRoute','ngResource']);
viewCustomerModule.controller('checkerController', function($scope) {
$scope.headingTitle = "List Items";
});
also change the order as,
<script src="<c:url value="/resources/js/rootService.js"/>"></script>
<script src="<c:url value="/resources/js/viewCustomer.js"/>"></script>
I cannot figure out why the template intellij creates for me produces all these error. Even better the angular is not working. I cut and pasted some simple angular code from online sources to test it and put the Angular script inside index.html with no luck.
Here is my current code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="controllers/clickablecontroller.js"></script>
</head>
<body ng-app="myApp">
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-controller="clickable">
<input type="button" value="Click Me" ng-click="clickMe()">
{{clickable.click}}
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="count = count + 1">Click me!</button>
<p>{{ count }}</p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
});
</script>
Controller: (clickablecontroller.js)
angular.module('myApp',[])
.controller('clickable',['$scope', function($scope){
$scope.clickMe = function(){
$scope.click = click++;
}
}]);
Errors:
I want to create an alert box in ionic using angular js but when I click the alert button nothing happens. Please kindly direct me.
This is my index.html
<!DOCTYPE html>
<html lang="en" data-ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic-AngularJS-Cordova</title>
<!-- Ionic framework - replace the CDN links with local files and build -->
<link href="lib/ionicframework/ionic.min.css" rel="stylesheet">
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="lib/ionicframework/ionic.bundle.min.js"></script>
<script src="js/app.js"></script>
<script src="cordova.js"></script>
<style>
.box {height:300px;padding: 10px}
</style>
</head>
<body data-ng-controller="AppCtrl">
<ion-header-bar class="bar-balanced">
<h1 class="title">Welcome to my web app</h1>
<button class="button" data-ng-click="refresh()">
<i class="icon ion-refresh"></i>
</button>
</ion-header-bar>
<ion-content>
<h1>Some Content</h1>
</ion-content>
<div class="bar bar-footer">
<button class="button button-clear">Left</button>
<div class="title">Title</div>
<button class="button button-clear">Right</button>
</div>
</body>
</html>
This is my app.js
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function() {
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
function AppCtrl($scope, $log){
$scope.refresh = function(){
alert("Button Pressed");
}
}
On clicking the refresh button I expect a pop up to appear.
I was able to solve my problem using this:
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope) {
$scope.refresh = function(){
alert("Button Pressed");
};
ionic.Platform.ready(function() {
navigator.splashscreen.hide();
});
});
regards.
Im trying to get info from this API :
In my main.js file I have this controller which is requesting an http request:
(function(){
var app = angular.module('provider',['provider-movies']);
app.controller('ProviderController',['$http',function($http){
var provider = this;
provider.movies =[];
$http.get('/http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').succes(function(data){
provider.movies = data;
});
}]);
})();
Then in my html I'm trying to print the title of the movie like this:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
</div>
But when i load the file on the browser it just shows this:
{{provider.movies.title}}
Angular is installed and working, if I add {{'hello '+'you'}} it prints **hello you**
Any ideas on why is this not working ?
Also , my html looks like this:
<!doctype html>
<html ng-app="provider">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="bower_components/foundation/css/foundation.css">
<script src="bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<div ng-controller="ProviderController as provider">
<p>{{provider.movies.title}}</p>
<p>{{'hello'}}</p>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>
thanks!
You seem to have some typo and a missing closing parenthesis. If you looked at the console of your webbrowser you should definitely seen this.
Try this:
(function() {
var app = angular.module('provider', []);
app.controller('ProviderController', [ '$http', function($http) {
var provider = this;
provider.movies = [];
$http.get('http://private-5d90c-kevinhiller.apiary-mock.com/angular_challenge/horror_movies').success(function(data) {
provider.movies = data;
});
}]);
})();
Also in your markup the provider.movies is an array which doesn't contain a title property:
<div ng-controller="ProviderController as provider">
<p>{{provider.movies}}</p>
</div>
If you wanted to have the title you may consider looping through them:
<p ng-repeat="movie in provider.movies">
{{movie.title}}
</p>
And here's the working plunkr.