I am learning AngularJS and I want to use Angular Material, I've downloaded it with npm install angular-material and I've imported it but it is not working. That is what I see, any help please?
This is my html code
<html>
<head>
<title>My store</title>
</head>
<body ng-app="tienda" ng-controller="tiendaCtrl">
{{name}}
<md-toolbar>
<div class="md-toolbar-tools">
<p><strong>My Store</strong></p>
<md-button><md-icon class='mdi mdi-plus-circle'></md-icon>New Classified</md-button>
</div>
</md-toolbar>
<script src="bower_components/angular/angular.js"></script>
<script src="node_modules/angular-material/angular-material.js"></script>
<script src="node_modules/angular-animate/angular-animate.js"></script>
<script src="node_modules/angular-aria/angular-aria.js"></script>
<script src="js/app.js"></script>
<script src="js/tienda.ctrl.js"></script>
</body>
This is my app.js file
var myApp = angular.module("tienda", ['ngMaterial']);
myApp.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('teal')
.accentPalette('orange');
});
This might be what you was looking for, you need to add few lines to styles in angular.json
"./node_modules/#angular/material/prebuilt-themes/pink-bluegrey.css"
This worked for me. Give a Try!
I think you are missing CSS files here. The directive works fine but the styling is not there. Have a look at their Github, under the CDN part, it is written what to import.
The CSS should be in your node_modules folder so I guess you should put this in your head:
<link rel="stylesheet" href="node_modules/angular-material/angular-material.css">
Related
i use angularjs module ngAnimate but this does'nt work why i use the same reference for angularjs.org
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.1/angular-animate.js"></script>
<link rel="style" href="css/style.css">
<script src="js/app.js"></script>
</head>
<body ng-app="app">
<div class="content" ng-controller="PrintCtrl">
<h4>{{title}}</h4>
<p>it's sample content welcome admin in your website</p>
</div>
</body>
var app = angular.module('app', ['ngAnimate']);
app.controller('PrintCtrl',['$scope',function($scope){
$scope.title = "The title";
}]);
I noticed your css tag is linked with rel="style". It should be stylesheet instead of style. If your css is working fine, I think the animate should work
I have a navbar I am trying to inject into a main page. I ran the page and checked F12 > Network which showed that the directive's templateURL (navbar.html) was either not called or not injected. There are no errors. Anyone have any idea what might be wrong with my code?
The directory structure is:
landingpage.html
js
controllers
NavController.js
directives
navappDirective.js
app.js
templates
navbar.html
Below is the code:
landingpage.html
<html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!--<link href="../css/landingpage.css" rel="stylesheet">-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<script type="text/javascript">
alert("this works");
</script>-->
<body>
<div>
<navbar ></navbar>
</div>
<!-- Insert navbar-->
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/controllers/NavController.js"></script>
<!-- Directives -->
<script src="js/directives/navappDirective.js"></script>
</body>
navappDirective.js
navapp.directive('navbar', function() {
return {
restrict: 'E',
scope: {
},
/*template: '<p>Hi</p>'*/
templateUrl: 'templates/navbar.html'
};
});
navbar.html just has a paragraph currently for testing purposes.
Thanks
ng-app is missing in landingpage.html
In you landingpage.html, please update it as below
<body ng-app="myapp">
In app.js, you probably should have
angular.module('myapp',[]);
Thank You everyone!
I had ng-app called in navbar because that is where I was using the controller information and thought that would work.
The problem was solved with the following steps:
Changed the templateURL to ../../templates/navbar.html
Called the ng-app directive on the landingpage.html This allows the page to call the app. The still have the ng-controller directive in navbar for encapsulation purposes.
After the above steps I still got a cross referencing error since you cannot call a html file from a file system. So I ran a python server using python -m http.server (for Python 3) after cd'ing to the directory holding my project. Then I could run my project using localhost:8000/
I'm trying to use these c3 angular charts, but nothing seems to be showing up on the page. THere are no console errors I can find and I've followed the tutorial but nothing appears still.
I've pulled the git repo and referencing the files I think I need.
Why can't I see anything?
Charts:
https://github.com/jettro/c3-angular-directive
Tutorial:
http://jettro.github.io/c3-angular-directive/
Code:
<!DOCTYPE html>
<html ng-app="chart_test" xmlns="http://www.w3.org/1999/html">
<head>
</head>
<body ng-controller="ChartController">
<h1>Line Graph</h1>
<div id="chart1"></div>
<c3chart bindto-id="chart1" show-labels="true">
<chart-column column-id="line1"
column-name="Line 1"
column-color="green"
column-values="30,200,100,400,150,250"
column-type="line"/>
<chart-points point-radius="5"
show-point="true"
point-expand-enabled="true"
point-expand-radius="10"/>
</c3chart>
<script src="d3.min.js"></script>
<script data-require="angular.js#1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="c3-angular.min.js"></script>
<script src="app.js"></script>
<script src="ChartController.js"></script>
</body>
</html>
App.js:
var app = angular.module("chart_test", []);
Chart Controller:
var myApp = angular.module("chart_test");
myApp.controller("ChartController", ["$scope", function($scope){
$scope.message = "hi";
}]);
I am no expert on the subject, but in the getting started section of the page you provided, it says
You have to add the following libraries and stylesheet.
And then lists the following code:
<link href="css/c3.min.css" rel="stylesheet" type="text/css"/>
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/c3.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/c3-angular.min.js"></script>
<script src="js/app.js"></script>
From what I see, you have included d3.min.js, angular.min.js, c3-angular.min.js, app.js but NOT c3.min.css and c3.min.js.
I would advise you to try including them and if it then still doesn't work, update your question with how that went.
This is the index.html with angular-alpha35:
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>APP Ang2</title>
<script src="scripts/traceur-runtime.js"></script>
<script src="https://jspm.io/system#0.16.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<app>Loading...</app>
<script>System.import('app').catch(console.log.bind(console));</script>
</body>
</html>
And it works fine if there is internet connection and system.js can be loaded. If I try to get a local copy of system.js like this:
<script src="scripts/system#0.16.11.js"></script>
then nothing works until I put rx.js in the root folder and put this line at the end of the file:
<script src="scripts/es6-module-loader#0.16.6.js"></script>
</body>
</html>
then System.js works fine, but in this case, there is a strange problem with angular2 bindings. they are not working until I do some interaction with the page (submit a form, open a select, make some div change its dimensions even with simple hidden, etc..). As soon as something changes on the page, all bindings get to work and the page gets resurrected.
How to make all this work locally without node.js and without internet connection?
You should include the sfx version of angular 2 like this:
<script src="https://code.angularjs.org/2.0.0-alpha.32/angular2.sfx.dev.js"></script>
Note that it's a self contained js file you can download locally.
Check this sample project I made in github:
https://github.com/alfonso-presa/angular2-es5-sample
Edit: Check this SO question for more clarification on what sfx means: Difference between angular.dev.js and angular.sfx.dev.js
Thanks to Arnaud Boeglin's idea of difference in packages' version, I checked with es6-module-loder and by chance this installation works perfectly (so far I didn't find any problem):
<script src="scripts/traceur-runtime.js"></script>
<script src="scripts/es6-module-loader.js"></script>
<script src="scripts/system#0.16.11.js"></script>
<script src="scripts/bundle35/angular2.dev.js"></script>
<script src="scripts/bundle35/router.dev.js"></script>
The es6-module-loader has to be before the systemjs in <head> tag.
I am coding in ember.js have precompiled my Application.Handlebars file and it has resulted in a precompiled handlebars template.
Earlier when I was inserting the template in the Index.html page, all I had to do was write :
<script type="text/x-handlebars" data-template-name="whateverTemplate">
...
</script>
However, after I have precompiled my template, and I have included my template js file in the scripts section, I am not able to see the output in the screen. What am I doing wrong? How do you do this?
This is my index.html :
<!DOCTYPE html>
<html>
<head>
<title>Ember CRM Application</title>
</head>
<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
.border{
border: 2px #666 solid;
border-radius: 10px;
}
</style>
<body>
<script src="js/libs/jquery-1.10.2.js"></script>
<script src="js/libs/md5.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.4.0.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/libs/moment.min.js"></script>
<script src="js/crm.js"></script>
<!--Templates-->
<script src="js/templates/application.handlebars.js"></script>
<!-- to activate the test runner, add the "?test" query string parameter -->
<script src="tests/runner.js"></script>
</body>
</html>
And in the application.handlebars :
<h1>This is my template</h1>
This is my crm.js :
App = Ember.Application.create();
I don't want to insert a view, I directly want to insert the template. Please guide me.
I was having the same problem, you see if you use the Handlebars Precompilation, then it would not work. You need to use the Ember-Handlebars-Precompile.
Here is the npm link : https://github.com/gabrielgrant/node-ember-precompile
You can install it using : npm install -g node-ember-precompile
After that, you just need to compile it using the Ember Precompiler and it would add anything that is necessary for it to work with Ember. Now you just need to follow the same thing that you are doing. It should work for you.