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?
Related
I'm new to AngularJS. I'm attempting to convert a project I'm working on that used regular Javascript, jQuery, and Bootstrap into an AngularJS single page project and I'd like to keep using the Bootstrap library for it. I followed the instructions and downloaded the necessary files at http://angular-ui.github.io/bootstrap/ but when I try loading my project at http://localhost:5000 I get none of my page loaded and an error in the console. I downloaded angular-ui-bootstrap in my project with the command "npm install angular-ui-bootstrap" from my Node.JS command prompt
In index.html I have tried changing the order of the script and link tags in my head section to no success. I have also tried removing the 'ui.bootstrap' dependency in main.module.js to see if AngularJS works by only loading my 'recipeList' dependency and it does work.
From main.module.js:
angular.module('mainApp', ['ui.bootstrap', 'recipeList']);
From index.html:
<!DOCTYPE html>
<html ng-app="mainApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="main.module.js"></script>
<script src="recipe-list\recipe-list.module.js"></script>
<script src="recipe-list\recipe-list.component.js"></script>
<title>Sousmate</title>
</head>
<body>
<div id="container">
<header>
<h1>Sousmate</h1>
</header>
<section>
<recipe-list></recipe-list>
</section>
</div>
</body>
</html>
Error: [$injector:modulerr] http://errors.angularjs.org/1.7.8/$injector/modulerr?p0=mainApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.7.8%2F%24injector%2Fmodulerr%3Fp0%3Dui.bootstrap%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.7.8%252F%2524injector%252Fnomod%253Fp0%253Dui.bootstrap%250AF%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A7%253A168%250AHe%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A453%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A25%253A478%250AHe%252F%253C%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A26%253A227%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A496%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Ag%252F%253C%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A43%253A27%250Ar%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A8%253A76%250Ag%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A42%253A344%250Afb%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A46%253A460%250Ac%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A57%250AUc%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A22%253A370%250AAe%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A21%253A45%250A%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A348%253A494%250Ab%2540http%253A%252F%252Fajax.googleapis.com%252Fajax%252Flibs%252Fangularjs%252F1.7.8%252Fangular.min.js%253A38%253A444%250A%0AF%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A7%3A168%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A285%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Ag%2F%3C%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A43%3A27%0Ar%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A8%3A76%0Ag%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A42%3A344%0Afb%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A46%3A460%0Ac%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A57%0AUc%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A22%3A370%0AAe%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A21%3A45%0A%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A348%3A494%0Ab%40http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.7.8%2Fangular.min.js%3A38%3A444%0A
The error is:
Module 'ui.bootstrap' is not available! You either misspelled the
module name or forgot to load it. If registering a module ensure that
you specify the dependencies as the second argument.
From your html I don't see that you've included the angular bootstrap js. You need this file along side your bootstrap css. You can download it here.
e.g.:
<script type="text/javascript" src="ui-bootstrap-tpls-2.5.0.min.js"></script>
Hope this helps!
I am currently taking a React for Beginners course and following along using the course files provided. In the first chapter, they teach us how to create a simple Hello World example and in this example(both in the sample files and in the video) there is an extra closing script tag in the file. Just wondering if this has something to do with React or if the instructor made a mistake:
<!DOCTYPE html>
<html>
<title>Hello World Example</title>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- React -->
<script src="https://unpkg.com/react#0.14.1/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#0.14.1/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react#0.13.3/dist/JSXTransformer.js"></script>
</head>
<body>
<script type="text/jsx">
</script>
</body>
</script> <!-- Extra closing tag -->
</html>
I have a node.js application running Express and express handlebars as the templating framework. I have recently started learning Angular and integrating it in my node.js app.
The only issue is, the markup for express-handlebars and angular is same. Both framework use {{}}. I did some research and found this Stackoverflow question: Using Express Handlebars and Angular JS
The accepted answer suggests changing the markup symbols using the interpolateProvider. I implemented this and it does not work for me (I have commented under that answer).
My code looks like this:
main.handlebars
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>GETTING STARTED WITH Angular</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<link rel="stylesheet" href="/css/style.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.config(function($interpolateProvider) {
$interpolateProvider.startSymbol('//');
$interpolateProvider.endSymbol('//');
});
app.controller('DemoController', function() {
this.label = "This binding is brought you by // interpolation symbols.";
});
</script>
</head>
<body>
{{{body}}}
<input ng-model="name">
<h3>Hi, //name// how are you doing</h3>
<div ng-controller="DemoController as demo">
//demo.label//
</div>
</body>
</html>
The above code is from the main.handlebars layout file. I even tried to put that code in the actual view but it did not work. What am I missing?
Thanks.
This issue is occurring because of an incorrect app name reference or a simple typo. Change ng-app="myapp" to ng-app="myApp".
I'm going through some starter React.js courses to become more familiar with React, and the ES6 format. Unfortunately, the courses were created during 0.13 when the JSX Transformer was available, and I do not want to setup a node.js environment with each and every exercise file. It also seems that babel-browser was discontinued, and babel-standalone needs much more than a type in the script properties to compile, so neither seems to be a solution (Unless I misunderstood standalone).
Is there anything out there that handle transforms as simply as the JSX Transformer once did?
Thanks in advance!
The react site tutorial (http://facebook.github.io/react/docs/tutorial.html) seems to use babel dynamically.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="scripts/example.js"></script>
<script type="text/babel">
// To get started with this tutorial running your own code, simply remove
// the script tag loading scripts/example.js and start writing code here.
</script>
</body>
</html>
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