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.
Related
I'm new to AngularJS.
I started to write a basic code, but the result doesn't give me as expected. The result give me as 10+20={{ 10+20 }}. But instead I need to see 10+20=30
Here is what I tried.
<!DOCTYPE html>
<html>
<head>
<script src="lib/angular.min(2).js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
I'm using eclipse. The angular.min(2).js file is in lib folder under WebContent. The HTML page is under WebContent folder.
Check your angular.js script file is loading properly by looking at the network tab. The following works fine.
DEMO
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body data-ng-app>
<div>
10+20={{ 10+20 }}
</div>
</body>
</html>
Remove WebContent from the URL. If your html file is in WebContent directory, your URL should be
<script src="lib/angular.min(2).js"></script>
have you tried to use the script in js like this:
<body ng-app="main">
10+20={{10+20}}
</body>
<script>
var app=angular.module("main",[])
</script>
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
I'm a newby in AngularJS, and I have one question: because Angular is client-side framework, it must work without any web-server, but this code doesn't work:
<!doctype html>
<html ng-app="learningApp">
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
</body>
</html>
I see just "I can add: {{ 1+2 }}." in the browser window. What's the trouble? Thanks.
The problem is that you are using "learningApp" but you are not including any javascript having learningApp. If you open the page in firefox and then check firebug you will get following error which complains about not finding "learningApp":
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=learningApp&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.26%2F%24injector%2Fnomod%3Fp0%3DlearningApp%0AC%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A6%3A443%0AZc%2Fb.module%3C%2F%3C%2Fb%5Be%5D%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A21%3A1%0AZc%2Fb.module%3C%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A20%3A376%0Ae%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A33%3A265%0Ar%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A7%3A288%0Ae%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A33%3A207%0Agc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A36%3A307%0Afc%2Fc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A18%3A168%0Afc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A18%3A380%0AXc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A17%3A422%0A%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A215%3A30%0Aa%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A145%3A67%0Aoe%2Fc%2F%3C%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A31%3A223%0Ar%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A7%3A288%0Aoe%2Fc%40file%3A%2F%2F%2Fhome%2Fansumanb%2FDesktop%2Flogin_with_angular%2Fexisting%2Flib%2Fangular%2Fangular.min.js%3A31%3A207%0A
...N.stringify(arguments[c]):arguments[c]);return Error(a)}}function Pa(b){if(null=...
Just remove learningApp, as you are not including one, it will work. (DEMO)
<!doctype html>
<html ng-app>
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
</body>
</html>
Or else you can create an app.js and include the js. (DEMO)
<!doctype html>
<html ng-app="learningApp">
<body>
I can add: {{ 1+2 }}.
<script src="angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Have following in app.js
angular.module('learningApp', []);
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>
Here is an example of a minimal example for angularjs which works when saved as angular.html:
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
However I strongly believe in XML and I like to create all my html documents XML compliant. I tried to adapt the example and save it as angular.xhtml:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
The big changes are the xhtml-Namespace and the file extension ".xhtml". There is no error or anything. It's just that the page is displayed as if angular was not present.
How do I get angularjs working with an XML compliant file?
One of the best ways to do this is to use the HTML/XHTML data- attributes. You can write valid HTML and XHTML without having to include any angular namespace. This would be as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
This is also beneficial when it comes to all other Angular declarations, such as ng-repeat and ng-show, etc.
<div ng-repeat="item in items">{{item.name}}</div> // This won't validate.
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.
Note that your solution with bootstrapping the Angular app is also valid - but it's not really a fix for the issue you're having. (It's simply a different way to load your Angular app, which happened to work for your situation since you didn't have any other ng- directives in your markup.)
See a similar question and answer here.
I found a solution using manual setup. The code then looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
<script type="text/javascript">
angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
While this seems a suitable workaround for now, I'd still love to know what the problem is...