<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>My App</title>
<link rel="stylesheet" href="lib/onsen/css/onsenui.css">
<link rel="stylesheet" href="lib/onsen/css/topcoat-mobile-onsen-ios7.css">
<link rel="stylesheet" href="styles/app.css"/>
<script src="lib/onsen/js/angular/angular.js"></script>
<script src="lib/onsen/js/onsenui.js"></script>
<script src="js/app.js"></script>
<script src="controller.js"></script>
<script src="data.js"></script>
<script src="master.js"></script>
<script src="detail.js"></script>
</head>
<body>
<ons-screen>
<ons-navigator title="Page 1">
<ons-page class="center">
<div ng-controller="MasterController">
<ons-list>
<ons-list-item
class="topcoat-list__item--tappable topcoat-list__item__line-height"
ng-repeat="item in items"
ng-click="showDetail($index)">
<ons-row>
<ons-col size="10">
<ons-icon
icon="{{item.icon}}"
fixed-width="true">
</ons-icon>
</ons-col>
<ons-col class="left">
{{item.title}}
</ons-col>
</ons-row>
</ons-list-item>
</ons-list>
</div>
</ons-page>
</ons-navigator>
</ons-screen>
</body>
</html>
here is js file
var myApp = angular.module('myApp');
myApp.factory('Data', function(){
var data = {};
data.items = [
{
title: 'aducational',
icon: 'comments-o',
description: 'Item 1 Description',
href: 'tp.html'
},
{
title: 'dance',
icon: 'desktop',
description: 'Item 2 Description',
href: 'dance.html'
},
{
title: 'singing',
icon: 'heart-o',
description: 'Item 3 Description',
href: 'tp.html'
}
];
return data;
});
i am not able reach dance.html,where tp.html working properly.when i change dance to tp it works properly.once i click on dance after that i am not able to get tp also :(.where my dance.html working properly alone
Related
I was curious how I can add this type of textarea to my CSHTML page (MVC .NetCore)
You can use Summernote.
I am currently using one in my project
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-lite.min.js"></script>
</head>
<body>
<textarea asp-for="Description" id="summernote"></textarea>
<script>
$('#summernote').summernote({
placeholder: 'Description goes here....',
height:'25vh',
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['fullscreen', 'codeview', 'help']]
]
});
</script>
</body>
</html>
I have build for popup on a page (Inspirations page in this case). This page is a directive included in main 'product_chat.html' which is connected to 'product_chat.js'. All these files are initiated from index.html
index.html
<!DOCTYPE html>
<html ng-app="myApp" lang="en" class="no-js" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
<head data-ng-app="app">
<meta charset="utf-8">
<meta name="verify-admitad" content="ed499e6bac"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="wot-verification" content="591de88d2ae5d58564c7"/>
<title ng-bind="title">"Online shopping site | Women fashion | Personal styling - Selekt"</title>
<link rel="icon" href="/pics/favicon.png">
<meta name="description" content="{{meta_desc}}">
<meta itemprop="description" content="Application wide description for Schema.org (Google+ uses this)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700,200,300' rel='stylesheet' type='text/css'>
<link rel="canonical" href="{{canonical_url}}">
<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="bower_components/dist/angular-typewrite.css"/>
<link rel="stylesheet" href="css/isteven-multi-select.css"/>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/select-css.css">
<link rel="stylesheet" href="css/style_find.css">
<link rel="stylesheet" href="css/select-css-compact.css">
<link rel="stylesheet" href="css/searchSelect.css">
<link rel="stylesheet" href="css/style_load.css">
<link rel="stylesheet" href="css/popup.css">
<!--<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-select.css">
<link rel="stylesheet" href="bower_components/ngModal/ng-model.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-92766347-1', 'auto');
ga('send', 'pageview');
</script>
<style>
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
.main_banner {
background-image: url('pics/banner.png');
background-repeat: no-repeat;
min-height: 100vh;
display: block;
overflow-x: hidden;
background-size: 1600px 900px;
}
</style>
<base href="/"/>
</head>
<body class="main_banner">
<div class="">
<div ng-view>
</div>
</div>
<!--In production use:-->
<!--
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.min.js"></script>
<script src="node_modules/socket.io/socket.io.js"></script>
<!--<script src="bower_components/socket.io-client/socket.io.js"></script>-->
<!--<script src="bower_components/angular-socket-io/socket.js"></script>-->
<script src="js/angular-searchAndSelect.js"></script>
<script src="product-app-services/app-services.js"></script>
<script src="publish/wedding-dresses-for-women/product-chat.js"></script>
<script src="publish/home/product-chat.js"></script>
<script src="publish/search/product-chat.js"></script>
<script src="publish/find/product-chat.js"></script>
<script src="app-services/app.module.js"></script>
<script src="app.js"></script>
<script src="bower_components/angular-typewrite/dist/angular-typewrite.js"></script>
<!--//custom dialog-->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootbox/bootbox.js"></script>
<script src="bower_components/ngBootbox/dist/ngBootbox.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
</body>
</html>
product_chat.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Private Chat Application with Node.js, Socket.IO and AngularJS</title>
<meta name="generator" content="Bootply">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/style_find.css">
</head>
<body cz-shortcut-listen="true" style="background: white">
<div id="main_page" ng-show="show_page" scroll >
<nav_header></nav_header>
<div>
<div>
<inspirations ng-if="inspirations_dir"; ng-init="myDialog()"></inspirations>
</div>
</div>
</div>
</body>
</html>
in the above code, I am calling popup function in 'inspirations' tag
Here is my product_chat.js file (Only relevant part of the code is attached)
var app = angular.module("WeddingDressesForWomen", ['ui.bootstrap']);
app.controller("WeddingDressesForWomen", ["$http","$rootScope", '$scope', '$window', 'socket', "$location", "$anchorScroll", "$timeout", '$routeParams', 'title', 'userService', '$filter', '$document', '$localStorage','$uibModal',
function ($http,$rootScope, $scope, $window, socket, $location, $anchorScroll, $timeout, $routeParams, title, userService, $filter, $document, $localStorage,$uibModal) {
$scope.myDialog = function () {
$uibModal.open({
templateUrl: 'template/popup.html',
backdrop: 'static',
windowClass: 'modal',
size: 'lg',
controller: function ($scope, $uibModalInstance) {
$scope.cancel = function () {
$uibModalInstance.dismiss();
};
}
});
};
}]);
popup.html template
<div class="modal-header">
<h3 class="modal-title">Note</h3>
</div>
<div class="modal-body">
Selekt will be functionally live with Women's Fashion by 10th May and Men's Fashion by 30th May. It is currently in Beta phase.
</div>
<div class="modal-footer">
<button class="btn btn-warning" type="button" style="background-color:#337ab7; border-color:#2e6da4"
ng-click="cancel()">Okay</button>
</div>
I can't comment on this because of my reputation! But do you minify the javascript? I can see you've used implicit dependency injection for $uibModalInstance in the controller - you should be using the property annotation as well, when you declare the controllers dependencies for $uibModalInstance otherwise the code will be broken when the javascript is minified.
Also for the bootstrap library. You can log the service to the console.. i.e console.log($nameOfService)... Are you not able to download the bootstrap javascript and add it to the project?
I am trying to redirect to home.html on click of a button in index.html
index.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></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/home.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-royal">
<h1 class="title">Index</h1>
</ion-header-bar>
<ion-content>
<div ng-controller="LoginCtrl">
<button ng-click="login()">Login</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
home.js
var VLogin = angular.module('starter', ['ionic']);
VLogin.controller('LoginCtrl', ['$scope','$location', function($scope, $location) {
$scope.login = function(){
$location.path("#/home.html");
};
}]);
And here is the hierarchy of both files
$location.path() is not working. Where am I going wrong? TIA.
take a look here: http://learn.ionicframework.com/formulas/navigation-and-routing-part-1/
but the simple answer is that you should set up routes
$stateProvider.state('app', {
url: '',
templateUrl: 'app.html',
controller: 'AppCtrl'
}
}).state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginCtrl'
}
})
and then I would recommend using the $state provider to do something like this
login.controller('LoginCtrl', function($scope, $state) {
$state.go('app',{});
})
This is not the EXACT code, but an overview, I would recommed reading the link provided for additional information
I am new to Angularjs and quite not sure where to start from,i need to display data(coming from a json) under each date in datepicker.
I have my datepicker calendar ready.
<!doctype html>
<html ng-app="720kb">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="http://720kb.github.io/csshelper/assets/ext/src/helper.css">
<link rel="stylesheet" type="text/css" href="src/css/angular-datepicker.css">
<title>Angularjs Datepicker</title>
</head>
<body>
<div class="separator50"></div>
<div class="col6 offset-left2">
<div class="col3">
<div class="datepicker"
date-format="MMMM d, y"
button-prev='<i class="fa fa-arrow-circle-left"></i>'
button-next='<i class="fa fa-arrow-circle-right"></i>'>
<input ng-model="date2" type="text" class="angular-datepicker-input"/>
</div>
Date 2 is: {{date2}}
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-route.min.js"></script>
<script type="text/javascript" src="src/js/angular-datepicker.js"></script>
<script type="text/javascript" src="assets/js/index.js"></script>
</body>
</html>
This is an example of getting JSON Data in Angular Js , can u give us some more information about what the structure of the Json ?
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.success(function (response) {$scope.names = response.records;});
});
</script>
I create a example of LocalStorage. When I use Chrome web browser, It works fine. But when I test on iPhone Emulator, It doesn't. Please help.
Here is my code to set the local storage value:
function onclick(){
window.localStorage.setItem("data","Nguyen Minh Binh");
}
===========
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="cordova-2.5.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="js/index.js" type="text/javascript" ></script>
</head>
<body>
<a data-role="button" href="DemoWOrklightJQM/index.html" data-prefetch onclick="onclick()">Click me</a>
</body>
</html>
Here is the code where I tried to get the saved data:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script>
window.$ = window.jQuery = WLJQ;
</script>
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
});
</script>
</head>
<body id="content" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT:
At Whizkid747's suggest, I change the script source as below but It still doesn't work.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>DemoSimpleControls</title>
<meta name="
viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link href="jqueryMobile/jquery.mobile-1.3.0.css" rel="stylesheet">
<link rel="stylesheet" href="css/DemoSimpleControls.css">
<script src="jqueryMobile/jquery.mobile-1.3.0.js"></script>
<script src="../js/jquery-1.9.1.min.js"></script>
< script type="text/javascript" charset="utf-8" src="../cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad(){
document.addEventListener("deviceready", deviceready, false);
}
function deviceready(){
$("#mysavedData").html("XYZ");
$("#mysavedData").html(window.localStorage.getItem("data"));
}
</script>
</head>
<body id="content" onLoad="onLoad();" >
<div data-role="page" id="page">
<div data-role="header" >
<a data-rel="back" href="#" >Back</a>
<h1>My page</h1>
</div>
<div data-role="content" style="padding: 15px" data-theme="e">
<div id="mysavedData">My data</div>
Button
</div>
</div>
</body>
</html>
EDIT2: Try to set localStorage at OnDeviceReady then get it next lines, but still doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="https://raw.github.com/phonegap/phonegap/2.5.0rc1/lib/android/cordova-2.5.0rc1.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
//
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
window.localStorage.removeItem("key");
window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
</body>
</html>
Move your code in document.ready to onDeviceReady event of PhoneGap. onDeviceReady is when you need to start executing your custom code.
Edit: *Try the below code with cordova.js added locally and not from github*
<!DOCTYPE html>
<html>
<head>
<title>Contact Example</title>
<script src="js/jquery-1.9.1.min.js">
</script>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script src="cordova-2.5.0rc1.js"></script>
</head>
<body>
<h1>Example</h1>
<p id="p1">localStorage</p>
<script type="text/javascript">
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is ready
function onDeviceReady() {
window.localStorage.setItem("key", "minhbinh");
var keyname = window.localStorage.key(i);
// keyname is now equal to "key"
var value = window.localStorage.getItem("key");
// value is now equal to "value"
//window.localStorage.removeItem("key");
//window.localStorage.clear();
// localStorage is now empty
$("p#p1").text(value);
}
</script>
</body>
</html>
There was a problem when running Cordova 2.1 (fixed in 2.2) on iOS 6: initializing the localstorage the first time the app is run does not work.
Please check this for a solution:
http://www.x-services.nl/cordova-localstorage-cleared-after-first-app-launch-ios6/369