I am using ng-include to call the header content and the footer,
like this :
<div ng-app="app">
<div ng-include="'pages/header.html'"></div>
<script src="js/Listenrs.js"></script>
<!-- more content -->
</div>
I have a native js file with event listeners that is in the js folder, without the ng-include all the listeners are working but when using ng-include all the event listeners are ignored, a check alert inside the script shows the browser did not ignore the file but besides the alert the listeners dont work.
You should include JQuery library before AngularJS library in your index file for any lazy-loaded scripts to be compiled and added to the JS namespace automatically. Please look at the following code.
[index.html]
<head>
<script src=jquery.js>
<script src=angular.js>
</head>
<body>
<ng-include src="templateurl"></ng-include>
</body>
[template.html]
<head>
<script>
alert(" script loaded")
</script>
</head>
You will get the alert in the above configuration.
Related
I have a problem with my single Page Application. When I start my Project with the keyuser.html as first site(home page) the Table from the connected Database is shown with the Data. When I use the normal home.html as entry Point for my Program, I can click the Hyperlink to my keyuser.html file, the controller does the necessary routing and I am on my keyuser.html site. But here is just the update Button, but not my Table with my Data.
+++++++++ keyuser.html ++++++
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="update()">Update</button>
<div id="flexGrid"></div>
</body>
</html>
<script>
var cv = new wijmo.collections.CollectionView();
var flexGrid = new wijmo.grid.FlexGrid('#flexGrid');
flexGrid.itemsSource = cv;
// Get Data
wijmo.httpRequest("/api/Colors", {
success: function (xhr) {
cv.sourceCollection = JSON.parse(xhr.response);
}
});
</script>
++++++++++++ control.js ++++++++++++++
var app = angular.module("myApp", ["ngRoute"]);
app.config(function ($routeProvider) {
$routeProvider
.when("/keyuser", {
templateUrl: "keyuser.html"
});
++++++++++++ home.html ++++++++++++++
<!DOCTYPE html>
<html>
<head>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
</head>
<body>
<div ng-app="myApp">
Stammdaten
<div ng-view></div>
</div>
There are multiple things wrong here.
First of when loading HTML templates with routing the entire template gets loaded into the ng-view element. Which means that in your case the doctype tag, html tag, body tag and all the other tags are loading twice which might break your page.
Secondly when using AngularJS do not write your javascript in script tags, instead start using controllers, directives, componentens and services.
And last, make sure to include the correct AngularJS scripts like angular.js and angular-route.js
In general i highly recommend just going through the basics of AngularJS before proceeding because i feel like you are missing those.
I'm creating a sailsJS application and using AngularJS for the front-end.
This is my index.ejs file
<!DOCTYPE html ng-app="myApp">
<head>
<title>Title</title>
<!-- load socket.io, angularjs, filters, special fonts, jquery, bootstrap -->
<!-- Application JavaScript -->
<script src='/js/app.js'></script>
<script src='/js/controllers/indexCtrl.js'></script>
</head>
<body ng-controller="indexController">
<div ui-view></div>
</body>
</html>
and this is my app.js file
var myApp = angular.module('myApp', ['ui.router', 'angular.filter']);
console.log('this is executing');
and this is my indexCtrl.js file
angular.module('myApp').controller('indexController', ['$scope', '$http', function($scope, $http) {
console.log('check if its executing');
}]);
I'm not getting a console log from indexCtrl.js file but I am from the app.js file
This is my folder structure
- Api
- Assets
--> images
--> js
--> controllers
-->indexCtrl.js
--> dependencies
--> directives
--> services
--> app.js
--> styles
--> templates
--> views
- Config
- node_modules
- tasks
- views
-->index.ejs
Something about your opening html tag doesn't feel right. I've never seen the DOCTYPE tag and <html> tag fused together like that. Try something like this instead :
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Title</title>
...
...
</html>
A few other things you can check :
In your browser's developper console, check to make sure the request for /js/app.js and /js/controllers/indexCtrl.js went through and didn't return any 404 (Network tab in Chrome and Firefox)
Make sure there are no Javascript errors in the console
Note : the fact that you were seeing the console.log from App.js only means the Javascript file was being downloaded and interpreted, but not necessarily that your Angular app was starting correctly (because the console.log is placed outside of any Angular function).
My problem is that my html load the .js and .css before ng-include finished,
Then this libraries not found the elements that are loaded in include.
Example:
<html>
<head>
<link href="assets/css/modern.min.css" rel="stylesheet" type="text/css">
<script src="assets/js/modern.min.js"></script>
</head>
<body>
<div ng-include="html_2"></div>
</body>
</html>
when modern.js is loaded, html_2 is no finished so this not working because modern no found the element of html_2
Where are you loading your angular application script? Maybe you can use a library like headJS or labjs to ensure the order of your scripts load.
e.g.
head.load(modernjsScript, function(){
head.load(angularjs, function(){
head.load(yourApplicationsScript)
});
})
On my website i'm displaying the same header on each page and I wanted to know if there's an AngularJS / jQuery or simple JS solution to load only the content of the body and not the header on page change.
<html ng-app="headerApp" ng-controller="HeaderCtrl">
<head>
<!-- here I load my JS and css ... -->
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-include="'templates/IndexBody.tpl.html'"></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
So my HTML looks like this I have separate template for each parts. But for now I create a html file for each pages. So I think there's a way to change the ng-include in the body.
Thanks for your help !
This is kind of the idea behind single page applications. Angular provides a built-in router that does this for you, and there is also the popular ui-router plugin.
You would change your view to:
<html ng-app="headerApp">
<head ng-controller="HeaderCtrl">
<div ng-include="'templates/Header.tpl.html'"></div>
</head>
<body>
<div ng-view></div>
</body>
<footer><div ng-include="'templates/Footer.tpl.html'"></div> </footer>
</html>
and configure the router in app.js:
angular.module('headerApp', ['ngRoute']).config(function($routeProvider){
$routeProvider.when('/', {
templateUrl: 'templates/IndexBody.tpl.html',
controller: 'IndexBodyCtrl'
});
});
Note that you will need to include angular-route.js in your index.html. More reading here: https://docs.angularjs.org/api/ngRoute
If it's an Angular app would you not use ng-view? Everything outside the view is the template and static as such. If you aren't building a spa then Angular probably isn't the best approach.
If it's Jquery then you could just do:
$("article").load('templatefiletoload.html');
beware that loading in your content like this is poor from an SEO point of view. Use server side includes if possible
I am new to ServiceStack and Angular. Apologies if this is verbose.
with reference to Html5 pushstate Urls on ServiceStack
I would like to be able to have my api service served up from the root. ie http://mydomain.com/
If a user browses the route, I would like to serve up a default html page that bootstraps my angular app.
In the the app itself if angular calls mydomain.com/customer/{id} json should be served but if this is browsed directly it should serve the default html page and keep the url but the route in the service method does not need to be called. as this will be resolved by angular which will call the customer service itself for a json result.
There are probably a few different ways to make this work, as long as you don't need to support html5mode urls. I have hope that I'll be able to leverage this code to eventually support html5mode, but at the moment, I've resigned myself to hash based URLs.
Given urls like: http://example.com/ or http://example.com/#/customer/{id}, here's how to bootstap an angularjs single page app on a self-hosted servicestack project from the root of the domain.
To enable the markdown razor engine, add this to your AppHost config (not absolutely necessary, but my preference over the default razor engine):
Plugins.Add(new RazorFormat());
Place a file, default.md, in the root of your project, and ensure it's properties are "content/copy when newer". Put whatever content you want in there. The important thing is to assign the template file. (If you're using the default razor engine, an equivalent default.cshtml file should also work, but I've never tried it. ) The template file is what will bootstrap your angularjs app. This is what I have in my default.md:
#template "Views\Shared\_Layout.shtml"
# This file only exists in order to trigger the load of the template file,
# which bootstraps the angular.js app
# The content of this file is not rendered by the template.
My _Layout.shtml file looks like this (omitting irrelevant details). Note ng-app in the html tag, and the ng-view div in the body. Also note that I don't include <!--#Body--> in the file. I'm not using server side templates for this project.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="Content/css/app-specific.css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Navbar goes here -->
<div class="container">
<header id="header">
<!-- Header goes here -->
</header>
<div ng-view></div>
<hr>
<footer id="footer">
<!-- Footer goes here -->
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="/Scripts/app-specific/app.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-services.js?3ba152" type="text/javascript"></script>
<script src="/Scripts/app-specific/app-controllers.js?3ba152" type="text/javascript"></script>
</body>
</html>