angular java script shows {{message}} in browser.i tried all possible ways but still sucks.
var myApp=angular.module("mod",[]);
myApp.controller("con", function($scope){
$scope.message = "hhhhhhhh";
});
<html ng-app="mod">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="sample.js"></script>
</head>
<body ng-controller="con">
<div>
{{message}}
</div>
</body>
</html>
Include your sample.js at the end of the body (DOM Manipulation), plus, it's
<script src="sample.js"></script>
not
<script type="sample.js"></script>
See the following plunker that works with your code :
https://plnkr.co/edit/jwkd4hzsUrqNQYmG0jCH?p=preview
So maybe you don't have the angular.js file at the following location bower_components/angular/angular.js
So use a CDN instead
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
You can use the ng-cloak directive.
<html ng-app="mod">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="sample.js"></script>
</head>
<body ng-controller="con">
<div ng-cloak>
{{message}}
</div>
</body>
</html>
Related
I am trying to have my buttons styled with AngularJS Material. Specifically, I want to use md-button with class md-raised.
However, when I try this my button looks like regular text rather than an md-button. What could I be doing wrong?
Here is my index.html where I am trying to place the button.
<!doctype html>
<html>
<head>
<!--Angular scripts-->
<link href="./node_modules/angular-material/angular-material.css" rel="stylesheet" />
<script src="./node_modules/angular/angular.js" type="text/javascript" ></script>
<script src="./node_modules/angular-animate/angular-animate.js" type="text/javascript" ></script>
<script src="./node_modules/angular-aria/angular-aria.js" type="text/javascript" ></script>
<script src="./node_modules/angular-material/angular-material.js" type="text/javascript" ></script>
<script src="node_modules/angular-route/angular-route.js"></script>
<script src="node_modules/angular-resource/angular-resource.js"></script>
<script src="mainController.js"></script>
</head>
<body>
<md-button class="md-raised">Button</md-button>
</body>
The reason why it didn't appear is because you forgot to initialize your app!
// Initialize your app here and add `ngMaterial` dependency
angular.module('App', ['ngMaterial']);
<!-- Also add your ng-app directive -->
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
</head>
<body>
<md-button class="md-raised">Test</md-button>
</body>
</html>
I was able to accomplish this by adding
<div class="md-button md-raised">
<p>Button</p>
</div>
instead of
<md-button class="md-raised">Button</md-button>
I'm not sure why this works though, and any feedback would be greatly appreciated.
When I use the following static HTML with views, everything works as I expect it would, shown here:
https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/
Now what I am asking, is how do I properly get this angular-ui accordion working properly within the ng-view?
See the accordion I am trying to use here:
http://plnkr.co/edit/1ZWBsbO6sQRnZ7CpPrdz?p=info
And my test plunker here, showing that the HTML shows up in the view, but it lacks JS functionality:
https://plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info
<!DOCTYPE html>
<html>
<head>
<script data-require="angularjs#1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script data-require="angular-route#1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-app="Test">
<div ng-include='"header.html"'></div>
<div ng-view></div>
<div ng-include='"footer.html"'></div>
</body>
</html>
You have to define a controller with the name(PageCtrl) you defined.
app.controller('PageCtrl', [function(){
// Your business logic
alert("In am controller");
}])
I have just started to learn angular.js but ng-init is not working in my code. I searched through internet but wasn't able to find any answer.
Here is my code thanks in advance !!
<!DOCTYPE html>
<html lang="en">
<head>
<title>ngClassifieds</title>
</head>
<body ng-app = "ngClassifieds" ng-init="message='hello, World!'">
<h1 ng-model="message">{{ message }}</h1>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
Add the code below in your app.js
var ngClassifieds=angular.module("ngClassifieds",[]);
I think the problem is with script loading
<head>
<title>ngClassifieds</title>
<script src="node_modules/angular/angular.js"></script>
<script src="scripts/app.js"></script>
</head>
add your scripts in header tag
Html Code
<body ng-controller="DemoCtrl" ng-app="main" ng-init="data='welcome'">
{{data}}
</body>
Script Code
var app = angular.module('main', []);
app.controller('DemoCtrl', function ($scope) {
});
I'm using ng-include to include a navbar. In combination with ng-app="" it works fine.But when I use a name (e.g. ng-app="myApp") then it doesn't work anymore. See example.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="">
<div ng-include="'pages/navbar.html'"></div>
<script src="app.js"</script>
</div>
</body>
</html>
app.js
var app = angular.module('myApp', []);
app.controller('mainController', function($scope) {
});
This above works fine, but when I insert the name "myApp" it stops including the navbar.
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="myApp">
<div ng-include="'pages/navbar.html'"></div>
<script src="app.js"</script>
</div>
</body>
</html>
Why?
You have a typo here
<script src="app.js"</script>
It should be
<script src="app.js"></script>
As long as this loads after angular.js then your application should be able to find the declaration of the myApp module (which you've asked it to by using ng-app="myApp"
Check in the browser console for any errors - if the script isn't loaded you will see an error like cannot find module
I believe you have missed including your app.js file in a proper style.
are you getting any error in console?
Edited
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body >
<div ng-app="myApp">
<div ng-include="'pages/navbar.html'"></div>
</div>
<script src="app.js"></script>
</body>
</html>
i have this files under my project and i'm encountring some trouble loading them with ajax and applying angular , here is the plunk :
http://plnkr.co/MxXzlenAuGcDy8iljKYX
the problem is that the content of sidebar.html get loaded and the controller gets executed correctly but for products.html the content only gets loaded and the controller doesn't get executed.
i am using this under chrome and i don't get any errors in my localhost console
I put together a modified version of your plnkr to show how I would approach this in general with Angular and dropped out jQuery since it wasn't necessary here:
http://plnkr.co/edit/QgPUk1JMP1vaWtwgXGbw
HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script data-require="angular.js#1.2.x" src="http://code.angularjs.org/1.2.14/angular-route.js" data-semver="1.2.14"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="category.js"></script>
<script type="text/javascript" src="products.js"></script>
</head>
<body ng-app="myApp">
<div ng-include="'sidebar.html'"></div>
<div ng-view></div>
</body>
</html>
JS
// Code goes here
var app = angular.module("myApp" , ["ngRoute"]);
app.config(function($routeProvider){
$routeProvider
.when("/products/:prodId",{templateUrl:"products.html"})
.when("/products",{templateUrl:"products.html"})
.when("/", {templateUrl:"home.html"})
.otherwise({redirectTo:"/"});
})