I want to run a simple Angular js code but I am not able to do it
in Cordova with Onsen ui
I am getting an error link below :
https://docs.angularjs.org/error/ng/areq?p0=HelloCtrl&p1=not%20a%20function,%20got%20undefined
I am referring this page :
https://onsen.io/blog/onsen-ui-tutorial-angularjs-essentials-for-using-onsen-ui-part-1/
Using Onsen 1
p1.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/onsenui.css">
<link rel="stylesheet" href="css/onsen-css-components.css">
<link rel="stylesheet" href="css/sliding_menu.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular/angular.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script>
ons.bootstrap();
var myApp = angular.module('myApp',[]);
myApp.controller('HelloCtrl', function($scope){
$scope.name = "Onsen UI!";
});
</script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloCtrl">
<input type="text" ng-model="name">
<p>Hello {{name}}</p>
</div>
</body>
</html>
Output :
Error :
Below is my Directory structure :
You will have to include jQuery in your project, this is what the error is all about.
Error: Bootstrap's Javascript requires jQuery
Also make sure to load jquery.js file before loading bootstrap
Solved It...
Actually when I installed jquery I copied only the jquery.js file from the jquery folder into my js folder but now I copied the whole jquery folder into the js folder and It executed successfully...
Thanks for your support guys.
Related
i am trying to use ng-admin for the firs time. i am just following the example in and i am unable to see anything in the browser. my code is minimal, so not sure what i am doing wrong.
any ideas? did i not install correctly? i just downloaded it from a site and unzipped the file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Admin</title>
<link rel="stylesheet" href="external/ng-admin/build/ng-admin.min.css">
<script src="external/ng-admin/build/ng-admin.min.js" type="text/javascript"></script>
<script src="admin.js" type="text/javascript"></script>
</head>
<body ng-app="myApp" ng-strict-di>
<div ui-view="ng-admin"></div>
</body>
</html>
// declare a new module called 'myApp', and make it require the `ng-admin` module as a dependency
var myApp = angular.module('myApp', ['ng-admin']);
// declare a function to run when the module bootstraps (during the 'config' phase)
myApp.config(['NgAdminConfigurationProvider', function (nga) {
// create an admin application
var admin = nga.application('My First Admin')
.baseApiUrl("http://vl-esifakis-ice:8000/tracker/");
var foundry = nga.entity('foundry');
foundry.listView().fields([
nga.field('name'),
nga.field('id')
]);
admin.addEntity(foundry);
// more configuration here later
// ...
// attach the admin application to the DOM and execute it
nga.configure(admin);
}]);
Here is a demo which i have made,
<!DOCTYPE html>
<html>
<head>
<link data-require="ng-admin#0.0.1" data-semver="0.0.1" rel="stylesheet" href="https://unpkg.com/ng-admin/build/ng-admin.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="ng-admin#0.0.1" data-semver="0.0.1" src="https://unpkg.com/ng-admin/build/ng-admin.min.js"></script>
<script data-require="angular-mocks#*" data-semver="1.3.5" src="https://code.angularjs.org/1.3.7/angular-mocks.js"></script>
<script src="admin.js"></script>
<!-- <script src="backend.js"></script>
-->
</head>
<body ng-app="myApp">
<div ui-view="ng-admin"></div>
</body>
</html>
DEMO
I'm currently working on a project using Angular 1.1.5.
Upgrading Angular is not an option for now.
We would like to implement a rich HTML5 WYSIWYG-editor and dicided to give Froala a try, as it meets our requirements and the docs of angular-froala state that it should work with all versions of Angular >=1.0 .
I have made a POC on Plunker that uses Angular 1.1.5.
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="myApp">
<head>
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
<!-- Include Font Awesome. -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg=="
crossorigin="anonymous">
<!-- Include Froala Editor styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_editor.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/froala_style.min.css" />
<!-- Include Froala Editor Plugins styles -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/char_counter.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/code_view.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/colors.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/emoticons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/file.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/fullscreen.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image_manager.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/image.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/line_breaker.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/table.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/css/plugins/video.css">
<!-- Include Froala Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/froala_editor.min.js"></script>
<!-- Include Froala Editor Plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/align.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/char_counter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_beautifier.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/code_view.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/colors.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/emoticons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/entities.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/file.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_family.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/font_size.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/fullscreen.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/image_manager.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/inline_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/line_breaker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/link.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/lists.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_format.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/paragraph_style.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/quote.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/save.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.1.0/js/plugins/video.min.js"></script>
<!-- End Froala -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.js"></script>
<script src="angular-froala.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="app.css">
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<div class="sample">
<h2>Sample 2: Full Editor</h2>
<textarea id="froala-sample-2" froala ng-model="sample2Text"></textarea>
<h4>HTML Content:</h4> {{sample2Text}}
</div>
</body>
</html>
everything seems to work fine except the most important part, the data-binding.
Upgrading the Angular version to 1.5.0 fixes the issue in the POC. But as mentioned that is not an option in my case.
Is this a bug? Is the documentation of froala-angular outdated?
Is there some kind of workaround besides upgrading Angular?
Or am I simply missing something here?
There seems to be an issue with this version of Angular when trying to use ngModel in a directive.
https://github.com/angular/angular.js/issues/1924
When ngModel directive is used on an element that represents a component (implemented via a directive with isolate scope), ngModel is locked into this isolate scope and in order to get out and make ngModel useful the ngModel expression has to be prefixed with $parent.
As suggested in this thread I tried using the $parent prefix and could notice one way data-binding finding place.
<textarea id="froala-sample-2" froala ng-model="$parent.sample2Text"></textarea>
To get my model to be updated, I had to call $apply() in the froala-directive which forces a $digest().
ctrl.updateModelView = function () {
var returnedHtml = element.froalaEditor('html.get');
if (angular.isString(returnedHtml)) {
scope.$apply(function() {
ngModel.$setViewValue(returnedHtml);
})
}
};
I updated my POC on plunker for those who want to see it running.
I know this post is old, but for anyone looking for a solution, I fixed the issue by changing from:
<textarea froala="froalaOptions" ng-model="myHtml"></textarea>
to this:
<textarea froala="froalaOptions" ng-model="$parent.myHtml"></textarea>
I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.
my first steps:
1. clone angular seed from git
2. npm install into directory
3. npm start
my code:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
and here is my module:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
controller:
myApp.controller('MainController', function($scope) {
}
];
});
Any help is greatly appreciated.
thanks
my console errors in chrome are :
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
at http://localhost:8000/app/bower_components/angular/angular.js:63:12
at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)
i figured cloning angular-seed and running npm install would setup everything correctly
It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}])
and remove
<!-- Controllers -->
<script src="js/MainController.js"></script>
EDIT:
I tried to run your application without much overhead and it works. My files look something like this:
index.html
<html lang="en" ng-app='myApp'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css"> -->
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
app.js
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
MainController.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
}])
I hope this helps.
Your web server may not have access to read the js files inside your bower_components/angular folder. This has happened to me when one time.
Also like the above comment look at your browser console to see what kind of errors you see. Is MainController defined?
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.
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>