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>
Related
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
<!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', []);
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', []);
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'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>