<!DOCTYPE html>
<html>
<head>
<title>Ember.js Application example</title>
<!-- CDN's -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.1/handlebars.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.10.0/ember.min.js"></script>
<script src="http://builds.emberjs.com/tags/v1.10.0-beta.3/ember-template-compiler.js"></script>
<script src="http://builds.emberjs.com/release/ember.debug.js"></script>
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
</head>
<body>
<!-- Your JavaScript -->
<script type="text/x-handlebars">
<!-- this is default application template -->
<h1>{{App.name}}</h1>
{{outlet}}
</script>
<script type="text/javascript">
//App is the object of the Ember.Application
//create() is the constructor of the Ember.Application
App = Ember.Application.create();
//App.name is the variable that holds the string values
App.name= "Hello... Welcome to TutorialsPoint";
</script>
</body>
</html>
I ran this.But Application.instanceInitializer is not a function in ember-initializer.js how solve this error?
You are including a version of Ember Data that is incompatible with the version of Ember you are using.
Quick fix:
Swap this:
<script src="http://builds.emberjs.com/beta/ember-data.js"></script>
For this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.15/ember-data.js"></script>
And the error will disappear and the app will do what it should.
What might be better is to find a more up-to-date tutorial and follow that.
Related
I am creating a jQuery Plugin for building a form builder. The code is going to be very lengthy. I don't wanna keep everything in just one file.
To achieve this I am trying to break everything into ES6 modules but JS is throwing a Syntax error.
Uncaught SyntaxError: Unexpected identifier
Uncaught TypeError: $(...).formBuilder is not a function
Here's my code:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Form Builder</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
<!-- <script src="functions.js"></script> -->
<script src="index.js"></script>
</head>
<body>
<div id="form-builder"></div>
</body>
</html>
<script type="text/javascript">
$("#form-builder").formBuilder();
</script>
index.js
import formBuilder from './functions.js'
(function($){
$.fn.formBuilder = function(){
formBuilder()
}
}(jQuery))
functions.js
export default function formBuilder(){
$.get('template.mst', function(template) {
let rendered = Mustache.render(template, fieldsData);
$('#form-builder').html(rendered);
});
}
I had to make two changes to get your code to run (in Chrome/Firefox):
First, from MDN
The import statement cannot be used in embedded scripts unless such script has a type="module".
This is a little misleading: "embedded script" sounds like it wouldn't include a src= script...but in practice it doesn't seem to work without it.
<script type="module" src="index.js"></script>
Second, module scripts are lazy-loaded, which means your final script tag will be executed before index.js is actually loaded/parsed. You can change this by using the jQuery ready callback.
<script>
$(() => {
$("#form-builder").formBuilder();
});
</script>
I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.
Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.
But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.
Here's my index.html:
<div ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
And my controller.js:
var myApp = angular.module("myApp", []);
myApp.controller('AppCtrl', function($scope) {
$scope.query = "";
$scope.queryResult = function(){
return $scope.query;
};
});
Any idea what I'm doing wrong ?
you should include
<script src="./controller.js"></script>
after angular js files
The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.
And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.
Try the following code:
<html ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>
It looks like you are including jQuery after angular. jQuery should be first.
It also looks like you are including angular twice.
angular.min.js and angular.js
I just started to learn angular, and I`ve created a basic app with angular-material. But I have an error:
[$injector:modulerr]
My html:
<html>
<head>
...
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="assets/javascripts/app.js"></script>
</body>
</html>
In app.js I have this:
var app = angular.module('angularTest', ['ngMaterial', 'ngRoute'])
.config(function($mdThemingProvider) {
$mdThemingProvider.theme('default')
.primaryPalette('pink')
.accentPalette('orange');
});
If I remove script tag with app.js, and replace with <script> var app = ...</script> then it works. :(
Does anyone have a solution?
Thanks a lot!
Please check your code, maybe share a plnkr link of it breaking.
There were a few things that were missing in your code snippet (including a closing head, a body start, the ng-app tag and more), which I'm assuming is in the ... section
I created a plnkr with what you had mentioned, and it seems to be working correctly:
<html>
<head></head>
<body ng-app="angularTest">
{{1+2}}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="script.js"></script>
</body>
This correctly loads, and shows 3 in the browser when opened. Plnkr link
You must initialize the angular app on your html page. I can see in the snippets that the app is not intialized. Here is the code which will help you -:
<html ng-app="angularTest">
<body>...</body>
</html>
I am having trouble setting up twitter typeahead. Heres what I have done.
I created an index.html at my test folder.
I saved the typeahead as typeahead.js inside the folder js.
But its still not working. Here is the code for the index.html
<body>
<div>
<input id="product_search" type="text" data-provide="typeahead"
data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<script src="js/typeahead.js"></script>
</body>
And here is the full code.
(typeahead) is not supported in bootstrap version (3.3.4) it is supported in version (2.3.2). So try the following:
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"></script>
</head>
Always you should include first Jquery link after that bootstrap js then typeahead js then bootstrap css
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
</head>
I'm trying to get started with ember.js, so I've followed the tutorials as closely as I can. I currently have this HTML:
<!doctype html>
<html>
<head>
<script type="text/x-handlebars" data-template-name="application">
Test
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="ember-1.0.0-rc.1.min.js"></script>
<script src="handlebars.runtime.js"></script>
<script src="app.js"></script>
</head>
</html>
Where app.js is:
App = Em.Application.create();
and in Chrome I am getting:
Uncaught TypeError: Object prototype may only be an Object or null ember-1.0.0-rc.1.min.js:18
Where am I going wrong?
Thanks!
Some suggestions:
follow my instructions here: Ember.js missing modules?
respect the order of the script tags (jquery -> handlebars -> ember)
create a body tag, ember needs to be able to write to it
put the script tags right before the </body> tag
Resulting in:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bitshiftcop.com</title>
</head>
<body>
<script type="text/x-handlebars" data-template-name="application">
Test
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="handlebars-1.0.0-rc.3.js"></script>
<script src="ember-1.0.0-rc.1.js"></script>
<script src="app.js"></script>
</body>
</html>