I'm using ng-include to attach some HTML pages to one HTML page in AngularJS.
Find the Main.html page code
<!DOCTYPE html>
<html ng-app="Test">
<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.2.26/angular.min.js"></script>
</head>
<body ng-controller="userController">
<div class="container">
<div ng-include="'test1.htm'"></div>
<div ng-include="'test2.htm'"></div>
</div>
</body>
</html>
test1.html code
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Full Name:
</body>
</html>
Seems like nothing wrong in my code. But when I load it in browser nothing is displayed and I get console error says,
Uncaught Error: [$injector:modulerr]
http://errors.angularjs.org/1.2.26/$injector/modulerr?p0=Test&p1=Error%3A%2…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.26%2Fangular.min.js%3A18%3A387)
Please help me to resolve the issue.
The Error is here
<html ng-app="Test">
you have to define a new module to use it as app
something Like that
MainModule.js
var app =angular.module("myApp",[]);
app.controller("myCTRL"["$scope",function($scope){
}]);
then include that js file into your project to use it
Like that
<!DOCTYPE html>
<html ng-app="myApp">
<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.2.26/angular.min.js"></script>
<script src="assets/js/MainModule.js"></script>
</head>
<body ng-controller="myCTRL">
<div class="container">
<div ng-include="'test1.htm'"></div>
<div ng-include="'test2.htm'"></div>
</div>
</body>
</html>
you have to include the 'angular route java script file in head tag.
Like this,
<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.2.26/angular.min.js"></script>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.route.js"></script>
</head>
Related
I am not sure what is wrong with my code. When I open it in Firefox, it doesn't do anything.
However, copying it into fsfiddle it works
Am I missing a JavaScript file for jQuery templates but I thought this was added to jQuery in 1.5
why
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-3.4.1.js"></script>
<script src="scripts/main.js"></script>
<meta charset="UTF-8">
<title>Exam Random Generator</title>
</head>
<body>
<div id ="mainContainer"> </div>
<script id="questionTemplate" type="text/x-jQuery-tmpl">
<div class="questionContainer">
<p class="question">${sQuestionText}</p>
</div>
<br/>
</script>
<script type="text/javascript">
// Render the books using the template
$("#questionTemplate").tmpl(oQuestions).appendTo("#mainContainer");
</script>
</body>
</html>
My Simple Angular JS app isn't working. Can anybody help me out, the following is the code. Index.js is the main file which includes a script file controller.js .
The browser does not shows any errors when I try to run the app:
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.name="Angad";
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>Welcome</title>
</head>
<body ng-controller="myCtrl">
<nav>Navigation</nav>
<div ng-controller="myCtrl">
<input type="text" ng-model="name">
<h1>{{name}}</h1>
</div>
<footer>Copyright-2017</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
it is due to script loading statement
change
<script src="js/angular.min.js" />
<script src="js/controller.js" />
with
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
Simple Angularjs app works without a webserver.
Your example will also work.
Just close the script tag properly.
<script src="js/angular.min.js"></script>
<script src="js/controller.js"></script>
I'm trying to learn Angular.JS, so I wrote this simple code just to test it:
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
In the browser I'm supposed to see the following output: The sum of 5+10 is: 15, but I just see it as it is: The sum of 5+10 is: {{5 + 10}}. I tried it both in Chrome and FF, I tried to add the angular.js from Google CDN with <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>, I tried to move the script between the <head> tags, but the outcome is always the same.
What am I doing wrong? Why don't I have the output correctly?
<html ng-app="myapp">
When you specify a name for ng-app, it's expecting to find a user-created module with that name. If you're truly just wanting your example to work, you can simply remove the ="myapp" and you'll be all set.
<html ng-app>
If you want to keep your "myapp" name, add this script block after you load angular.
<script type="text/javascript">
angular.module('myapp', []);
</script>
Either remove name initialization in html:
<html ng-app>
Or initialize module in your javascript file:
var myapp = angular.module("myapp", []);
Second way is better.
Just use "ng-app":
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body ng-app>
{{ 5 + 10 }}
</body>
</html>
Fiddle here.
This should work.
You need to instanciate the module myapp you are using here
<html ng-app="myapp">
with the following:
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
The final html is like this:
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<title>Angular.JS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('myapp', []);
</script>
</head>
<body>
<script type="text/javascript" src="js/myapp.js"></script>
<p>The sum of 5+10 is: {{5 + 10}}</p>
</body>
</html>
I've had a look at similar answers but haven't seen an answer to this.
My directory structure is simply:
Test
|---index.html
|---bootstrap.min.css
|---angular.min.js
|---app.js
My code:
<!doctype HTML>
<html ng-app="store">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Sadly, running this in the browser (file:///Users/Will/Projects/angular/demo/index.html), it doesn't work. Is this because it's local?
Consider that the following works when loaded directly from the filesystem (and not a webserver):
<!doctype HTML>
<html ng-app>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="angular.min.js"></script>
<p>I am {{4 + 6}}</p>
<p>{{"Hello" + " you"}}</p>
</body>
</html>
Note that I have changed "ng-app='store'" to "ng-app", so that angular is not trying to load the 'store' module.
This shows that angular, on its own, is doing its thing correctly. So the issue is somewhere within the store module. As suggested in the comments, check your browser console for error messages, and troubleshoot those.
For my Chrome Extension's options page, I'd like to use Angular.js (just for the options page, not for the extension's background JS or content scripts), but including it in my page and doing something like:
<!doctype html>
<html ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>
...throws this error in the dev tools console and nothing runs:
Error: Code generation from strings disallowed for this context
I assume it's because Angular is trying to write tags to the page or assign inline event handlers or something that runs inline JS, which is not allowed in Chrome extensions, so is there any way around this? Can I tell Angular to avoid using inline JS somehow, for example?
You can use manifest_version: 2 by specifying that angular run in CSP-compliant mode. Just add the ng-csp attribute to the <html> in your panel page.
So your HTML would be like this:
<!doctype html>
<html ng-csp ng-app>
<head>
<title>Shortkeys Options</title>
<script src="../js/jquery.min.js" type="text/javascript"></script>
<script src="../js/angular.min.js" type="text/javascript"></script>
<script src="../js/options.js" type="text/javascript"></script>
<link rel="stylesheet" href="../css/options.css" />
</head>
<body>
<div ng-controller="OptionsCtrl">
<div ng-repeat="key in keys"></table>
</div>
</body>
</html>