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
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 the ui-router in my angular 1.4 app. I currently have the ng-app like this:
<div class="container main-content" ui-view ng-app="myApp">
</div>
The templates are loading fine directly. I know need to move the ng-app directive to the html tag:
<html ng-app="myApp">
...
</html>
I am using a modulebased approach per page:
$stateProvider.state('myview', {
url: '/myview/:id',
templateUrl:'app/modules/myview.html',
controller: 'MyViewController'
So each page has a state definition seperately.
After moving the ng-app to the html tag when I click on a different route the url changes in the browser but wont load the template? Is this related to the ui-router config or something else?
The issue was that instead of using ui-sref as a link href was used.
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
Hi, I am trying to create a single page application using AngularJs
and Asp.net MVC4. To start off, I tried to do basic navigation using
angular. I followed below steps.
Create MVC4 web application, Selected internet application,
Downloaded AngularJs libraries from Nuget,
Referenced it in Bundles.config file Gave reference of Angular in my
_layout.cshtml page,
Wrote app.js file for routing
Below is the code.
This is my bundles.config file
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular.min.js",
"~/Scripts/angular-route.js",
"~/Scripts/angular-animate.js",
"~/Scripts/app/app.js",
"~/Scripts/app/js/controllers.js"));
This is my _Layout.cshtml file. As you can see I have used ng-app
directive to let html understand about angular.
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body ng-app>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">#Html.ActionLink("your logo here", "Index", "Home")</p>
</div>
<div class="float-right">
<section id="login">
#Html.Partial("_LoginPartial")
</section>
<div class="nav-collapse">
<nav>
<ul class="nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>Contact</li>
</ul>
</nav>
</div>
#*<div ng-view></div>*#
</div>
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
<div ng-view></div>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#RenderSection("scripts", required: false)
<script src="~/app/app.js"></script>
<script src="~/app/js/controllers.js"></script>
</body>
</html>
This is my Index.cshtml file
#{ViewBag.Title = "Home Page";}
<h1>Angular Tutorial</h1>
<p>This is an online searchable database for food and nutrition information.</p>
<h3>We suggest the following:</h3>
I did routing in app.js file which is as follows
'use strict';
angular.module('myApp', [
'myApp.controllers',
'ngRoute'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/Home/Contact', { templateUrl: 'Views/Home/Angular.html', controller: 'MyCtrl1' });
$routeProvider.otherwise({ redirectTo: '/Home/About' });
}]);
And last this is my controller. I have written an alert message to
check if angular is working.
'use strict';
angular.module('myApp.controllers', [])
.controller('MyCtrl1', function ($scope) {
alert('Hello from partial One');
});
I don't know what is it that I am doing wrong. I tried several
tutorials but could not make it SPA. Please help me. I really want to
solve this now. This is getting on my nerves now. Thanks a lot in
advance.
Using Angular and MVC is actually using two MV* frameworks at the same time.
My suggestion is to pick one and use it. Don't try to use both at the same time as it will just conflict with each other and get you more confused.
Since you're wanting to create a SPA, then your choice should be Angular. ASP.NET/MVC4 isn't going to give your a SPA, but it can give you a full-featured website.
Plan out what you want first, then pick the technology to get yourself there. Don't pick the technology first.
You're including angular.js and angular.min.js. That could be the issue...nothing else immediately jumps out at me.
I see a couple of problems:
your including angular.js and angular.min.js in the same bundle:
The bundle minimizes the js files automatically when your not in "optimization" or "debug" mode, so dont reference them at all.
Your using multiple ng-app tags and I didn't really see a good reason for that:
Each application has one ng-app="".
Your mixing up two different concepts(asp.net razor views + angular js):
You need to do this smart and gently. If you want to gain razor's strength for using html helpers\bundles etc. then that's ok only if your sure you know what your doing. How are you going to bind data to your models? I think that you should change you concept and work with asp.net web api instead and use angular "the right way" without mixing stuff up.
If you don't need anything more than a basic page with some Angular, in Visual Studio, just create an 'ASP.NET Empty Web Application' then add the Angular packages you need, an html file and a JavaScript file and off you go. I did this recently while learning angular and made a simple image carousel with basic navigation. If it helps you out at all, I have GitHub repo with my solution:
git clone https://github.com/antonosmond/AngularCarousel
It should give you an idea of how to get started with Angular JS and Visual Studio, without all the complexities of trying to integrate Angular into an MVC app.
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>