I'm trying to do the AngularJS tutorial here for v1.2.12, and what I'm getting on my localhost is much different from the live demo they have on the tutorial itself.
Mainly, just starting with the first couple steps, it is not reading my expressions. They are just there in plain text, like they're cut and paste out of the code.
For instance in step 0, my local host is giving me
Nothing here {{'yet' + '!'}}
while the live demo on the site gives
Nothing here yet!
The same seems to happen for other steps. For some reason step #1 works just like it does on the webpage.
What's up with this? Did I forget to install some part of Angular? Or what? Is the tutorial just messed up?
Here's an example of the code that still does it wrong:
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/app.css">
<script src="bower_components/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
Sort by:
<select ng-model="orderProp">
<option value="name">Alphabetical</option>
<option value="age">Newest</option>
</select>
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I used git checkout -f step-5 for this one, and instead of giving me a long list of phones like it does in the demo, I just see {{phone.name}} and {{phone.snippet}} when I run index.html on a local server.
Answered!
The NPM install was not allowing bower to do the proper installs.
This was fixed by installing Bower globally, and executing "bower install" from the command line while in the proper directory that the tutorial is saved in.
Probably You are missing something. All basic angular tutorials works. Unfortunately without code its impossible to give a real reason. We can only guess that:
You are not including properly angularjs.js files, and angular cant bootstrap Your code.
You are trying to run Your html locally straight via browser by opening html file, not by serving it by any server instance (like apache or nodejs).
Such solution will not work whrn including scripts because of some safety restrictions. Use a server, or instead linking script file from disk, try using CDN angular links.
3 . Your angular code is wrong.
this is a demo hope this will help you
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
Nothing here {{'yet' + '!'}}
</body>
</html>
i think you forget to add "angular js" or ng-app directive
Related
I am trying to learn angular material and found below link:
http://www.tutorialspoint.com/angular_material/angular_material_environment.htm
I followed CDN based installation and copied the below code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script type="text/javascript">
angular.module('firstApplication', ['ngMaterial']);
</script>
<meta charset="ISO-8859-1">
<title>Camera streaming area Demo</title>
</head>
<body>
<md-toolbar class="md-warn">
<div class="md-toolbar-tools">
<h2 class="md-flex">HTML 5</h2>
</div>
</md-toolbar>
<md-content flex layout-padding>
<p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p>
<p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p>
<p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p>
</md-content>
</body>
</html>
into my eclipse angular project, but there is no css effect found when I ran this app. Eclipse showing warning on every md tag
Unknown tag (md-toolbar).
am I missing something??
That should be fine, md-toolbar and md-content are not part of the HTML element specification. The validation in eclipse does not take into account custom directives defined in Angular.
I assume the example is running as expected?
I am trying to display a plain html/css loading spinner on first load in my Angular APP. The spinner code is included in my index.html.
However, the dom seems not to be rendered until my angularjs APP starts kicking in, causing a very lengthy display of a white screen until this finally happens. Is there any way to prevent that?
I would like to understand how to load my plain html/css spinner right after the css code in the head is done loading so as to improve user experience.
Test on webpagetest.org seem to confirm this diagnosis (the /settings, /introductions, /menus lines are all calls to an external API done by an AngularJS service before render):
Here is a simplified version of my build code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<script src="js/lib.js"></script>
<script src="js/app.js"></script>
</body>
</html>
whatever the complexity of your application,all your controllers are within the same angular application, all scopes within the same application inherits from the same root, whatever you define on the $rootScope will be available to all child scopes.
we have two ways to resolve this problem:
use $broadcast(), $emit() and $on() that facilitate event driven publisher-subscriber model for sending notifications and passing data between your controllers.(professional solution)
declare $rootScope variable and watching changement.(simple way)
It turns out the problem was coming from "render-blocking javascript", I had to add the "async" tag to my JS to fix it.
When adding async to both my lib.js and app.js, I had an issue with app.js loading before angular scripts were loaded (thus causing the APP to throw an error). In order to solve this issue, I combined my lib.js and app.js into one single file and then added the async tag.
My final build code looks like that (the magic happens on the final "script" tag):
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<title ng-bind="($title || 'Home') + ' - WalktheChat'">WalktheChat</title>
<link rel="stylesheet" href="styles/lib.css">
<link rel="stylesheet" href="styles/app.css">
</head>
<body>
<div id="base-container" ng-controller="Shell as main">
<div ng-include="'app/layout/header.html'"></div>
<div id="content" ui-view ng-cloak autoscroll="true"></div>
<div ng-include="'app/layout/footer.html'"></div>
</div>
<!-- This is the spinner I would like to display on first load -->
<div ng-show="::false" class="spinner-container">
<div class="spinner sk-spinner sk-spinner-pulse"></div>
</div>
<!-- This app.js now also contains lib.js from my question !-->
<script src="js/app.js" async></script>
</body>
</html>
I'm currently trying to get the preview functionality from the Eclipse Web Page Editor with AngularJS up and running. Unfortunately nothing happens (see attached image) when I try to run the provided code.
It seems to run here.
The code runs in every web browser - so the question is why is it not working in the "Preview Tab" of the Eclipse Web Page Editor? Any ideas?
My Setup:
Eclipse Mars.1 Release (4.5.1) for Web Developers
AngularJS Eclipse 1.1
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
enter image description here
I have been learning angularjs for 2 days and I can't have it working when dealing with ng-controller / ng-repeat
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Angular test </title>
</head>
<body ng-app>
Angular test
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script>
function menuCtrl($scope) {
$scope.menus = [
{title:"wiki",img:"../images/profil.png"},
{title:"list",img:"../images/profil.png"},
{title:"find",img:"../images/profil.png"},
{title:"exp",img:"../images/profil.png"},
{title:"stat",img:"../images/profil.png"},
{title:"param",img:"../images/profil.png"}
];
}
</script>
<div ng-controller="menuCtrl">
<div ng-repeat="menu in menus">
<img src={{menu.img}}>
<h3>{{menu.title}}</h3>
</div>
</div>
</body>
This way of coding is not supported by angular 1.4.7 however it is supported by angular <1.3.0.
I recommend you to follow this style of coding https://docs.angularjs.org/api/ng/directive/ngController
ngApp: ng-app description
<body ng-app>
Or
<html ng-app>
Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the or tags.
This automatically bootstraps your angular application and then all is good to go. But I like to bootstrap it manually on DOM ready event.
It's upto you. If you are building a sample app and trying to learn then ng-app is fine for you, but in case of large application you should need to make Modules.
i found this lightbox example on stackoverflow:
Why is the lightbox jQuery plugin not working for me?
i did ask a question there but it was deleted and i was told to use the "ask a question button" so here i am
this code does not run:
<html>
<head>
<!--
**** Things you need to do****
1. SPECIFY LIGHTBOX CSS FILE
2. SPECIFY JQUERY JS (jquery-1.7.2) FILE
3. SPECIFY LIGHTBOX JS FILE
-->
<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css" type="text/css" media="screen" />
<script src="http://lokeshdhakar.com/projects/lightbox2/js/jquery-1.7.2.min.js"></script>
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li>Spring</li>
<li>Summer</li>
<li>Fall</li>
<li>Winter</li>
</ul>
<div id="tabs-1">
<a href="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" rel="lightbox" >
<img src="https://www.google.de/logos/doodles/2015/229th-anniversary-of-the-first-ascent-of-mont-blanc-5711572991213568.2-hp.jpg" width="300" height="200">
</a>
</div>
</div>
</body>
</html>
all the "versions" are specified...how can it not work? i just get a small picture and if i click on it it behaves like a normal link.
If you copied this verbatim, the error is the fact that the jQuery script included in that sample no longer exist. You can notice this easily in your browser's developer console. So you have to find the required jQuery version from some other place.
I would recommend using some other scripts that are usable with more current jQuery version though, otherwise you'll be forced to use an ancient one.
Include your scripts before </body> tag. Then lightbox will be work correctly.