I'm quite stuck and I don't know where I'm going wrong. I'm using the Inspiritas Bootstrap theme, and I wanted to use it in an Ember.js app.
I've been trying to read up, I can't seem to figure out what's going wrong - debugging didn't really help :(
My files are as follows:
app.js
app = Ember.Application.create();
app.IndexController = Ember.Controller.extend({
name : "Hassan Khan"
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>app</title>
<link href="inspiritas.css" rel="stylesheet">
</head>
<body>
<script src='../components/jquery/jquery.js'></script>
<script src="../js/jquery.tablesorter.js"></script>
<script src="../components/moment/moment.js"></script>
<script src="../components/highcharts.com/js/highcharts.src.js"></script>
<script src="../components/handlebars/handlebars.js"></script>
<script src="../components/bootstrap/js/bootstrap-dropdown.js"></script>
<script src="../components/bootstrap/js/bootstrap-collapse.js"></script>
<script src="../components/bootstrap/js/bootstrap-typeahead.js"></script>
<script src="../components/ember/ember.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Now I'm not quite sure where the application bit should go, but here it is:
application.html
<div class="navbar navbar-static-top navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a class="brand" href="#">app</a>
<span class="tagline">Blah</span>
<div class="nav-collapse collapse" id="main-menu">
<div class="auth pull-right">
<img class="avatar" src="images/img.png">
<span class="name">{{ name }}</span><br/>
<span class="links">
Settings
Logout
</span>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row-fluid">
<div class="span9" id="content-wrapper">
<div id="content">
{{ outlet }}
</div>
</div>
</div>
</div>
application.html needs to be compiled by Ember.Handlebars. If you put its content between <script type="text/x-handlebars"> and </script> and place in the head or the body of your page, it will be automagically compiled and rendered for you.
It is also good practice to name your application variable App.
Your name should by moved to an App.ApplicationController if you want it to be rendered.
http://emberjs.com/guides would be a good starting point for creating an Ember Application. The new video from Tom Dale will definitely help you.
http://jsbin.com/aqokix/1
Related
I'm a relative beginner so apologies if this is a dumb question. I have no idea if I'm using the wrong path while trying to link my JS to HTML. I've tried absolute paths, adding the files to a JS folder in the root folder. I can't even get jQuery to link. Here's a snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Guessing Game</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-theme.css">
<!-- Bootstrap and CSS here-->
</head>
<body>
<div id='app' class='center' class='container'>
<div id='headers'>
<!-- Title and subtitles! -->
<h1 id='title'> Rav's Cheesy Guessing Game! </h1>
<h2 id='subtitle'> Guess A Number Between 1-100, You Won't </h2>
</div>
<div id='main'>
<div id='input-parent'>
<!-- Player's guess input, and submit button -->
<input id='player-input' class='center' placeholder="#" autofocus maxlength=2></input>
<button id='submit-button' type=submit>Go!</button>
</div>
<div id='guesses'>
<ul id='guess-list'>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
<li class='guess'>_</li>
</ul>
<!-- unordered list of guesses -->
</div>
<div id="menu-btns">
<!-- reset and hint buttons -->
<button id='reset' class='btn btn-warning btn-sm'>Reset</button>
<button id='hint' class='btn btn-primary btn-sm'>Hint</button>
</div>
</div>
</div>
<div id='footer' class='center' class="container">
<div class="row">
<div class='col-md-4 col-sm-4'>
<img src='fa-logo#2x.png'>
</div>
<div class='col-md-4 col-sm-4'>
<h4>Project by Ravish Rawal</h4>
</div>
<div class='col-md-4 col-sm-4'>
<img src='grace_hopper_academy.png'>
</div>
</div>
</div>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/GuessingGame.js'></script>
</body>
</html>
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts there (and so on...)
To move forward, just start with the first subdirectory and keep moving forward
Here is the reference
If your using IIS (a localhost), there could be any number of things wrong. For now, just check the paths. You can use literally copy the path of it in file explorer (if on windows).
For root you need to
Type this "/"
this will returns to the root directory and starts there
I am able to get the Angular Controller working on the index.html page, but its not loading on any of the other pages.
My index page is :
<!DOCTYPE html>
<html ng-app="myPhonegapApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/my-angscript.js"></script>
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
My Page1 <br>
My Page2 <br>
<div ng-controller="myAngController">
<p>The name is : {{name}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
I linked mypage1.html from the index page and the code for mypage1.html is exactly same as index.html and only this part is changed: <div data-page="mypage1" class="page">
Now the my-angscript.js is:
var app = angular.module("myPhonegapApp", []);
app.controller("myAngController", function($scope){
$scope.name = "Johnny Doe";
});
The code works fine on the index page. But when I go to mypage1.html, it does not work. It only shows {{name}}. What am I doing wrong?
PhoneGap : v6.4.3
AngularJS: v1.6.1
ng-controller doesn't work for kendo tabstrip tab content. Please check my code below.
<!--tabstripCtrl.js-->
angular.module('tabstripApp',[]);
var app = angular.module('tabstripApp');
app.controller('tabCtrl',['$scope',function($scope){
$('#tabstrip').kendoTabStrip({
contentUrls:[
'views/gridview1.html',
'views/gridview2.html',
'views/gridview3.html',
]
});
}]);
<!--grid1Ctrl.js-->
var app = angular.module('tabstripApp');
app.controller('grid1Ctrl',['$scope',function($scope){
$scope.grid1 = "grid1";
}]);
<!--index.html-->
<html>
<head>
<link rel="stylesheet" href="css/kendo.common.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<script src="controllers/tabstripCtrl.js"></script>
<script src="controllers/gridCtrl.js"></script>
</head>
<body ng-app="tabstripApp" ng-controller='tabCtrl'>
<div id='tabstrip'>
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl"></div>
<div ng-controller="grid2Ctrl"></div>
<div ng-controller="grid3Ctrl"></div>
</div>
</body>
</html>
<!--gridview1.html-->
<div>
<span>{{grid1}}</span>
</div>
Since each tab content is very complex, so I create separate html file to maintan them. But, the grid1Ctrl, grid2Ctrl and grid3Ctrl binding don't work, any ideas?
<div ng-controller="myController">
<div id="tabstrip" kendo-tab-strip="tabstrip">
<ul>
<li class="k-state-active">grid1</li>
<li>grid2</li>
<li>grid3</li>
</ul>
<div ng-controller="grid1Ctrl">
{{grid1}}
</div>
<div ng-controller="grid2Ctrl">
{{grid2}}
</div>
</div>
</div>
DEMO
Has anyone tried html jquery load file? How can I possibly use Jquery to control a class from a Html that's loaded from Jquery? A direct content of my header html will work if inserted into index.html. However I'm trying to use the Jquery include file as there will be a lot of pages so a separate file is much more feasible. The problem is when I target a certain class or id in js it won't do anything.
index.html
<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8"> </script>
<script src="js/app.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
</body>
</html>
header.html
<header>
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
Managed to fix with a different approach.
index.html
<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
<script>
var getImport = document.querySelector('#template-file');
var getContent = getImport.import.querySelector('#header');
document.body.appendChild(document.importNode(getContent, true));
</script>
<div id="slides">
<ul class="slides-container">
<li>
<img src="img/site_images/bg_home01.jpg" alt="">
<div class="caption">
<div class="title_pre">Development</div>
<h1>The City Below<br>The life above</h1>
<p><a><i class="icon-play"></i>Play Video</a></p>
</div>
</li>
</ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>
header.html
<header id="header">
Menu
<div class="navlogo">
<img src="http://placehold.it/150x40">
</div>
</header>
app.js
$(document).foundation();
$(".navlogo").fadeOut();
My index.html code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ember Starter Kit</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/one.css">
</head>
<body>
<!--Script1-->
<script type="text/x-handlebars">
<div id="W">
<h1> Welcome </h1>
</div>
<div id="section1">
<h2> {{#link-to 'DINESH'}} DINESH {{/link-to}} </h2>
</div>
<div id="section">
<h2> {{#link-to 'HOME'}} HOME {{/link-to}} </h2>
</div>
<div id="section2">
<h2> {{#link-to 'CLICK'}} CLICK {{/link-to}} </h2>
</div>
{{outlet}}
</script>
<!--Script2-->
<script type="text/x-handlebars" id='HOME'>
<div class-'HOME'>
<p>
This is a sample site for practicing Ember.js
</p>
</script>
<!--Script3-->
<script type="text/x-handlebars" id='DINESH'>
<div class-'DINESH'>
<p>
I welcome you to my page.. keep in touch......!!!!!
</p>
VIDIYAL
<br>
Being the "Director of Community Service" in Rotaract Club of Future League, I organised a project called "VIDIYAL" where i taught basic computer knowledge to Orphanage Students.
</script>
<!--Script4-->
<script type="text/x-handlebars" id='CLICK'>
<div class-'CLICK'>
<p> Click the button to display the information which you want: </p>
<button onclick="myFunction()">Click me</button>
<p id="CLICK"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/handlebars-v2.0.0.js"></script>
<script src="js/libs/ember-1.9.1.js"></script>
<script src="js/app.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
and app.js code is
App = Ember.Application.create();
App.Router.map(function()
{
this.resource('HOME');
this.resource('DINESH');
this.resource('CLICK');
});
If i click it should display a pop-up window asking for my name ("Enter your name").
I am a student who is very new to programming. So kindly explain me as simple as you can.
You can do this in pure javascript. prompt() method will do this for you.
Check here
If you want to do this in Ember.js, you need to open a modal, on the user click.
Created a Fiddle http://jsfiddle.net/rocky_217/uxa38xjz/4/
You can use prompt() function in jquery or js to receive input in popup. check out the code -:
<script>
var childAge = prompt("Enter Child age")
alert(childAge);
</script>