How to add angular-material into an existing plunker project? - javascript

I am following the README of angular-material where the last step of settup is:
Once you have all the necessary assets installed, add ngMaterial as a dependency for your app:
angular.module('myApp', ['ngMaterial']);
However...as soon as I added the ngMaterial dependency, my plunker stops running angular expressions:"script.js on plunker".
How can I use angular-material in plunker project? Or did I make a rookie mistake?
EDIT: I can retrieve angular-material with both http and https from my browser, but if I am using an online code sandbox...ie: I can't use angular-material using stackoverflow snippet
//I am using https...but following code does not work on stackoverflow
angular.module("myapp",['ngMaterial']).controller("controller",function($scope){$scope.angularexpression="controller is running";});
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<link data-require="angular-material#1.0.0" data-semver="1.0.0" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
<script data-require="angular-material#1.0.0" data-semver="1.0.0" src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>
</head>
<body ng-controller="controller">
{{angularexpression}}
</body>
</html>

hmm...after I downloaded the zip file from plunker and debugged it locally, here is the fix:
instead of using the default external library loader of plunker, you need to replace it with the following:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css" />
<script src="https://code.angularjs.org/1.4.9/angular.min.js "></script>
// order matters, plunker load material before angular, which will not work
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-route.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-messages.min.js "></script>
<script src="https://code.angularjs.org/1.4.9/angular-animate.min.js"></script>
<script src="https://code.angularjs.org/1.4.9/angular-aria.min.js"></script>

Related

external js from keenthemes metronic theme not working in angular

hey guys so I am using metronic theme and I made an angular version of demo3 HTML version
and everything looks fine except
if I import external js like this
<!doctype html>
<html lang="fa" direction="rtl" dir="rtl" style="direction: rtl">
<head>
<meta charset="utf-8" />
<base href="/">
<script src="assets/plugins/global/plugins.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/prismjs/prismjs.bundle.js" type="application/javascript"></script>
<script src="assets/js/scripts.bundle.js" type="application/javascript"></script>
<script src="assets/plugins/custom/fullcalendar/fullcalendar.bundle.js" type="application/javascript"></script>
<script src="assets/js/pages/widgets.js" type="application/javascript"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body kt-root id="kt_body" class="header-mobile-fixed subheader-enabled aside-enabled aside-fixed aside-secondary-enabled page-loading">
</body>
</html>
I don't have any error but toggle buttons not working
and if I added like this to angualr.json file
"scripts": [
"src/assets/plugins/global/plugins.bundle.js",
"src/assets/plugins/custom/prismjs/prismjs.bundle.js",
"src/assets/js/scripts.bundle.js",
"src/assets/plugins/custom/fullcalendar/fullcalendar.bundle.js",
"src/assets/js/pages/widgets.js"
]
when I serve the project I get this error
add
import 'core-js';
in the polyfills.ts file before the zone
and if you have or imported es6-shim just remove that
and I don't know why your external js not working that's the other problem

cannot read property swing of undefined

I am using the CDN version of materializecss
<html>
<head>
<!-- css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
</head>
<body>
<!-- page body -->
<!-- scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="scripts/scripts.js"></script>
</body>
</html>
and getting the following error in console
Uncaught TypeError: Cannot read property 'swing' of undefined
at materialize.min.js:6
(anonymous) # materialize.min.js:6
It looks like Materialize uses extend, so you'll need the full version of jQuery - the slim version will not work.
When you use material Design Bootstrap,
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script
src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/css/mdb.min.css" />
</head>
AND Put Script File at end of "body" section:
<body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.4.1/js/mdb.min.js"></script>
</body>
Don't forget to use uncompressed version of JQuery as mentioned above.
Just change the Jquery.slim to a normal Jquery. It works with me
Use 'jquery-3.5.1.min.js' instead of 'jquery-3.5.1.slim.min.js'.
It worked for me.
Using the updated version of the CDN worked for me. In the MDBootstrap website
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/5.0.0/mdb.min.js"
></script>

Angular.js not found, but no error on link

I picked up Angular.js yesterday as part of an internship, and Node.js the day before, so I'm a complete beginner with these technologies.
Basically, I tried to make a really simple page with an input field which would print the input text right next to the field, like such. As you can see, it works in a jsfiddle.
But when I try this locally, I get a ReferrenceError at the angular.module call of my controller, and this error in my browser.
Here's my index.html:
<div ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
And my controller.js:
var myApp = angular.module("myApp", []);
myApp.controller('AppCtrl', function($scope) {
$scope.query = "";
$scope.queryResult = function(){
return $scope.query;
};
});
Any idea what I'm doing wrong ?
you should include
<script src="./controller.js"></script>
after angular js files
The order of your controller file and AngularJS CDN is the problem. Please add your JS file beneath AngularJS CDN.
And also You have added ng-app to a div which does not have a closing tag. It might cause problems too.
Try the following code:
<html ng-app="myApp">
<head>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<input ng-model="query"/>
<span><b ng-bind="queryResult()"></b></span>
</div>
<!-- Scripts et liens css.-->
<script src="./controller.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<script src="./bower_components/angular/angular.js"></script>
<script src="./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="./bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="./bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="./bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"></script>
</body>
</html>
It looks like you are including jQuery after angular. jQuery should be first.
It also looks like you are including angular twice.
angular.min.js and angular.js

Angular ng-include

I am just learning angular.js here is my first 'hello world' script. I am trying to use ng-include to include a navbar from local file /templates/nav.html. I am following a tutorial and cant figure out why its not working.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello World</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body ng-app="app">
<header ng-include src="'templates/nav.html'">
</header>
<div ui-view></div>
<section>
</section>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/app.js"></script>
</body>
this is my js/app.js file:
angular
.module('app', [
'ui.router'
]);
templates/nav.html is simply the default bootstrap navbar. what am i doing wrong?
You need to include your js/app.js file as a script - right now there's no angular app being instantiated.
Add this as the last script to be included:
<script src="js/app.js"></script>
It should be:
<div ng-include="'templates/nav.html'"></div>
And put the header tag inside your nav.html.

How to set up twitter typeahead from scratch?

I am having trouble setting up twitter typeahead. Heres what I have done.
I created an index.html at my test folder.
I saved the typeahead as typeahead.js inside the folder js.
But its still not working. Here is the code for the index.html
<body>
<div>
<input id="product_search" type="text" data-provide="typeahead"
data-source='["Deluxe Bicycle", "Super Deluxe Trampoline", "Super Duper Scooter"]'>
</div>
<script src="js/typeahead.js"></script>
</body>
And here is the full code.
(typeahead) is not supported in bootstrap version (3.3.4) it is supported in version (2.3.2). So try the following:
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css"></script>
</head>
Always you should include first Jquery link after that bootstrap js then typeahead js then bootstrap css
<head>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/typeahead.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"></script>
</head>

Categories