I have created a working web page page.html, which loads page.css and page.js in the header:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
Prior to that, I had already a homepage. Now, I want to create a state of homepage that leads to subpage.html which should have exactly the same behaviour as page.html:
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('subpage', {
url: '/subpage',
templateUrl: '/subpage.html',
...
});
}])
However, it seems that, unlike page.html, subpage.html has NO header place to load page.css and page.js.
So, what is the best way to set the fields of the subpage state and write subpage.html, from page.html, page.css and page.js?
Would it work if I just load page.css and page.js in the header of the html of the home page? There is a risk to have conflicts with existing items in the home page, no?
Yes. I realise that, in the beginning of subpage.html, we could load directly js and css:
<script src="page.js"></script>
<link href="page.css" rel="stylesheet" type="text/css" />
One advantage of loading in subpage.html rather than in homepage is that we load these files only when we need them (i.e., opening the subpage).
In terms of "conflicts" with the home page. I guess, it is more or less similar to having js and css later in the homepage or never (when we don't open the subpage).
Related
I am trying to embed a public FB post into the main page of my application. I am following FB guide and it's pretty simple. It works when I do it in .html file, but doesn't with Next JS.
Basically, instructions are that you need to insert this right after the body opening tag
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&autoLogAppEvents=1&version=v9.0&appId={appId}" nonce={someNonce}"></script>
and then you put the other part wherever you want.
I even created a custom _document.js file and included this script, I can also see it in the browser. But the post does not get loaded.
Anyone had this kind of issue?
Assuming you already have the JS SDK loaded in your document, like you mentioned (you might also load the script on-demand via JavaScript if preferred).
// pages/_document
class MyDocument extends Document {
render() {
return (
<Html lang="en">
<!-- additional code -->
<body>
<!-- additional code -->
<script
async
defer
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"
/>
</body>
</Html>
);
}
}
You can then render a Facebook post inside one of your components with:
<div
className="fb-post"
data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
/>
For further details refer to the official Embedded Posts documentation.
I have a cakephp app which I need to redirect some of its urls to some pure html pages. I can not change these html files as a layout and .ctp file. how can I control the routes of urls like:
mysite.com/en/something
to show some html files in the host?
For your route : mysite.com/en/something
Open you routes file located at app/Config/routes.php
Add this line
Router::connect('/en/something', array('controller'=>'pages','action'=>'something'));
In your Pages controller located at app/Controller/PagesController.php Add action to handle this route
class PagesController extends AppController{
public function something(){
//To disable the layout set it to false
$this->Layout = false;
}
}
And then, put your html code in the view located at app/View/Pages/something.ctp
<html>
<head>
<!-- your page headers -->
</head>
<body>
<!-- your body content -->
</body>
</html>
See image
=>Layout1 master page which include ng-view in that i used angular routing.
=>Layout2 login.cshml page when I tried to call login page
http://localhost:1395/admin/home/Login
this login page included in ng-view which i donot want
its total different page Login.cshtml
I called this page like
Log out
when I tried url directly in address bar like http://localhost:1395/admin/home/Login
it works fine see image
but i tried from master panel to login page it shows wrong see first image
example code
master.cshtml
<html>
<body>
<div>Layout 1</div>
<div ng-view></div>
</body>
</html>
contact.html
<div ng-controller="contactcontroller">
Contact Page
</div>
help.html
<div ng-controller="helpcontroller">
Help Page
</div>
routing code
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/admin/home/contact", {
templateUrl : "contact.html",
controller: "contactcontroller"
})
.when("/admin/home/help", {
templateUrl : "help.html",
controller: "helpcontroller"
})
});
Login.cshtml
<html>
<body>
<div>Layout 2</div>
///Login code
</body>
</html>
when I call this url admin/home/help and admin/home/contact pages included in ng-view but when I call admin/home/login i donot want this include in ng-view it is separate header and footer . I want call as separate page
Thanks in advance
It is hard to understand this, but I'll take a shot at answering the question.
Your problem is probably unrelated to angularjs, what it seems to me is, that you're probably using ASP.NET MVC and your Login action is rendered inside the master layout. Basically you need to render the page without the template. See this question and answers there: Razor View Without Layout
I will also point out that angular is used for single page applications and it is hard to mix angular and ASP.NET MVC routing. You should probably decide which routing you will use. Sure, you can use .NET and initialize angular in every page, but I don't recommend this. If you can, build all your pages in angular and then then use ASP.NET Web API as a back-end.
Also you don't need to use ng-controller attribute when you use routing and specify controller.
Folks I have real odd situation that doesn't seem to make sense to me at all. Here's my setup:
<html ng-app="mainApp">
<head>blah</head>
<body>
<header ng-controller="headerCntrl">
Profile
</header>
<blah>
<main ng-view></main>
<footer />
</body></html>
The header has it's own controller, then I use ngRoute to define various paths, including the profile:
.when('/profile', {
templateUrl: 'views/profile.html',
controller: 'profileController'
})
For some reason, clicking in the a href link in the header does nothing. No error, no activity. It does show the correct URL when you hover over the link, and, right-clicking and opening in new tab DOES work just fine.
Why does a normal left click not work? Bearing in mind that either:
Typing that route in directly into address bar &
Right click - open in new window
both work, what's stopping angular from loading that view into the div?
Any help much appreciated!
I think problem is that you do not specify base url. Try it.
When using html5mode(true) views are not loading on page refresh in angular.js
<base href="/">
<div ng-app="directives" >
Home
about
contact
<div ng-view></div>
</div>
in config
directives.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
$routeProvider.when("/",{
templateUrl:"directives/home.html"
}).when("/home",{
templateUrl:"directives/about.html"
}).when("/about",{
templateUrl:"directives/contact.html"
}).when("/contact",{
templateUrl:"directives/about.html"
}).otherwise({
redirectTo : "/"
})
$locationProvider.html5Mode(true).hashPrefix("!")
}])
http://127.0.0.1:58552/about
not rendering the proper view.
That's one of the drawbacks of using html5Mode(true).
Basically you server can't find the resource as there is none under that URL. The address is controlled by Angular and at the point, Angular hasn't kicked in to control the pages and URLs and stuff.
The solution I found for this problem was to set up an URL rewrite (http://httpd.apache.org/docs/2.0/misc/rewriteguide.html) on my Apache server to clean up the URLs and remove the html5Mode(true).