I am relatively new to plunker, what am I doing wrong? There are errors in the console, and the live preview is not working. The code works perfectly fine in my localhost.
Here's the link for it. http://plnkr.co/edit/cZ48oeBBDthtVqXMRJPy?p=preview
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.min.js"></script>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script data-require="less.js#*" data-semver="2.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.6.1/less.min.js"></script>
<link rel="stylesheet" href="style.less" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl">
<div class="container">
<!-- Parent scope -->
<div class="">
<div prevent="" visible="isVisible" object-data="objectData">
<table class="datatable">
<tbody>
<tr ng-repeat="t in templateData">
<td class="haseebtesting" ng-click="current.selected = t; confusedFunction(t)" id="{{'test ' + $index}}">{{t.templateName}}</td>
<td>{{t.templatePath}}</td>
</tr>
</tbody>
</table>
<div ng-show="isVisible" class="parented">
<form class="haseebform">
<input type="text" ng-model="objectData.entername" placeholder="Enter name" />
<br />
<input type="text" ng-model="objectData.entercomment" placeholder="Enter comment" />
<input type="button" class="btn btn-info" ng-click="addT(objectData)" value="Submit" />
</form>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
plnkr edit
I started it without errors.
script code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<script src="app.js"></script>
You need to move the jquery script above the angular script. When angular loads, if jquery is not present, jqlite is used instead even if jquery is loaded subsequently.
Related
I have made a simple registration page with angularJS-materials, my issue is a select tag which is properly working over windows, android phones except iPhone's safari.
So can anyone help me about this!
That's my code below:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1" name="viewport" content="width=device-width, initial-scale=1">
<title>Form | angularJs</title>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.3/angular-material.css">
<link rel="stylesheet" href="https://material.angularjs.org/1.1.3/docs.css">
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.1/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="stylesheet" href="w3.css">
<script src="query.js">
</script>
</head>
<body>
<header class="w3-container w3-teal">
<h1><center>School.com</center></h1>
</header>
<div class="container">
<div class="well ng-scope" ui-view="content">
<div ng-controller="ContactController">
<div class="row">
<form class="well" name="myForm">
<md-input-container class="md-block" flex-gt-sm>
<label>State</label>
<md-select ng-model="State" name="state" placeholder="Select State" style="text-indent: 6px; line-height: 30px;">
<md-option value="pune">Pune</md-option>
<md-option value="mumbai">Mumbai</md-option>
<md-option value="nagpur">Nagpur</md-option>
<md-option value="nashik">Nashik</md-option>
</md-select>
<div ng-messages="myForm.state.$error"
ng-show="myForm.state.$dirty">
<div ng-message="required">This is required!</div>
</div>
</md-input-container>
<br />
<input type="hidden" ng-model="newcontact.id" />
<md-button ng-disabled="(myForm.$invalid)&& action != 'VIEW'" ng-click="saveContact()" class="md-raised md-primary">Submit</md-button>
<md-button type="reset" class=" md-warn md-raised md-hue-2">Reset</md-button>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="w3-container w3-teal">
<h5><center>Copyright © School.com</center></h5>
</footer>
</body>
</html>
There is no problem with code, just need to update this meta tag. Thats it!
I got a list generated using angular 'ng-repeat', and I want if one item is clicked it will pop a popover to show some info. I tried several time but seems it doesn't work fine.
see plunker
a list demo in plunker
my code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" charset="UTF-8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script data-require="ui-bootstrap#0.4.0" data-semver="0.4.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="my-app" ng-controller="controller">
<div class="row">
<div class="col-xs-12" style="text-align:center;">
<h2>Here is a list a weapons</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-repeat="item in weaponItems" ng-click="selectItem()" uib-popover-template="'popover.html'" popover-append-to-body="true" popover-trigger="none" popover-enable="item === selectedItem" popover-open="isOpen === true" popover-placement="left-top">
<div class="col-xs-6">
<div class="panel" style="text-align:center;">
<img src="{{item.img}}" height="120px" width="auto">
</div>
</div>
<div class="col-xs-6">
<div class="panel">
<div class="panel-body" style="min-height:120px;">
<div><b>Category:</b> {{item.title}}</div>
<p><b>Desc:</b> {{item.desc}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Here i added sample code..
You were loading ui-bootstrap before angular, so it failed (I put ui-bootstrap after angular.js):
<script src="https://code.angularjs.org/1.5.5/angular.js" data-semver="1.5.5" data-require="angularjs#1.5.5"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
The datepicker directive was not being called, because it requires "uib-" (note uib-datepicker):
<button popover-placement="bottom" uib-popover-template="'calendar.html'" popover-trigger="click"><h1>Hello Plunker!</h1></button>
The datepicker directive was also not being called, because it requires "uib-" (note uib-datepicker):
<script id="calendar.html" type="text/ng-template">
<uib-datepicker ng-model="date" show-weeks="false"></datepicker>
</script>
And check output..
I'm trying to develop an app with the ionic framework and typescript, but I'm receiving this error at ionic.bundle.js:
rrror: [ng:areq] Argument 'MainViewModel' is not a function, got undefined
This is my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>TodoApp</title>
<script src="cordova.js"></script>
<link rel="stylesheet" href="css/index.css" />
<link href="Content/ionic.css" rel="stylesheet" />
<script src="scripts/ionic.bundle.js"></script>
<script src="scripts/platformOverrides.js"></script>
<script src="scripts/app/ViewModels/MainViewModel.js"></script>
<script src="scripts/app/index.js"></script>
</head>
<body ng-app="app" ng-controller="MainViewModel">
<div class="bar bar-header bar-light">
<h1 class="title">Todo</h1>
</div>
<ion-content class="has-header">
<div class="list">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" placeholder="New Todo"/>
</label>
<div class="button button-small">Add</div>
</div>
</div>
</ion-content>
</body>
</html>
and here I'm setting up angular:
angular.module("app", ["ionic"])
.controller("MainViewModel", MainViewModel);
Does someone recognize the problem?
you are missing callback function inside controller.
Here is the mistake
angular.module("app", ["ionic"])
.controller("MainViewModel", function ($scope){
//yourcode
});
I'm trying to do a simple project with KendoUi + AngularJs.
When I use the code below, it works fine:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
<script>
angular.module("KendoDemos", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
</script>
</body>
</html>
But, when I try to separate the angular code into a .js file, (like below), it doesn't work anymore:
<!DOCTYPE html>
<head>
<title>AngularJS</title>
<meta charset="utf-8">
<link href="Content/kendo/2014.2.716/kendo.common.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.rtl.min.css" rel="stylesheet" />
<link href="Content/kendo/2014.2.716/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/kendo/2014.2.716/jquery.min.js"></script>
<script src="Scripts/kendo/2014.2.716/angular.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
<script src="Scripts/app/itensApp.js"></script> <!--ADDED-->
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div class="demo-section k-content" ng-controller="MyCtrl">
<div class="box-col">
<h4>Set Value</h4>
<p>
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" />
</p>
</div>
<div class="box-col">
<h4>Set Value</h4>
<div kendo-slider k-min="0" k-max="100" k-ng-model="value"></div>
</div>
<div class="box-col">
<h4>Result</h4>
Value: {{value}}
</div>
</div>
</div>
</body>
</html>
Scripts/itensApp.js
(function() {
var itensApp = angular.module('KendoDemos', ["kendo.directives"]);
}());
What I'm doing wrong?
Regards
It seems that you did not add the controller to your file.
Here's the code for the external .js file:
angular.module("MyApp", ["kendo.directives"]);
function MyCtrl($scope) {
$scope.value = 50;
}
Here's a working example:
http://plnkr.co/edit/3vRqvvvQZ8w6RRVohVdi?p=preview
I've been looking at this example and looking through google to no avail. I don't understand how popover-template works. Is it Angular's templating system? I couldn't find any documentation on this, so I thought I'll turn to the community. How can I similarly create my own template?
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script data-require="angular.js#1.1.5" data-semver="1.1.5" src="bootstrap-ui.js"></script>
<link data-require="bootstrap-css#2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="Ctrl">
<div style="padding-bottom: 400px"></div>
<div class="container-fluid">
<fieldset>
<div class="control-group">
<label class="control-label" for="tc">Sample:</label>
<div class="controls">
<div class="input-prepend">
<input placeholder="Enter end date.." type="text" class="input-small" ng-model="entity.endDate" name="endDate" />
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
<i class="icon-calendar"></i>
</button>
</div>
</div>
</div>
</fieldset>
</div>
</body>
</html>
It is a directive from angular-ui's bootstrap sub-project:
<button type="button" class="btn" ng-model="$parent.entity.endDate" popover-template="datepicker-test.html">
the corresponding Javascript is inbootstrap-ui.js:
.directive( 'popoverTemplate', [ '$tooltip', function ( $tooltip ) {
return $tooltip( 'popoverTemplate', 'popover', 'click' );
}]);
The project is here: https://github.com/angular-ui/bootstrap