I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
Related
just for learning purpose--
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="ctrl.js"></script>
</head>
<body ng-app="abc">
<h1 ng-controller="ctrl">{{data}}</h1>
</body>
</html>
script.js
angular.module('abc', []);
ctrl.js
angular.module('abc').controller('ctrl',function($scope){
$scope.data="hello";
});
js fiddle link
it showing error... what i ve done wrong here???
You named your controller file wrongly.
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="cntrl.js"></script>
</head>
I was just testing out angular and am wonder why nothing is showing up when I load up the page. I installed AngularJS through Package install already. Is there something wrong here?
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Journal.css">
<title>Henry's journal</title>
</head>
<body>
<div ng-app="journal">
<div header></div>
</div>
<div>
<script type="text/javascript" src="Journal.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
</body>
</html>
JAVASCRIPT
var journal = angular.module("journal", []);
journal.directive("header", function(){
return{
restrict: 'A',
link: function(){
alert("I'm working");
},
template: "<div>Hello!</div>"
};
});
You need to load AngularJS and jQuery before running your own script. Like so:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type ="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
<script type="text/javascript" src="Journal.js"></script>
(Additionally, you might be running into a different issue if you are testing locally using the file:// protocol. I'm not sure, but just in case: you'll have to specify a HTTP[s] protocol to load AngularJS: http://ajax.googleapis.com... instead of //ajax.googleapis.com...)
you have to add ng-app in the first HTML tag.
<html ng-app>
<!-- ...head...body -->
</html>
Perhaps this is an easier version of your app:
<html ng-app="journal">
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<title>jojo</title>
<div ng-controller="hola">
</div>
<script>
angular.module("journal", [])
.controller("hola", function($scope){
alert('HOLEAAA!');
})
</script>
</html>
Thanks.
I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:
<!DOCTYPE html>
<html ng-app="AppName">
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/main.css">
</head>
<body>
<!-- Wrapper-->
<div id="wrapper">
<div id="page-content-wrapper">
<div class="page-content inset" ng-view>
</div>
</div>
</div>
<!-- /WRAPPER-->
<!-- ANGULAR CUSTOM -->
<script src="libs/angular/angular.js"></script>
<script src="libs/angular-route/angular-route.min.js"></script>
<script src="javascripts/AngularApp.js"></script>
<script src="javascripts/appRoutes.js"></script>
<script src="javascripts/controllers/MainCtrl.js"></script>
<script src="javascripts/controllers/SettingsCtrl.js"></script>
<script src="javascripts/services/SettingsService.js"></script>
</body>
</html>
When I run the app it never seems to finish loading (see the image: http://imgur.com/FIAH4tH) and then crashes. In Firefox, I get the following error: http://imgur.com/UT3g7wY
Does anyone know how I can solve this problem?
--EDIT--
I've updated the position of the scripts in the app.
My AngularApp.js file looks like this:
angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);
If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.
Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.
angular.module('AppName', ['ngRoute']);
Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.
I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>AngularJS tryout</title>
<script src="../../node_modules/angular/angular.js"></script>
</head>
<body>
<h1>AngularJS tryout</h1>
<p>Nothing here so {{ 'far' + '!' }}</p>
</body>
</html>
I am trying to build a Phonegap application using Angular.js
I am trying to this: When a user logs in, a heading will be displayed to the user.
I have directive in directive.js :
angular.module('myApp')
.directive('ngHeaderline', ['Auth', function(Auth) {
return {
templateUrl: '/views/partials/header.html',
replace: true,
scope: true,
link: function($scope) {
$scope.isAuthenticated = Auth.isLoggedIn;
$scope.logout = Auth.logout();
}
}
}]);
And let's presume all the elements are there. Auth factory and the template (everything is displaying fine when I test it on Chrome browser)
And then in my index.html I have:
<body>
<div ng-headerline></div>
<div class="main-content">
<div ng-errorline></div>
<div ng-loadingline></div>
<div ng-view=""></div>
</div>
<!-- Foundation JS dependencies -->
<script src="bower_components/foundation/js/vendor/custom.modernizr.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="scripts/vendor/cordova.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery.formatDateTime/jquery.formatDateTime.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
And my header.html partial looks like this:
<div class="app">
<div ng-show="isAuthenticated()">
My Header
</div>
</div>
To repeat, everything is showing correctly when I est it on browser, but when I compile with Phonegap and deploy to the Android device, header is not showing.
What could be the problem?
I had this same exact problem actually. Your problem is here:
templateUrl: '/views/partials/header.html',
You need to remove that initial slash and use a relative path. In my case I had '/scripts/directives/templates/bottom-menu.html' and my template did not work. I removed the first slash and it worked perfectly.
The reason is that when it's deployed to android these files are no longer in the root directory, so that first slash breaks the path.
I am new to angular.js and have a problem. Please help me resolve it.
I have created a simple screen using a controller and a module in my example.
But it doesnt work. I have presented the example as follows :
My html file is :-
<!doctype html>
<html ng-app="ayan">
<head>
<script type="text/javascript" src="hotel_listing_angular.js"></script>
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div ng-controller="myController">
<ul>
<li ng-repeat="contact in htlList">
{{ contact.name }}
</li>
</ul>
</div>
</body>
</html>
and my js file is as follows :-
var ayan=angular.module('ayan',[]);
ayan.controller('myController',function ($scope) {
$scope.htlList = [
{name:"Picard", description:"Captain"},
{name:"Santosh", description:"Programmer"},
{name:"Amit", description:"Manager"}
];
});
Please tell me what am I doing wrong.
You need to include
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before
<script type="text/javascript" src="hotel_listing_angular.js"></script>
Try calling
<script type="text/javascript" src="http://code.angularjs.org/1.0.6/angular.min.js"></script>
before calling
<script type="text/javascript" src="hotel_listing_angular.js"></script>