I am trying to include a processing Canvas inside a angularjs view.It works inside the index.html but not work inside a view.Sample is given below.
https://plnkr.co/edit/3ZaLzswnnVcf71bwrrgp?p=preview
Home.html
<div class="container">
<canvas data-processing-sources="hello.pde" ></canvas>
Back
</div>
Index.html
<!DOCTYPE html>
<html>
<head lang="en">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.1/processing.min.js"></script>
</head>
<body>
<div ng-app="mainApp">
<ng-view></ng-view>
</div>
</body>
</html>
ng-view is a directive from ngRoute. What you should do instead is just include your template:
<div ng-include="Home.html"></div>
If you want to use ng-view you must setup your app to work with ngRoute.
Example
Related
I am not able to get the template snippets from template cache (which looks like the following:)
<script id="sub1.html" type="text/ng-template">
<div> sub1 Content</div></script>
I think it is because of line number 11 in index.html file
<div class="hiddenContent" ng-include="'templates.html'">
If I replace this line with the templates.html it works.
How to make this work keeping the line number 11?
Look at my code in Plunkr Code
It works, try moving the template into the index.html
http://plnkr.co/edit/MOwCD8UyRT2IBmaeeAMX?p=preview
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="hiddenContent" ng-include="'templates.html'">
</div>
<h1>Hello Plunker!</h1>
{{test}}
<myapp-directive></myapp-directive>
</div>
</body>
</html>
<script id="sub1.html" type="text/ng-template">
<div>sub1 Content</div>
</script>
<script id="sub2.html" type="text/ng-template">
<div>sub2 Content</div>
</script>
Maybe the problem is AngularJS can't find the ng-template in another file. It also work if you define the sub1.html in templateCache:
var app=angular.module("myApp",[]);
app.run(["$templateCache", function ($templateCache) {
$templateCache.put("sub1.html","<div> sub1 Content</div>");
}]);
<!DOCTYPE html>
<html ng-app="">
<head>
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-controller="userCtrl">
<div class="container">
<div ng-include="'myUsersList.html'"></div>
<div ng-include="'myUsersForm.html'"></div>
</div>
</body>
</html>
I have the two files 'myUserList.html' and 'myUsersForm.html' in the same folder as this index file. It is still not loading the two 'html pages' one below other. I am getting a blank page. Is anything missing???
And also don't miss to initialize model.
angular.module('MyApp', []);
tempHeader.html is rendered fine but then rendering seems to stop?
What am I missing?
<!DOCTYPE html>
<html ng-app>
<head>
<!-- Angular JS Latest compiled and minified JavaScript -->
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</head>
<body>
I am here
<ng-include src="'tempHeader.html'"/>
I am also here <!-- not rendered -->
</body>
</html>
You can't close the tag in itself.
<ng-include src="tempHeader.html"></ng-include> should do the trick.
I am doing a simple hello world example straight out of book but somehow i cant get it correct. not sure what is going on here.
html Code, angular.js is the latest 1.3.x downloaded from angularjs site
<!DOCTYPE html>
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</body>
</html>
Controller.js
function HelloController($scope){
$scope.greeting={text:'Hello'};
}
why can i get Hello world in the output when i load the html page. Instead i see this
{{greeting.text}}, World
what is going on?
Here is what will work for you:
function HelloController($scope) {
$scope.greeting={text:'Hello'};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}, World</p>
</div>
</div>
<html>
<head>
<script src="angular.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:
<!DOCTYPE html>
<html ng-app="AppName">
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<div id="page-content-wrapper">
<div class="page-content inset" ng-view>
</div>
</div>
</div>
<!-- /WRAPPER-->
<!-- ANGULAR CUSTOM -->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="javascripts/AngularApp.js"></script>
<script src="javascripts/appRoutes.js"></script>
<script src="javascripts/controllers/MainCtrl.js"></script>
<script src="javascripts/controllers/SettingsCtrl.js"></script>
<script src="javascripts/services/SettingsService.js"></script>
</body>
</html>
When I run the app it never seems to finish loading (see the image: http://imgur.com/FIAH4tH) and then crashes. In Firefox, I get the following error: http://imgur.com/UT3g7wY
Does anyone know how I can solve this problem?
--EDIT--
I've updated the position of the scripts in the app.
My AngularApp.js file looks like this:
angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);
If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.
Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.
angular.module('AppName', ['ngRoute']);
Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.
I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS tryout</title>
<script src="../../node_modules/angular/angular.js"></script>
</head>
<body>
<h1>AngularJS tryout</h1>
<p>Nothing here so {{ 'far' + '!' }}</p>
</body>
</html>