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
Related
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
I'm a newbie to Angular and working on a project but I'm having an issue with displaying info in two different pages.
I have a browse page that displays profiles
I also have a homepage where I want to display the contents of the browse page plus other miscellaneous information.
To do that I created a component(browsePage)
Then I added the component to the home.view.html
<browse-page></browse-page>
but the profiles don't show up.
In my browse page the profiles do show up.
My code:
app.config.js
$routeProvider
.when('/home', {
RouteData: {
bodyStyle: {
//'background': 'url(../images/bg-7.jpg)repeat'
'background-color': 'white'
}
},
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'vm'
})
.when('/browse', {
RouteData: {
bodyStyle: {
//'background': 'url(../images/bg-10.jpg)repeat'
'background-color': 'white'
}
},
controller: 'BrowseController',
templateUrl: 'browse/browse.view.html',
controllerAs: 'vm'
})
home.controller.js
angular.module("mango").controller("HomeController", HomeController);
function HomeController() {
}
angular.module('mango').controller('ExampleController', ['$cookies', function($cookies) {
}]);
home.view.html
This is the home page<br>
Miscellaneous info goes here
<browse-page></browse-page>
Miscellaneous info goes here<br>
end of home page
browse.component.js
console.log("In browse.component.js");
angular.module("mango").component("browsePage",{
templateUrl:"browse/browse.view.html",
controller:BrowseController
});
browse.controller.js
angular.module("mango").controller("BrowseController", BrowseController);
BrowseController.$inject = ["$rootScope","$location","AuthenticationService","$http"];
function BrowseController($rootScope, $location, AuthenticationService, $http){
var vm = this;
$http.get('browse_profiles.json').success(function(data){
vm.data = data;
console.log("data==>");
console.log(data);
});
}
browse.view.html
<br><br>
<!-- Page Content -->
<div class="container">
<!-- Jumbotron Header -->
<header class="jumbotron hero-spacer" >
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
</form>
</header>
<hr>
<!-- Page Features -->
<div class="row text-center">
<img id="mySpinner" src="/images/loader.gif" ng-show="loading" />
{{alpine}}
<div class="col-md-3 col-sm-6 hero-feature" ng-repeat="profile in vm.data">
<div class="thumbnail">
<img src="{{profile.thumbnail}}" alt="">
<div class="caption">
<div class="username-status">
<span class="username pull-left"><a ng-href="#/profile/{{profile.username}}">{{profile.username}}</a></span>
<p ng-class-odd="'circle odd'" ng-class-even="'circle even'"></p>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Footer -->
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Your Website 2014</p>
</div>
</div>
</footer>
</div>
End of browse view.
<br><br>
index.html
<!doctype html>
<html lang="en" ng-app="mango">
<head>
<meta charset="utf-8">
<title>Mango</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="app.config.js"></script>
<script src="login/route-data.js"></script>
<script src="navigation_menu/navigation_menu.config.js"></script>
<script src="browse/browse.controller.js"></script>
<script src="browse/browse.component.js"></script>
<script src="home/home.controller.js"></script>
<script src="profile/profile.controller.js"></script>
<script src="settings/settings.controller.js"></script>
<script src="login/login.controller.js"></script>
<script src="login/app-services/authentication.service.js"></script>
<script src="login/app-services/flash.service.js"></script>
<script src="login/app-services/user.service.local-storage.js"></script>
</head>
<body ng-style="RouteData.get('bodyStyle')" ng-cloak>
<navigationmenu ng-if="location.path() !== '/login'"></navigationmenu>
<ng-view autoscroll></ng-view>
</body>
</html>
I'm not getting any errors in the console.You can ignore the GET error.
What do I need to do to fix my problem?
I'm starting to think th
Thanks in advanced.
I think in your component, you haven't specified controllerAs, when you goto /browse, your browseView.html is getting the controller instance as vm, but when browseView.html is loaded through component,it is not getting the controller instance, as it is not getting instantiated like it is done, in routeProvider.
Try doing,
angular.module("mango").component("browsePage",{
templateUrl:"browse/browse.view.html",
controller:BrowseController,
controllerAs: 'vm'
});
Hope, this solves the issue.
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>
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