I am trying to get angularstrap working but have not had any luck yet. here is my angular code
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.min.js"></script>
<script src="//oss.maxcdn.com/angular.strap/2.0.0/angular-strap.tpl.min.js"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
{{understand}}
</div>
<script>
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
app.controller("MainController", function($scope){
$scope.understand = "I now understand how the scope works!";
});
</script>
</body>
</html>
I get this error
Uncaught object ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:33
when I take mgcrea.ngStrap out from
var app = angular.module('MyTutorialApp',['mgcrea.ngStrap']);
then it works. Any help will be appreciated!
angularstrap depends on angular animate..
include this
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>
It is already answered here : $injector:modulerr using angular-strap?
AngularStrap is lighter and faster than ever as it does leverage the
power of ngAnimate from AngularJS 1.2+!
https://github.com/mgcrea/angular-strap/issues/651
Related
I am new to use angular.js.
I want to use gauge module ,but after i finish my html following Angular Gauge Document,it's not working(browser shows nothing).
I guess the problem is i didnt make the module work.
Can anybody tell me what is wrong with my code.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
</body>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.6.4/angular.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="node_modules/angular-gauge/dist/angularjs-gauge.min.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</html>
Plus, in the document installation part,it says:
As soon as you've got all the files downloaded and included in your page you just need to declare a dependency on the chart.js module:
i didnt use chart.js module in my project,so which chart.js file this guide refer to ?
You need to include the script tags inside the body tag, also you included the angular.min.js twice.
<!DOCTYPE HTML>
<html>
<body ng-app = "myApp">
<ng-gauge size="150" type="full" thick="5"
min="0" max="120" value="68.2"
cap="round" label="Speed" append="mph"
foreground-color="#ffcc66" background-color="#EEE">
</ng-gauge>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://rawgit.com/ashish-chopra/angular-gauge/master/src/angularjs-gauge.js"></script>
<script>
angular.module('myApp', ['angularjs-gauge']);
</script>
</body>
</html>
I'm pretty new to angularjs and angular material, and I was wondering why my md-button might not be showing up the way it should on my browser but worked on codepen. I put this in my html file:
<html ng-app='app'>
<head>
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src='app.js'></script>
</head>
<body ng-controller='MainCont'>
<md-button class='md-primary'>hello</md-button>
</body>
</html>
app.js:
var app = angular.module('app', ['ngMaterial']);
app.controller('MainCont', function(){
});
The module and the controllers are all loading, but in the browser this button shows up like this:
button picture here
Can someone explain to me why this might be? Thanks so much!
You just forgot to import the css of AngularMaterial:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.0-rc2/angular-material.min.css">
I am only a few days into AngularJS, and have been having trouble trying to print out this simple message. I have 2 files, one is "index.html" and the other is "app.js". They are mind-numbingly simple:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
The output on the page should be "had a little lamb." but I get "{{mary}}" instead. What really pisses me off is that I have a separate computer where it works just fine. I figure I must have a character wrong or am missing an extension, but I find that hard to believe since I just downloaded Visual Studio 2015 on this machine which has AngularJS and Angular-intellisense pre-loaded. Any help or criticism would be greatly appreciated.
you need a reference to the angular.js code.
make sure it is at the top of your script references.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.2/angular.min.js"></script>
The link I provided is for a copy of the code that is hosted on a Google CDN. There are tons of benefits for using the CDN as opposed to having a local copy of angular.js on your computer (as long as you aren't trying to test your code offline).
You can find the CDN link on angularjs.org; Just click on the big blue download button and you will see options for obtaining the most recent version or legacy versions of angular.js
as #Pankaj Parkar commented, you should have angular.js file referenced before your app.js file:
<!--index.html:-->
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>Testing Angular</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="maryCtrl">
<p>{{mary}}</p>
</div>
</body>
</html>
<<!--end of index-->
//app.js:
var myApp = angular.module('myApp', []);
myApp.controller('maryCtrl', function ($scope) {
$scope.mary = 'had a little lamb.';
});
//end of app.js
you can download it from https://github.com/angular/angular.js
I am trying to learn angular, and I am stuck in first chapter :-(
I am using angular 2.0, but when i try to create a module I get error "angular is not defined".
My plunker: Plunker:
my script:
(function() {
console.log("Hello");
var app = angular.Module("gitHubViewer", []);
app.controller("MainController", MainController);
var MainController = function($scope) {
$scope.message = "Hello World!";
};
}());
HTML:
<html ng-app="gitHubViewer">
<head>
<script src="https://code.angularjs.org/2.0.0-alpha.20/angular.js" data-semver="2.0.0-alpha.20" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
Can some body please help, is this a wrong way of creating module?
Thanks
Please check https://code.angularjs.org/2.0.0-alpha.20/angular.js link.
Display 404 Not Found.
Please download angularJS From https://angularjs.org/ and add it in your project.
I've not looked into Angular 2 very much but your code looks more like Angular 1 to me.
Angular 2 apps are bootstrapped in a very different way using ES6 components (specifically System). It should look more like this:
<html>
<head>
<title>Angular 2 Hello World!</title>
<script src="/dist/es6-shim.js"></script>
</head>
<body>
<my-app></my-app>
<script>
// Rewrite the paths to load the files
System.paths = {
'angular2/*': '/angular2/*.js', // Angular
'rtts_assert/*': '/rtts_assert/*.js', // Runtime assertions
'app': 'app.es6' // The my-app component
};
// Kick off the application
System.import('app');
</script>
</body>
</html>
This code was taken from this excellent tutorial: Getting Started with Angular 2.0.
I am currently ramping up with angular, and trying to make dynamic routing work.
Note: I have looked at the question: How to defer routes definition in Angular.js?, and I believe I am doing everything it states, but I'm still getting the error "unknown provider: $routeProvider"
What am I doing wrong?
html:
<!doctype html>
<html ng-app="rProvider">
<head>
<link rel="stylesheet" href="css/style.css">
<script src="lib/angular/angular.js"></script>
<script src="js/routeProviderTest.js"> </script>
</head>
<body>
<div ng-controller="rControl">
<h2>Route Controller Test</h2>
[Route 1 | <a>Route 2</a>]
<hr/>
<span class="partial-info">
Partial: {{routeValue}}
</span>
<div ng-view></div>
<small>The Bottom</small>
</div>
</body>
</html>
js:
var myAppModule = angular.module('rProvider',[]);
myAppModule.config(function($routeProvider){
$routeProvider.when("r1",{templateUrl:"/route1.html"});
});
myAppModule.controller('rControl', function($scope, $route){
$scope.routeValue = 'nothing yet';
});
thanks in advance...
If you are using version 1.2.x, you need to download angular-route.js, include it via the <script> tag, and add it as a dependency module in JavaScript:
<!-- in HTML -->
<script src='angular-route.js'></script>
// in JavaScript
var myAppModule = angular.module('rProvider', ['ngRoute']);
Maybe this will help you:
http://www.egghead.io/video/gNtnxRzXj8s
This guy has some pretty good tutorials on AngularJS. Or some of the next videos about the routeProvider.