I'm using last available public version (beta17) and I can't understand why a simple binding (convert by fly) doesn't work there.
What's the problem with the plnkr?
http://plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1
index.html
<!doctype html>
<meta charset='utf-8'/>
<html>
<head>
<!-- CSS -->
<link rel='stylesheet' href='assets/bootstrap4.0.0-alpha.4/css/bootstrap.css' type="text/css"/>
<!-- Angular libraries -->
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script>
<!-- Angular app modules -->
<script src='app/app.js'></script>
<script src="app/components/converter/converter.js"></script>
</head>
<body align='center'>
<h1>Temperature Converter using Angular 2</h1>
<converter class='converter'></converter>
</body>
</html>
/app/app.js
'use strict';
(function (app) {
document.addEventListener('DOMContentLoaded', () => {
ng.platform.browser.bootstrap(app.ConverterComponent);
});
})(window.app || (window.app = {}));
/app/components/converter/converter.js
(function (app) {
app.ConverterComponent = ng.core
.Component({
selector: 'converter',
templateUrl: '/app/components/converter/template.html'
})
.Class({
constructor: function () {
this.temperature = '';
let temp = this.temperature;
temp = parseInt(temp, 10);
this.fahrenheit = ((9 / 5) * temp) + 32;
this.kelvin = (temp + 273.15);
}
})
})(window.app || (window.app = {}));
/app/components/converter/template.html
<div class="box">
<div>
<label for="temp">Enter your temperature (ºC):</label>
<br>
<input id="temp" [(ngModel)]="temperature" class="textfield">
</div>
<div [hidden]="temperature">
Waiting for your temperature...
</div>
<div [hidden]="!temperature">
<h3>{{fahrenheit}} ºF</h3>
<h3>{{kelvin}} K</h3>
</div>
</div>
You have to make your all the URL's to be started without / like app/app.js instead of /app/app.js
Here is Plunkr
Note: I would suggest you to use Angular 2 Final version instead of using old version
Related
I'm trying to follow the Angular 2 tutorial, which is in TypeScript, but in JavaScript. Unfortunately I've hit a snag and I can't find a solution searching online. Right now I'm on the Master/Detail step. I'm defining an onSelect element but when I define my onSelect function I get back the following error:
Uncaught TypeError: Cannot read property 'annotations' of undefined
Here is my code:
app.component.js:
(function(app) {
app.AppComponent =
ng.core.Component({
selector: 'my-app',
template:`
<h2>My Heros</h2>
<ul class="heroes">
<li *ngFor="let hero of Heroes" [class.selected]="hero === selectedHero" (click)="onSelect(hero)">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
<div *ngIf="selectedHero">
<h2>{{selectedHero.name}} details!</h2>
<div><label>id: </label>{{selectedHero.id}}</div>
<div>
<label>name: </label>
<input [(ngModel)]="selectedHero.name" placeholder="name"/>
</div>
</div>
`
})
.Class({
constructor: function() {
this.title = 'Tour of Heros';
this.Heroes = Heroes;
this.onSelect(hero) {
this.selectedHero = hero;
};
}
});
})(window.app || (window.app = {}));
function Hero (id, name) {
this.id = id;
this.name = name;
};
var Heroes = [
new Hero(11, 'Mr. Nice'),
new Hero(12, 'Narco'),
new Hero(13, 'Bombasto'),
new Hero(14, 'Celeritas'),
new Hero(15, 'Magneta'),
new Hero(16, 'RubberMan'),
new Hero(17, 'Dynama'),
new Hero(18, 'Dr. IQ'),
new Hero(19, 'Magma'),
new Hero(20, 'Tornado')
];
index.html:
<html>
<head>
<title>Angular 2 QuickStart JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- IE required polyfill -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/rxjs/bundles/Rx.umd.js"></script>
<script src="node_modules/#angular/core/bundles/core.umd.js"></script>
<script src="node_modules/#angular/common/bundles/common.umd.js"></script>
<script src="node_modules/#angular/compiler/bundles/compiler.umd.js"></script>
<script src="node_modules/#angular/platform-browser/bundles/platform-browser.umd.js"></script>
<script src="node_modules/#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"></script>
<!-- 2. Load our 'modules' -->
<script src='app/app.component.js'></script>
<script src='app/main.js'></script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
main.js:
(function(app) {
document.addEventListener('DOMContentLoaded', function() {
ng.platformBrowserDynamic.bootstrap(app.AppComponent);
});
})(window.app || (window.app = {}));
If I remove the this.onSelect(hero) {this.selectedHero = hero;}; it works fine, minus the ability to select an element. I've tried defining selectedHero with a default value and still the same error occurs. How do I define the onSelect function?
I guess
this.onSelect(hero) {
should be
this.onSelect = function (hero) {
I just want to test opening a left modal with the help of ngAside used at the following Repository:
https://github.com/dbtek/angular-aside
I think I am doing it right, still can find a js error. Can someone help?
index.html:
<html>
<head>
<!-- Required CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css"/>
<!-- Required Scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.min.js"></script>
<script src="../js/angular-aside.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
{{name}}
<script>
//module declaration
var app = angular.module('myApp',['ui.bootstrap', 'ngAside']);
//Controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
var asideInstance = $aside.open({
templateUrl: 'aside.html',
controller: 'AsideCtrl',
placement: 'left',
size: 'lg'
});
});
app.controller('AsideCtrl',function($scope){
});
</script>
</body>
</html>
aside.html
Hello World!
ERROR:
To use the aside service, you have to inject it like this (notice the $aside injection in the constructor) :
app.controller('myCtrl',function($scope, $aside){
...
});
Here i have two ng-apps and there controllers.Here is i want to access controller value in other controller with there different ng-apps .But i am getting error.please help me out.
Thank you.
Html:-
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="service.js"></script>
</head>
<body>
<div id="myDiv1">
<div ng-app="mainApp" ng-controller="CalcController">
<p>Enter a number: <input type="number" ng-model="number" />
<button ng-click="multiply()">X<sup>2</sup></button>
<p>Result 1: {{result}}</p>
</div>
</div>
<div ng-app="myDiv2">
<div ng-controller="MyController2">
<p>Enter a number: <input type="number" ng-model="numberSecond" />
<button ng-click="multiplyValue()">X<sup>2</sup></button>
<p>Result 2: {{result2}}</p>
</div>
</div>
</body>
</html>
Controller.js:
angular.module('myReuseableMod',[]).factory('$myReuseableSrvc',function() {
var factory = {};
factory.multiply = function(a) {
return a * a
}
return factory;
});
var mainApp = angular.module("mainApp", ["myReuseableMod"]);
mainApp.controller('CalcController', ['$scope', '$myReuseableSrvc',function($scope, $myReuseableSrvc) {
$scope.multiply = function() {
$scope.result = $myReuseableSrvc.multiply($scope.number);
}
$scope.aB=function()
{
alert("hiii");
}
}]);
var mainApp2 = angular.module("mainApp2", ['mainApp']);
mainApp2.controller('MyController2',['CalcController' '$scope','$myReuseableSrvc',function(CalcController,$scope, $myReuseableSrvc) {
console.log('init B');
$scope.multiplyValue = function() {
$scope.result2 = $myReuseableSrvc.multiply($scope.numberSecond);
CalcController.aB(); //here i want to acess controller 'CalcController' method.
}
}]);
Here is my plunker:
http://plnkr.co/edit/6QyDuV330YlgXy16S2YX?p=preview
You have to manually bootstrap them.
See :
Only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an application http://docs.angularjs.org/api/ng.directive:ngApp
Right I've got a really dumb one for you, and I've been looking at this code all day with no result.
I have a simple textbox which goes through a controller and updates a variable inside a service (The service will eventually fetch/update data from somewhere else).
At the moment, I am able to retrieve the variable value all the way to the view and it works, but the textbox is unable to update the variable inside the service in order to then display the new variable value in the view again....
I really appreciate any help and hope I have made sense!!!
// APP/APP.JS
(function(){
var app = angular.module('appMod', ['ngRoute', 'ngAnimate']);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'introController',
templateUrl: 'app/partials/intro.html'
})
.otherwise({ redirectTo: '/' });
});
app.controller('nameController', function($scope, dataService) {
var nameValue;
this.name = dataService.getName();
this.submitName = function(nameVal) {
nameValue = this.nameCtrl.nameVal;
dataService.setName(nameValue);
};
});
app.controller('introController', function($scope, dataService) {
this.name = dataService.getName();
});
app.service('dataService', function () {
var name = "f";
this.getName = function() {
return name;
};
this.setName = function(nameVal) {
name = nameVal;
};
});
})();
<!-- INDEX.HTML -->
<!DOCTYPE html>
<html ng-app="appMod">
<head>
<link rel="stylesheet" type="text/css" href="content/css/normalize.css">
<link rel="stylesheet" type="text/css" href="content/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="content/css/style.css">
<link rel="stylesheet" type="text/css" href="content/css/animation.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/angular.min.js"></script>
<script type="text/javascript" src="scripts/angular-route.min.js"></script>
<script type="text/javascript" src="scripts/angular-timer.min.js"></script>
<script type="text/javascript" src="scripts/angular-animate.min.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<div class="container">
<div class="row" ng-controller="nameController as nameCtrl">
<img src="content/images/sitelogo.png" class="logo">
<h2 class="welcomeMessage fade">Welcome <span class="fade" ng-show="!nameCtrl.name == ''">{{nameCtrl.name}}</span><span class="inline fade" ng-hide="nameCtrl.name !== ''">Friend</span> <small>(We like to get personal!)</small></h2>
<div class="namebox fade">
<h2>Welcome <small class="fade">Please type your name</small></h2>
<form class="fade">
<div class="form-group">
<input type="text" class="form-control" ng-model="nameCtrl.nameVal" autofocus>
</div>
<button type="submit" style="width:100%;" class="btn btn-default fade" ng-click="nameCtrl.submitName()" >Submit</button>
</form>
</div>
</div>
</div>
<div ng-view></div>
</body>
</html>
You need to be binding to name and not nameVal on your input
Then just pass that in your setName call, i don't think the rest of the code is needed in there, you can get rid of the nameValue var too.
this.submitName = function() {
dataService.setName(this.name);
};
The nameValue var is local to the controller and not available on the $scope to bind to your view, so even though you were changing it, the view didn't know about it as it couldn't see that var.
I add ui-bootstrap-tpls-0.12.0.js to my project and us accordion and now I wanna use pagination but i get this error
ngModelCtrl.$render is not a function
here is my code
<div ng-controller="paginationCtrl">
<pagination num-pages="noOfPages" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>
</div>
i add ui.bootstrap
angular.module("boors", ['ui.router','ui.bootstrap','angularUtils.directives.uiBreadcrumbs','ngAnimate','truncate']);
and in my script tag i have
<script src="<?=$this->assetsBase?>/js/lib/ui-bootstrap-tpls-0.12.0.js"></script>
accordion works fine but pagination doesnt work
Take a closer look at the documentation for the pagination control.
http://angular-ui.github.io/bootstrap/#/pagination
I guess you're at least missing the ng-model attribute, otherwise your pagination doesn't know where to look for the current value. Guess thats what you meant with current-page.
Use version 10, Here is the sample of pagination
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<link data-require="bootstrap-css#3.x" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="ui-bootstrap#*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<section class="main" ng-controller="contentCtrl">
<div ng-repeat="friend in friends">
{{friend.name}}
</div>
<pagination page="currentPage" total-items="totalItems" items-per-page="itemsPerPage" on-select-page="setPage(page)"></pagination>
<p>
total Items: {{totalItems}}<br />
Items per page: {{itemsPerPage}}<br />
Current Page: {{currentPage}}
</p>
</section>
</body>
</html>
JS
// Code goes here
angular.module('plunker', ['ui.bootstrap'])
.controller('contentCtrl', function ($scope) {
$scope.friends = [
{'name':'Jack'},
{'name':'Tim'},
{'name':'Stuart'},
{'name':'Richard'},
{'name':'Tom'},
{'name':'Frank'},
{'name':'Ted'},
{'name':'Michael'},
{'name':'Albert'},
{'name':'Tobby'},
{'name':'Mick'},
{'name':'Nicholas'},
{'name':'Jesse'},
{'name':'Lex'},
{'name':'Robbie'},
{'name':'Jake'},
{'name':'Levi'},
{'name':'Edward'},
{'name':'Neil'},
{'name':'Hugh'},
{'name':'Hugo'},
{'name':'Yanick'},
{'name':'Matt'},
{'name':'Andrew'},
{'name':'Charles'},
{'name':'Oliver'},
{'name':'Robin'},
{'name':'Harry'},
{'name':'James'},
{'name':'Kelvin'},
{'name':'David'},
{'name':'Paul'}
];
$scope.totalItems = 64;
$scope.itemsPerPage = 10
$scope.currentPage = 1;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.maxSize = 5;
$scope.bigTotalItems = 175;
$scope.bigCurrentPage = 1;
});