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
Related
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
I am developing an Angular application that will be hosted within another third party applications' "html view". This application does not have a webserver behind the scenes; instead, it just serves the files locally.
This means that we cannot load partials the normal way (some restriction related to xhr loading files directly from the local file system, see this question I posted a while ago explaining the problem). I've had to make use of the ng-template directive, e.g.
<script type="text/ng-template" id="tpl-mytemplate">
<div> Hello, World!</div>
</script>
What I want to know is if it is possible to use the src attribute so that I do not need to inline all of my partials, resulting in a ridiculously large html page. e.g
<script type="text/ng-template" id="tpl-mytemplate" src="partials/mytemplate.html">
</script>
I am new to AngularJS, was trying to have common header part for entire project. I could not find any solution yet.
I have following header.html to be included all inner page.
<html>
<head>
<link href="..." ...>
<script src="angular.js" type="text/javascript"></script>
</head>
<body>
I used to include above part in any page by using server side. I am wondering if there anything in angularjs available so that I can continue with simple html pages instead of making it server side pages.
I am aware of directives in angularjs but, it needs all above includes already in page to get it worked, so only after <body> tag only it is usable. Anything before <body> tag cannot be made as common by using directive...
Any help would be great...
I am looking for some guidance with creating an AngularJs multi-page app served by a Laravel Backend. All web app tutorials on the net point to creating SPAs and I am just getting started with Angular - so please go easy on me.
ProductPage example - http://example.com/products/widget
<html data-ng-app='ExampleApp'>
<head>
</head>
<body data-ng-controller='ProductController'>
// ProductPage Content Served by laravel with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/ProductController.js"></script>
</body>
</html>
CartPage Example - http://example.com/cart
<html>
<head>
</head>
<body data-ng-controller='CartController'>
// CartPage Content Served by web-server with angular tags
<script type="text/javascript" src="/js/lib/angular.min.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/CartController.js"></script>
</body>
</html>
So in the above examples, I have created two pages, which are served by the web server with pretty much all static content. But the pages have been marked up with angular tags. On each static page, I have referenced a different AngularJS controller.
Is this the right way of tackling the problem or should I be allowing app.js to load up the controllers / inject the dependencies?
Also, any guidance on sharing data between controllers in this multi-page app and links to decent resources / examples would be really helpful. e.g Would I need to pass e.g. Items added to shopping cart to an api from the product page, then query this api again to retrieve the cart contents?
You should include the ngRoute module and let AngularJS load the controllers for you. Please refer to AngularJS docs to find out how to work with routings.
As for sharing data between controllers, services are what you're looking for. Creating a service is as easy as this:
app.factory("ServiceName", [function() {
return {
somevar: "foo"
};
}]);
Then, in your controllers, you inject the service like this:
app.controller("ContactCtrl", ["$scope", "ServiceName", function($scope, svc) {
$scope.somevar = svc.somevar;
}]);
The service's state is retained for as long as you don't cause a physical page reload (which is why you should use ngRoute to load your controllers).
Here you can use ngroute directive with assigning controller name dynamically.
If we use ngroute , then ngroute $scope is parent scope for both pages(html views).
Form this scope you can easily pass data from one controller to other controller.
Probably the best boilerplate/template system that I have found is Yeoman. It has a large number of great Angular templates that you can use as a starting point, and also supports automatically creating models, views, etc. from subtemplates of the main template that you choose.
Take a look at the Yeoman Angular generator, it's one of the more well-maintained angular templates that will give you a good feel for the capabilities of using a Yeoman generator.
I've worked with ngSeed for the past two years now. When it got updated to use $state it felt like a decent way to do larger apps with Angular.
Things to remember:
modularize around functionals (not layers like most tutorials do),
keep your modules small and clean,
never use $rootScope,
encapsulate shared state in a service,
don't broadcast events, but watch state,
…
Check out fountainjs. They have good boilerplates for different UI technologies.
I put a basic angular multipage boilerplate on github. It covers a working example of ngRoute and the loading of html partials and images. There's also an angular button in one of the partials that logs a message to the console. Hope it helps
https://github.com/PrimeLens/angular-multipage-boilerplate
edit: there is a controller that encompasses all pages to hold data that you might want to pass from page to page.
I have a Yeoman scaffolded Angular-JS+Twitter Bootstrap seed project. I use the Bootstrap navbar on every page of the site for, you guessed it, navigation.
What is the best way to include this in an Angular project... directly within index.html, as a view? Ideally I ought to encapsulate the entire navbar div as a template and simply call it out, just not sure exactly how to do so.
If it should be included on every 'page', include it in your index.html with ng-include.
You would have something like:
<body>
<div ng-include='"path/to/partials/navbar.html"'></div>
...
</body>