I'm working on an asp.net web api project, where Default.html calls certain web api endpoints.
Now I need to add another page, specifically another URL, say /About, to hold another kind of content.
I want /Default and /About share the same header and footer.
I have experience in asp.net webform, where I will write a master page like
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<asp:ContentPlaceHolder id="head" runat="server"/>
</head>
<body>
<div>Shared Header</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"/>
<div>Shared Fotter</div>
</body>
</html>
and each page is like
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
Hello world
</asp:Content>
Can I do similar in my current project? I want to keep server side as simple as possible. I don't like IIS Server Side Include because it requires IIS setup. I also want to avoid introducing server side nodejs. However, since I'm already using web api, I don't mind making more use of it.
I foresee all computations needed in my project can be done on client side, and currently they have been done on client side. Therefore if I introduce webform or MVC with empty server side logic, solely for the master page or layout, it seems not economic.
I'm inclined to use client-side solutions. Can AngularJS, ReactJS, VueJS, and sort of frameworks support this? Which one is easiest?
I heard HTML Import as well, but not sure how it will work.
It is difficult to answer your question because all of the frameworks you mentioned are capable of such "master paging". I use Vue.js in my everyday work so I can speak about that but it is only a personal preference.
In Vue.js you can use a "master page" with Vue-Router, you can read about it here:
https://router.vuejs.org/guide/#html
The main point is that you have to put a router-view tag into your "master page" and the replacement of the content will be managed by the router, based on the navigation (either programmatic by you or triggered by a user interaction).
I would suggest you use angularjs, what I am doing in one of my projects is basically I have one master .cshtml view in my project and this .cshtml includes header, footer, sidebar etc and to this .cshtml I reference all the angularjs controller and each angularjs controller has its own html.
The master view has its own angularjs controller as well.
Now lets suppose the user clicks on an option in the siderbar, lets say "invoice". Upon clicking on invoice, a function gets called in the angularjs controller of master view and that function simply changes the url to /invoice
In my app.js I am using $routeProvider which works like this:-
$routeProvider.
when('/invoice', {
templateUrl: 'Scripts/app/invoice/template/index.html'
})
so route provider basically changes the html according to the url and the html loaded in the browser has its own angularjs controller
Related
So I got to know about this method recently but I'am unable to understand that where do I use this method and is it necessary to use this method?
You don't need to use it if you don't mind about Server-Side Rendering(SSR).
There are 2 types of rendering Client-Side Rendering and SSR.
You can tell that a site uses SSR when you request a page using postman say for example http://youtube.com, the server returns the html markup together with dynamic data from the backend. It is very crucial for SEO purposes to allow bots to crawl your app. It also improves performance of your site by First Contentful Paint(FCP) and Time to Interactive (TTI) metrics.
rendertoString method is used in the server side to convert a react component instance into a HTML string.
On the other side, CSR just returns this markup from the server.
<html>
<head>
<!-- More tags here -->
</head>
<body>
<div id="root"></div>
<script src='/bundle.js'></script>
</body>
</html>
Most of the react-apps like create-react-app are client-side rendered. The markup with dynamic data is rendered by the browser.
I have an application that is not a single-page application and different pages are rendered after being sent to the client from an API. After I navigate to a page, say example.html, with this method, is it possible to use a <div ng-view> in example.html and route between different views within example.html with $routeprovider. Or does the Angular routing have to happen within index.html?
How would I do so? What would the directory structure need to be?
Thanks!
How should I proceed when inserting app in a view.
I have a template document the has one app already to control page content. I want to insert other apps in the view. My first app is getting called in the html tag and it is controlling different sections of the page except the view.
Views are another html document that is loaded into a section. Can this other html file contain another app?
I have been trying with include but the app isn't working.
Exemple of code:
<!DOCTYPE html>
<html ng-app="mid" lang="fr">
<nav ng-controller="navCtrl"></nav>
<main><ng-view><ng-view></main>
<footer ng-controller="navCtrl"></footer>
My view would contain :
<div ng-app="my-second-app" ></div>
<div ng-controller="second-app-Ctrl"></div>
Would that work?
When you include your 'My view' to your example code you are nesting AngularJS applications. You can't include another app as view. AngularJS applications cannot be nested within each other.
take look here, and here
It is possible if you use the manual angular bootstrap function, but I find it hard to believe that this is what you want. You don't need to specify another ngapp in the injected view to let him know he is within angular context, he already knows that, anything below the original ng-app you specified is automatically in angular context.
Using another angular app within an angular app should only make things complicated and probably unnecessary especially if you are new to angular.
Any way keep it simple , try using the developers guide in http://angular.org , they should give you a sense of how to start.
I am doing a project that uses AngularJS. I have created partial pages where each page has its own, different controller.
Site Structure
/ProjectRoot
/css
/js
angular.js
jquery.js
/partials
login.html
page1.html
index.html
index.html
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<ng-view></ng-view>
</body>
</html>
login.html
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
So the full login page is rendered as:
<!DOCTYPE html>
<html ng-app="demoapp" >
<head>
scripts
</head>
<body ng-controller="maincontroller">
<div class="main-page" ng-controller="logincontroller">
--code---
</div>
</body>
</html>
I need to share data between the controllers. I tried using $scope.$parent.variablename but when I refresh page1.html it contains a blank value.
My questions are:
How do I create global variables which I can use throughout the project, that is with all partial pages and their controllers (perhaps $rootScope)?
Is the use of a cache is better option or not? (security concern)
To share state between controllers you should use an Angular service. Services are easy to define and use (see example below) and since they are singletons they are a great place to store shared state information. No need for caches or anything complex.
But then you also said:
I tried using $scope.$parent.variablename but when I refresh
page1.html it contains a blank value.
Refreshing an Angular app is always going to be a problem.
This is because your typical Angular app is a Single Page Application (SPA). Your state information persists only as long as the lifetime of the app, which for an SPA is the lifetime of the page. Thus, if you refresh the page then you restart the application and all your state information is lost.
To solve this problem you can use sessionStorage. This technology is well supported across browsers and allows you to persist your state data between page refreshes. This is especially important in Angular apps because they should always gracefully support the user refreshing the page (which includes clicking on the back and forward buttons).
You can combine all this into a simple service that persists its data into sessionStorage. This gives you state data that is shared between controllers and persisted between page refreshes.
Here is an example (in coffeescript) that stores a state datum called userToken:
Service
angular
.module 'app'
.service 'storageService', StorageService
class StorageService
setStorage:(key, value)->
json = if value is undefined then null else JSON.stringify value
sessionStorage.setItem key, json
getStorage:(key)->
JSON.parse sessionStorage.getItem key
userToken:(value=null)->
if value is null
#getStorage 'userToken'
else
#setStorage 'userToken', value
You can add as many data values to this service as you like, you can even store complex objects
Once you have defined a service you can use Angular's dependency injection to easily get hold of the service instance. Here are a couple of example controllers that show the storageService being injected and used:
Controller
angular
.module 'app'
.controller 'logincontroller', ($scope, storageService)->
$scope.setUserToken = (token)-> storageService.userToken(token)
.controller 'maincontroller', ($scope, storageService)->
$scope.userToken = storageService.userToken()
How can I manage my header layouts in AngularJS? Say I have a master layout as such:
<html ng-app>
<header>
<!-- My header Files -->
</header>
<body>
<!-- My content -->
</body>
</html>
Different pages have different javascript/css files that need to run. How can I manage this with AngularJS route? With Laravel blade, layout/templates/partials is really simple. Is there something like that for angular was well?
I am not familar with Laravel Blade. But you should be able to achieve what you need by simple using the ng-view directive.
This is official guide provides details with how to use $routeProvider combined with ngView