Getting my feet wet with Angular.Dart. Reviewing these Exercises on GitHub
In chapter 2, when running index.html I noticed the classic flicker before mustaches replaced with data.
Applied the usual 'data-ng-cloak="" ' only to be shown a blank screen.
Removed 'data-' and all is well.
Is this a Dartanium issue or is data-?? no longer applicable for Angular.Dart?
<!DOCTYPE html>
<html ng-app>
<head>
<title>Chapter Two - A Simple Recipe Book</title>
<link rel="stylesheet" href="../web/style.css">
</head>
<body>
<div recipe-book ng-cloak=""> <!-- blank screen if using 'data-ng-cloak' -->
<h3>Recipe List - {{ctrl.CtrlName}}</h3>
<ul>
<li class="pointer"
ng-repeat="recipe in ctrl.recipes"
ng-click="ctrl.selectRecipe(recipe)">
{{recipe.name}}
</li>
</ul>
<h3>Recipe Details - {{ctrl.CtrlName}}</h3>
<div><strong>Name: </strong>{{ctrl.selectedRecipe.name}}</div>
<div><strong>Category: </strong>{{ctrl.selectedRecipe.category}}</div>
<div><strong>Rating: </strong>{{ctrl.selectedRecipe.rating}}</div>
<div>
<ul>
<li ng-repeat="ingredient in ctrl.selectedRecipe.ingredients">
{{ingredient}}
</li>
</ul>
</div>
<div><strong>Directions: </strong>{{ctrl.selectedRecipe.directions}}</div>
</div>
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
<script type="application/dart" src="../web/main.dart"></script>
<script type="text/javascript" src="packages/browser/dart.js"></script>
</body>
</html>
As far as I know the 'data-` prefix is not yet supported but work in progress.
here you find the discussion https://github.com/angular/angular.dart/issues/519
You need to add the CSS that supports ng-cloak
see also angular.dart seems to be slow
Related
I am have ASP.Net MVC5 Web application & in need to integrate Angular5 app with it.
Referring to the below link, I am doing the integration.
Integrate Angular 5 with ASP.NET MVC 5
This command can only be run inside of a CLI project
When running the standalone Angular5 app, it runs fine. but when the same component integrating with Razor view, I am getting the below error.
The selector "app-root" did not match any elements
It's been more than a day that I spent on fixing this.
Index.cshtml looks as below.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Page - My ASP.NET Application</title>
<link href="/bundles/styles.bundle.js" rel="stylesheet"/>
<script src="/bundles/inline.bundle.js"></script>
<script src="/bundles/polyfills.bundle.js"></script>
<script src="/bundles/scripts.bundle.js"></script>
<script src="/bundles/vendor.bundle.js"></script>
<script src="/bundles/main.bundle.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="container body-content">
<div class="row">
<app-root></app-root>
</div>
<hr />
<footer>
<p>© 2018 - My ASP.NET Application</p>
</footer>
</div>
</body>
</html>
Thanks.
OMG!!
Two steps fixed this big head breaking issue:-
added <base href="/"> in head section
moved the bundles in the bottom of page i.e., just before the closing body tag
#Styles.Render("~/Content/Styles")
#Scripts.Render("~/Scripts/Bundles")
</body>
Hope this helps!!
Keep the code in Index.cshtml as below. It should work.
<html>
<head>
<base href="/" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="~/Scripts/lib/runtime.js"></script>
<script type="text/javascript" src="~/Scripts/lib/polyfills.js"></script>
<script type="text/javascript" src="~/Scripts/lib/vendor.js"></script>
<script type="text/javascript" src="~/Scripts/lib/main.js"></script>
</body>
</html>
I had this problem, but then realised the cause was that I hadn't wrapped my static script references in the #section scripts tag as per the demo, and they were above the app-root tag. The layout needs to write the scripts into the page after the app-root tag. If the tag appears before the references, you'll get that error message.
I have tried everything I can think of, but my page loads weirdly. With no style or form, and for the life of me, I have no clue why! Here is my code below : and attached is a picture of the outcome I get when running the code.
My outcome when I run this code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="js/jquery.js"></script>
<script src="_assets/js/index.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
<ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:centure;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">Click
Me</button>
</div>
</div>
</body>
</html>
It's a simple typo. The first <ul> in your header's navbar is not closed.
Somehow jquery-mobile dont like this and stops rendering with a error. You should see this error in your browsers dev tools.
If your references to jquery and jquery-mobile are correct. it should work if you close the <li> tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Demos</title>
<link rel="shortcut icon" href="favicon.ico">
<!-- jQuery Mobile -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="_assets/js/index.js"></script>
<!-- jQuery Mobile -->
<script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<div data-role="page" data-theme="a">
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="_assets/css/jqm-demos.css">
<div data-role="header">
<div class="ui-btn-active" data-role="navbar">
<ul>
<li>
Find Us
</li>
<li>
Call Us
</li>
</ul>
</div>
</div>
<div class="ui-content" data-role="main">
<ul data-filter="true" data-insert="true" data-role="listview">
<li>
Brussels
</li>
<li>
Dublin
</li>
<li>
Cape Town
</li>
</ul>
</div>
<div data-role="footer" style="text-align:center;">
<button class="ui-btn ui-icon-plus ui-btn-icon-left">
Click Me
</button>
</div>
</div>
Beside that, you have others error in your code.
You should insert your personal javascript code <script src="_assets/js/index.js"></script> after jquery and jquery-mobile. If you do so, you're always sure, that all libraries are loaded before you use them in your "personal" javascript file.
There is no need to include the same CSS Files twice. like you did with
css/themes/default/jquery.mobile-1.4.5.min.css and _assets/css/jqm-demos.css
In Jquery-mobile, there is the possibility to include CSS and/or Javascript file inside of the data-role="page" container. But in this case it makes absolut no sense.
The class ui-btn-active is unnecessary inside of the navbar <div>. If you want to set a button of your navbar active, you have to include this class inside of the <li> tag
And you have a typo inside of your footer. centure
I have attached screenshots at the bottom. I have tried the following the tips from IE8 issue with Twitter Bootstrap 3 to no avail. I have tried adding respond.js, adding the <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> meta tag, and ensuring my markup is correct. I have also ensured that both the html5shiv and respond.js are being loaded. Any idea what I'm doing wrong?
Relevant code
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<script src="../../vendor/assets/js/respond.js"></script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-inverse navbar-static-top" role='navigation'>
<div class='navbar-header'>
<a class="navbar-brand" href="/">Byrex</a>
</div>
<ul class="nav navbar-nav">
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<ul class="dropdown-menu">
<li></li>
<li></li>
</ul>
</li>
</ul>
</header>
</body>
Expected/All Other Browsers
IE 8
You might try to use other sources of your scripts (and shiv 3.7):
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
IE 8 just blows, but that being said, it might help if you include calls for if the browser is IE8 --
<!--[if IE 8]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<script src="../../vendor/assets/js/respond.js"></script>
I removed the "lt" because in recent experience, I had to do so to get IE8 to recognize it. You can also throw in custom overrides between those tags to fix any other IE8 stupidity.
I am trying to create a mobile version of my site using JQuery Mobile. I'd like a fixed header toolbar and a fixed footer toolbar to appear on all pages. However, those portions of the page are instead being written out as simple HTML lists. Here is the relevant header code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Nightscape Creations Wallpapers</title>
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
This code is visible at www.NightscapeCreations.com on the mobile site.
It seems like the JQuery code is either not being included correctly or is not being initialized. I'm not sure if maybe I missed something obvious in the installation that I just need a second set of eyes on.
If it's relevant, the remainder of the page might be similar to:
<body>
<div data-role="page" id="home">
Some text
</div>
<div data-role="page" id="liveWallpapers">
Some text
</div>
<div data-role="page" id="products">
Some text
</div>
<div data-role="page" id="about">
Some text
</div>
<div data-role="page" id="staticWallpapers">
Some text
</div>
</body>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</html>
EDIT 1
Per a suggestion by mwfire I have moved all of my visible code inside of the body tags. A simplified version of the page is now available with this code:
<!DOCTYPE html>
<html>
<head>
<title>Nightscape Creations Wallpapers</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="themes/NCMobile.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="header" data-position="fixed">
Back
<h1>Nightscape Creations</h1>
Home
<div data-role="navbar">
<ul>
<li>Live Wallpapers</li>
<li>Static Wallpapers</li>
<li>Products</li>
<li>About</li>
</ul>
</div>
</div>
<div data-role="page" id="home1">
<div style="font-weight:bold; text-decoration:underline;">Welcome</div>
Welcome to Nightscape Creations Mobile. Here you will find animated live wallpapers, static wallpapers, and links to physical products
with the wallpaper images included. Use the header button above to browse the mobile site, or
click here to visit the main site instead.
</div>
<div data-role="footer" data-position="fixed">
<h1>All images, animations, and content © Nightscape Creations</h1>
Visit Desktop Site
</div>
</body>
</html>
However, this does not cause the toolbars to appear.
Actually all your HTML code belongs inside the body tag. I bet you don't see any footer as well ;)
Edit
Just to clarify, the structure is supposed to be like that:
<!DOCTYPE ...>
<html>
<head>
<title>Page title</title>
</head>
<body>
<!-- All visible HTML content goes here! -->
</body>
</html>
No HTML tags should be outside the body tag (except head, body & Doctype).
You can find more on page structures here.
Edit2
In addition to this, header and footer are supposed to be inside the data-role="page" div. jQuery displays one page at a time, think of it as a single HTML page. It has to include the complete structure of a single page (if you want header and footer, of course), like:
<div data-role="page">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content">
Content
</div>
<div data-role="footer">
<h3>Footer</h3>
</div>
</div>
I've developed a phoneGap app for iOS and it works.
Now I'm trying to switch it on JqueryMobile in order to improve graphic.
This is the code of index.html page.
What must I change to make it works with JQueryMobile?
I tried to use css styles and library of jQueryMobile and modify header and footer but I can't understand where I must place <div data-role="page"> in my file.
I haven't also understood if I must leave id=header and class=header or not.
<head>
<title>x Directory</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova-WebInspector.js"></script>
</head>
<body>
<div id="header" class="header">
Home
<img src="img/mob.png" class="logo" id="logo"/>
<h1>xAsk</h1>
</div>
<div id="wrapper">
<ul id="xList" class="icon-list"></ul>
</div>
<div id="wrapper_hidden">
<div>
<div id="employeeDetails">
<img id="xPic"/>
<h3 id="xName"></h3>
<p id="xEmail"></p>
<p id="city"></p>
</div>
<ul id="actionList"></ul>
</div>
</div>
<div id="footer" class="footer">
<ul id="azioni">
</ul>
</div>
<script src="js/jquery.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/xlist.js"></script>
</body>
Start with one of the examples first. Jquery mobile changes the way your application is structured. You're not including jquery-mobile.js, so your example does not work.
The should be around your header, data and footer, but in order to have multiple (inline) pages, you need more of them.