Default View
<html>
<head>
//angular source
</head>
<body ng-app="angular">
//header
// login and register button
<div ng-view></div>
// footer
</body>
</html>
Profile View
<html>
<head>
//angular source
</head>
<body ng-app="angular">
//header and menu
<div ng-view></div>
// footer
</body>
</html>
When i try to log in, i am in Default View. After successfully logged in, i want to move a new view (Profile View). Is it possible in angularJS ??
So the difference is in the header and menu? Why not just use something like ng-show to conditionally check which view you're in (using $location) and update like that.
Or if you really want to keep those pages separate, you could create new static content that loads a different angular app that's 'logged in'. But I don't think this is good design.
one thing you can do make user of AngularJS Routes
http://tutorials.jenkov.com/angularjs/routes.html
just go through with this tutorial you will get some hint
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 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.
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'm teaching myself Angular and I've looked over a number of examples that show how to bind a model to an HTML input so that they always contain the same text.
I understand that Angular also provides the $location service which works with the URL.
I have an application that I'm thinking of partially rewriting in Angular as a learning example.
In my example, I have an HTML input that I keep synced up with a model using jQuery and also synced up with a hash URL.
Is there a simple way of accomplishing this with AngularJS?
Consider the example application bellow:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
function FirstController($scope, $location) {
var data = {
bar: 'hello world'
};
$scope.data = data
}
</script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstController">
<input ng-model="data.bar" />
<h2>{{ data.bar }}</h2>
</div>
</div>
</body>
</html>
This is a simple example showing how the model can be kept synced with a textbox. I was wondering if it's possible to keep it synced with a hash URL, as well, so that we would have http://www.example.com#bar=What_The_User_Typed
What you probably need is the $routeProvider
https://docs.angularjs.org/tutorial/step_07
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>