So, I'm trying to get angularjs working with KendoUI mobile...hybrid mobile app.
HTML:
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>My Title</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href="kendo/styles/kendo.flat.mobile.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.2/angular.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="scripts/kendo.ui.core.min.js"></script>
<script src="kendo/js/kendo.angular.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/ngApp.js"></script>
</head>
<body>
<div data-role="layout" data-id="main">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
<a data-role="button" href="#appDrawer" data-rel="drawer" data-align="left" data-icon="drawer-button"></a>
</div>
</div>
<!-- application views will be rendered here -->
</div>
<!-- application drawer and contents -->
<div data-role="drawer" id="appDrawer" style="width: 270px" data-title="Navigation">
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<ul data-role="listview">
<li>
Home
</li>
<li>
Settings
</li>
<li>
Contacts
</li>
</ul>
</div>
AngularJS:
(function () {
var ngApp = angular.module("MyApp", ["kendo.directives"]);
ngApp.controller('HomeController', ['$scope', function ($scope) {
$scope.foo = 'something';
alert("HOME CONTROLLER");
}]);
}());
Part View HTML:
<div data-role="view" data-title="AskLaw" data-layout="main" data-model="APP.models.home" ng-controller="HomeController">
<h1 data-bind="html: title"></h1>
<span>{{foo}}</span>
</div>
What I'm thinking "should" happen is the ng-controller="HomeController" should cause the HomeController to fire and populate the $scope.foo variable. This should bind to the {{foo}} on the view page as well as show the alert...not happenin'.
Any ideas?
Kendo UI developer here, the Kendo UI mobile application and AngularJS do not work well together currently. The good news is that this is something we are actually working on right now - it will be released in our upcoming 2014 Q3 release, due November.
The Telerik resource linked here should be helpful to devs looking to optimally integrate AngularJS functionality into Kendo UI Mobile: http://docs.telerik.com/kendo-ui/mobile/angular/sushi-angular-tutorial
Related
this result of the fetch.php that contain on the data from mysql database page
[{"id":"1","name":"Moblie phone","price":"3000","image":"mobil1","desc":"samasong mobile garand prime 2+"},{"id":"2","name":"Watch","price":"200","image":"watch","desc":"modern watch its color is gold"},{"id":"3","name":"Labtop","price":"4000","image":"labtop","desc":"hp labtop core i5 space 500gb "},{"id":"4","name":"moble lite","price":"1999","image":"mobil2","desc":"moble lite sterrr"}]
this html code
<!DOCTYPE html>
<html>
<head>
<title>shoping cart</title>
<link rel="stylesheet" type="text/css" href="functions/bootstrap.css">
<script type="text/javascript" src="functions/jquery.js"></script>
<script type="text/javascript" src="functions/bootstrap.min.js"></script>
<script type="text/javascript" src="functions/angular.min.js"></script>
</head>
<body>
<h2 align="center">Shopping cart application by angularjs and php</h2>
<div class="container" ng-app="shoppingcart" ng-controller="shoppingcartcontroller">
<div class="row " >
<div class="box col-md-3" style="margin-top: 20px"
ng-repeat="p in products">
{{p.name}}
{{p.price}}
</div>
</div>
</div>
this angularjs code
<script >
var app=angular.module("shoppingcart",[]);
app.controller("shoppingcartcontroller",function($http,$scope){
$scope.loadproduct=function(){
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
};
});
</script>
Why do you need this loadproduct function?
Please only this in your controller:
$http.get("fetch.php").then(function(response){
$scope.products=response.data.data;
console.log($scope.products);
});
In addition, take in consideration to check whether you need to define '$scope.products' as an empty array outside the scope of your get request.
I can not create complex data models in my controllers.
every time I create them the code seems to fail silently
simple data models like
$scope.conversationList = [123456];
work just fine both using ng-bind & using it in a directive template.
but the moment I change them to {{conversationList.conversation}} they fail silently and my ngbind is emptied and the template displays
"{{conversationList.conversataion}}" in plain text.
I don't know what is wrong. Every example I can find looks like I formatted the models correctly it keeps failing.
Thank you for your help
Controller
/* global angular */
'use strict';
app.controller('conversationListCtrl', ['$scope', function ($scope) {
$scope.conversationList = [
{
conversation2: 123456789,
conversation:
{
id: "bestbuy",
messageId: 123456,
subscriber: "Billy Madison",
subscriptionType: "summerPass",
conversationImage: "insert Image"
}
}
]
}
])
.directive('listCtrl', function () {
return {
scope: false,
template: '<div> {{conversationList.conversation}} </div>'
}
});
Index.html
<!doctype html>
<html ng-app="ChatApp" class="angularjs ng-scope">
<head>
<meta charset="utf-8">
<title>ClearKey Test Message</title>
<meta name="description" content="Layer Angular example">
<link rel="shortcut icon" href="http://static.layer.com/web/favicon.png">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Raleway:300,400" rel="stylesheet" type="text/css">
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Common CSS and Identity dialog -->
<link href="common/style.css" rel="stylesheet">
<!-- Layer Web SDK -->
<script src='vendors/layer-websdk.min.js'></script>
<script src='vendors/angular.js'>
//checked
</script>
<script src='vendors/angular-route.js'>
</script>
<script src='vendors/ng-infinite-scroll.min.js'></script>
<script src='vendors/stop-angular-overrides.js'></script>
<!-- Angular app -->
<script src='js/app.js'></script>
<script src="jquery-3.1.1.min.js"></script>
<script src="js/models/conversation.js"></script>
</head>
<body class="ng-scope" cz-shortcut-listen="true">
<!-- ^^^used to have appCtrl^^^ -->
<div class="main-app" ng-include="'views/app.html'"></div>
</body>
</html>
App.html
<div src="jquery-3.1.1.min.js">
<!-- ^^^needs appctrl controller^^^ -->
<div class="messenger">
<div class="left-panel">
<div class="Message-item">
<div class="imgContainer"> <img class="cornerImage" src="images/favicon.png" /> </div>
</div>
<div >
<!-- ^^^had the conversationListCtrl^^^ -->
<div class="panel-header conversations-header"
>
<!-- ^^^had the partials for the left column header^^^ -->
</div>
<div ng-controller="conversationListCtrl" class="conversation-list">
<div list-Ctrl ></div>
<div ng-model="conversationList" class="conversation-list" style="border:dashed" ng-bind="{{conversationList.conversation}}"></div>
</div>
<!-- had the partials for conversationlist.html -->
</div>
</div>
<div class="right-panel" >
<div
>
<!-- had the partials for the messages that were in each conversation -->
</div>
</div>
</div>
</div>
You need to define element which you want to access -
Replace - {{conversationList.conversation}}
With - {{conversationList.conversation.id}} or {{conversationList.conversation.messageId}}
I am new to angular and I am simply trying to switch between two bootstrap defined menu classes on scroll. What I am trying to achieve is that the menu stays fixed to the top with changed background (as provided in bootstrap css) when scroll is not on top of the page. I have tried using ng-class, but nothing is happening. The google chrome inspector doesn't report any errors. Here is what I have so far:
html:
<html lang="en" ng-app = "cvApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>CV creation</title>
<!-- Bootstrap Core CSS -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="assets/bootstrap/css/clean-blog.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bitter:400,700">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body style="background-color:#FF0000;">
<div>
<nav class = "navbar navbar-default navbar-custom navbar-fixed-top"
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" >
<ul class="nav navbar-nav navbar-right">
<li>
Save
</li>
<li>
Export
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
<script src="js/angular.min.js?q=123"></script>
<script src="js/angular-route.min.js?q=123"></script>
<script src="app/cvapp.js?q=123"></script>
<script src="app/Controllers/MenuController.js?q=123"></script>
</body>
</html>
module "cvApp" with directive:
var cvApp = angular.module('cvApp', []);
cvApp.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 0) {
scope.boolChangeClass = true;
} else {
scope.boolChangeClass = false;
}
scope.$apply();
});
};
});
I would like some insight on what I am doing wrong and thank you in advance.
In the code that you have provided, i can not see you using the directive in the markup anywhere.
change your markup to :
<nav scroll class = "navbar navbar-default navbar-custom navbar-fixed-top"
ng-class="{'navbar navbar-default navbar-custom navbar-fixed-top is-fixed is-visible':boolChangeClass}"> ...
and it would work.
Here is a basic fiddle for example (doesn't include bootstrap, but you can see that the class is being applied on scroll, the background of nav changes from red to green):
http://jsfiddle.net/Lvc0u55v/13347/
I am playing with ng-input-tag and wanted to add bootstrap class to the input element of html so as to get its particular bootstrap class styles, but its not working as expected.
Below is the code:
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/readable/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput">Disabled input</label>
<tags-input ng-model="tags" class="form-control"></tags-input>
</div>
</div>
So i hope you ran the code and found that i am unable to get bootstrap form-control class style for directive.
Here is Plunker link : https://plnkr.co/edit/jZlAsJ?p=info
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/3.1.1/ng-tags-input.min.css" rel="stylesheet" />
<script>
angular
.module('myApp', ['ngTagsInput'])
.controller('myCtrl', function() {
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label class="control-label" for="disabledInput"> input</label>
<tags-input ng-model="tags"></tags-input>
</div>
</div>
</body>
</html>
See this plunker ... I've solved this for you ( you may need to modify the styling a bit).
https://plnkr.co/edit/sKxMOLWoDPtYNqE8hunS?p=preview
You need to add jquery in your code.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Bootstrap js will need jquery to run. Please keep in mind that you have added jquery (above script) before bootstrap.js (watch my code carefully, review the sequel).
The following HTML results in error: Unable to get property 'top' of undefined or null reference, when you set your browser to emulate a tablet such as an IPad.
Codepen is here
http://codepen.io/jcbowyer/pen/wGrLmE
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<button kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile" k-on-click="mnuProfile.open($('#btnProfile'))"></button>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>
I figured out how to get this work with k-rel insteal of open.
Updated code is below
Codepen here
http://codepen.io/jcbowyer/pen/KzyQwa
<html>
<head>
<meta charset="utf-8">
<title>Kendo UI Mobile Loves AngularJS</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1029/styles/kendo.mobile.all.min.css">
<!-- the application CSS file -->
<link rel="http://demos.telerik.com/kendo-ui/content/mobile/apps/sushi/css/style.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/kendo.all.min.js"></script>
</head>
<body kendo-mobile-application ng-app="sushiMobileApp">
<kendo-mobile-view id="index">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
Home View
<a kendo-mobile-button k-align="'right'" data-icon="'contacts'" id="btnProfile"
k-rel="'actionsheet'"
href="#mnuProfile"></a>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<ul kendo-mobile-action-sheet="mnuProfile" id="mnuProfile" k-on-command="onCommand(kendoEvent)" k-type="'auto'">
<li>Login</li>
<li ng-hide="(authentication.token.length == 0)">Logout</li>
<li>My Profile</li>
</ul>
</kendo-mobile-view>
<script>
angular.module('sushiMobileApp', [ 'kendo.directives' ]);
</script>
</body>
</html>