AngularJs plunker not working? New to Plunker - angularjs

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

select tag of angularjs in not working in safari

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!

angular ui-bootstrap popover doesn't work

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..

ionicframework my Controller is not a function

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
});

KendoUI stops working when separate AngularJS in a .js file

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

How do templates work in Angular.js?

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

Resources