How to load angular2 using CDN and SystemJS - javascript

In my index.html file i load angular 2 through cdn but it seems because i import the modules of angular 2 systemjs thinks that i must have them locally, how can i fix that?
<html>
<head>
<base href="/">
<title>Angular 2 Arc</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<ng2-app>Loading...</ng2-app>
<!-- Load Angular 2 Core libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.24/system.js"></script>
<script src="https://npmcdn.com/rxjs#5.0.0-beta.2/bundles/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2-polyfills.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/angular2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/http.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.9/router.min.js"></script>
<script src="https://npmcdn.com/angular2#2.0.0-beta.9/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js.map"></script>
<!-- Load Bootstrap and Jquery -->
<script src="lib/jquery/jquery.min.js" charset="utf-8"></script>
<script src="lib/bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.0/gh-fork-ribbon.min.css" />
<link rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="assets/css/app.css">
<!-- Configure SystemJS -->
<script>
System.config({
defaultJSExtensions: true,
packages: {
boot: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('js/boot')
.then(null, console.error.bind(console));
</script>
</body>
</html>

With SystemJS you can provide a mapping to load module from a different location.
SystemJS.config({
map: {
'#angular': 'https://npmcdn.com/#angular'
}
});
This will redirect all loading of a module #angular to that cdn location.
For more detailed info check systemjs.config.js in this plunker for more detailed info

Related

How to include/import custom js files into vue project?

I have downloaded html template from some site and now want to convert that whole template into vue cli project.The template has jquery and other custom js files.For jquery and bootstrap I used npm package but for other custom js I don't know how can I make it run.below is index.html file inside public folder in vue cli project.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>License Renewal</title>
<!-- Stylesheets -->
<link href="css/nepali.datepicker.v3.min.css" rel="stylesheet" type="text/css"/>
<link href="css/revolution-slider.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="images/ezee-logo.png" type="image/x-icon">
<link rel="icon" href="images/ezee-logo.png" type="image/x-icon">
<!-- Responsive -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link href="css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->
<!--[if lt IE 9]><script src="js/respond.js"></script><![endif]-->
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div class="page-wrapper">
<div id="app"></div>
<!-- built files will be auto injected -->
</div>
<!--Scroll to top-->
<div class="scroll-to-top scroll-to-target" data-target=".main-header"><span class="icon fa fa-long-arrow-up"></span></div>
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
<!--Google Map APi Key-->
<script src="http://maps.google.com/maps/api/js?key="></script>
<script src="js/map-script.js"></script>
<!--End Google Map APi-->
<script type="text/javascript">
$('.modal').on('shown.bs.modal', function () {
$.getScript('js/nepali.datepicker.v3.min.js')
.done(function(script, textStatus) {
console.log(textStatus)
/*var mainInput = document.getElementById("nepali-datepicker");
mainInput.nepaliDatePicker();
console.log('date');
console.log(mainInput);*/
});
})
</script>
<script>
$('.motor-block').on('click',function () {
test('application');
console.log('yes');
})
function test(elID)
{
var dest = document.getElementById(elID);
$([document.documentElement, document.body]).animate({
scrollTop: $(dest).offset().top -25
}, 500);
}
</script>
</body>
</html>
below script files are those I am talking about.How can I run them?
<script src="js/nepali.datepicker.v3.min.js" type="text/javascript"></script>
<script src="js/revolution.min.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/jquery.fancybox-media.js"></script>
<script src="js/owl.js"></script>
<script src="js/appear.js"></script>
<script src="js/wow.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.datetimepicker.js"></script>
<script src="js/script.js"></script>
below is main.js file
import Vue from 'vue'
import App from './App.vue'
import Main from './Main'
import router from './router'
import store from './store'
import jQuery from 'jquery'
global.jQuery=jQuery
global.$=jQuery
let Bootstrap=require('bootstrap')
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(Main)
}).$mount('#app')
There are a few routes you can take here. The easiest by far would be to find the files on NPM and install them in your project, use Webpack or Gulp, to copy the files over to the public JS path that is used in Index.js. Another way is to find those files online and copy them by hand (copy whole file contents, paste to new local file) and save to the template core files public path you wish.

Firebase messaging importScripts is not defined

I write a WEB application on the platform Firebase
I have a file "firebase-messaging-sw.js", and when I access the file from home.html page, I get an error:
importScripts is not
File "firebase-messaging-sw.js" is at the root level.
home.html:
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="shortcut icon" href="img/favicon.png"/>
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/home.css" type="text/css" media="screen and (min-width:901px)" />
<link rel="stylesheet" href="css/mhome.css" type="text/css" media="screen and (max-width:900px)" />
</head>
<body>
<header>
...
</header>
<div class="function">
...
</div>
<footer>
...
</footer>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-performance.js"></script>
<script src="javaScript/initFirebase.js"></script>
<script src="javaScript/homeFirebase.js"></script>
<script src="javaScript/initHomePage.js"></script> 
<script src="javaScript/latlon-geohash.js"></script>
<script src="firebase-messaging-sw.js"></script>
</body>
firebase-messaging-sw.js:
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/6.3.3/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '123456654321'
});
Help fix the error! Thank!
firebase-messaging-sw.js is service worker JavaScript file.
So you should not load JavaScript file using <script src="firebase-messaging-sw.js"></script>.
Remove <script src="firebase-messaging-sw.js"></script> and try the following code.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/firebase-messaging-sw.js');
});
}
</script>
See https://developers.google.com/web/fundamentals/primers/service-workers/#register_a_service_worker

CSS and JavaScript files in Laravel 5 website

I have a lot of CSS and JavaScript files in my Laravel 5.5 website and that leads to slow loading. How can I solve that? Here are the files:
<link rel="stylesheet" href="css/EdusecCustome.css">
<link rel="stylesheet" href="css/thead.css">
<link rel="stylesheet" href="css/AdminLTE-rtl.css">
<link href="/css/AdminLTE.css" rel="stylesheet">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="css/bootstrap-rtl.css">
<link href="css/jquery.dataTables.min.css"rel="stylesheet">
<link rel="stylesheet"href="css/responsive.dataTables.min.css">
<link href="css/fixedColumns.dataTables.min.css"rel="stylesheet">
<link href="css/buttons.dataTables.min.css" rel="stylesheet">
<link href="css/stylepanel.css" rel="stylesheet">
<link href="css/ionicons.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/jquery.timepicker.min.css">
<link href="css/dataTables.tableTools.css" rel="stylesheet">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/pdfmake.js" charset="utf-8"></script>
<script src="js/vfs_fonts_times_new_roman.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/app.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/datatables.bootstrap.js"></script>
<script src="js/dataTables.buttons.js"></script>
<script src="js/buttons.flash.js"></script>
<script src="js/buttons.html5.js"></script>
<script src="js/buttons.colVis.min.js"></script>
<script src="js/buttons.print.js"></script>
<script src="js/dataTables.responsive.min.js"></script>
<script src="js/dataTables.fixedColumns.min.js"></script>
<script src="js/dataTables.rowReorder.min.js"></script>
<script src="js/dataTables.tableTools.js"></script>
<script src="js/jquery.timepicker.js"></script>
I believe Laravel Mix can solve your issue. It uses Webpack and npm to compile your assets, you can read about Webpack here and npm here.
You can use webpack.mix.js and it'll build those files css in one file with minimization(with js the same action). Look at my example bellow:
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.styles([
'resources/assets/admin/bootstrap/css/bootstrap.min.css',
'resources/assets/admin/font-awesome/4.5.0/css/font-awesome.min.css',
'resources/assets/admin/ionicons/2.0.1/css/ionicons.min.css',
'resources/assets/admin/plugins/iCheck/minimal/_all.css',
'resources/assets/admin/plugins/datepicker/datepicker3.css',
'resources/assets/admin/plugins/select2/select2.min.css',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.css',
'resources/assets/admin/dist/css/AdminLTE.min.css',
'resources/assets/admin/dist/css/skins/_all-skins.min.css'
], 'public/css/admin.css');
mix.js('resources/assets/admin/bootstrap/js/bootstrap.min.js','public/js')
mix.scripts([
'resources/assets/admin/plugins/jQuery/jquery-2.2.3.min.js',
'resources/assets/admin/bootstrap/js/bootstrap.min.js',
'resources/assets/admin/plugins/select2/select2.full.min.js',
'resources/assets/admin/plugins/datepicker/bootstrap-datepicker.js',
'resources/assets/admin/plugins/datatables/jquery.dataTables.min.js',
'resources/assets/admin/plugins/datatables/dataTables.bootstrap.min.js',
'resources/assets/admin/plugins/slimScroll/jquery.slimscroll.min.js',
'resources/assets/admin/plugins/fastclick/fastclick.js',
'resources/assets/admin/plugins/iCheck/icheck.min.js',
'resources/assets/admin/dist/js/app.min.js',
'resources/assets/admin/dist/js/demo.js',
'resources/assets/admin/dist/js/scripts.js'
], 'public/js/admin.js');
mix.copy('resources/assets/admin/bootstrap/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/fonts', 'public/fonts');
mix.copy('resources/assets/admin/dist/img', 'public/img');
mix.copy('resources/assets/admin/plugins/iCheck/minimal/blue.png', 'public/css');
mix.styles([
'resources/assets/front/css/bootstrap.min.css',
'resources/assets/front/css/font-awesome.min.css',
'resources/assets/front/css/animate.min.css',
'resources/assets/front/css/owl.carousel.css',
'resources/assets/front/css/owl.theme.css',
'resources/assets/front/css/owl.transitions.css',
'resources/assets/front/css/style.css',
'resources/assets/front/css/responsive.css'
],'public/css/front.css');
mix.scripts([
'resources/assets/front/js/jquery-1.11.3.min.js',
'resources/assets/front/js/bootstrap.min.js',
'resources/assets/front/js/owl.carousel.min.js',
'resources/assets/front/js/jquery.stickit.min.js',
'resources/assets/front/js/menu.js',
'resources/assets/front/js/scripts.js'
], 'public/js/front.js');
mix.copy('resources/assets/front/fonts', 'public/fonts');
mix.copy('resources/assets/front/images', 'public/images');
mix.copy('resources/assets/admin/dist/img', 'public/img')
And in my layout:
<link rel="stylesheet" href="/css/admin.css">
.....
<script src="/js/admin.js"></script>

Failed to instantiate module starter due to: TypeError: $stateProvider.state is not a function

I am new to Angular. I am trying to run the app on the server and I am getting this as an error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
TypeError: $stateProvider.state is not a function
My app.js is
angular.module('starter', ['ngRoute','ui.router', 'ngAnimate','controllers', 'services'])
.config(['$urlRouterProvider', '$stateProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('college', {
url: '/college',
templateUrl: 'html/colleges.html',
controller: 'collegeCtrl'
})
$urlRouterProvider.otherwise('/college');
}]);
My index.html page goes like the following
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="materialize/css/materialize.min.css" media="screen,projection" />
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="node_modules/angular-route/angular-route.js"></script>
<script type="text/javascript" src="node_modules/angular-animate/angular-animate.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js">
</script>
<script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
<!--controllers -->
<script type="text/javascript" src="controllers/collegeCtrl.js"></script>
<!--Services -->
<script type="text/javascript" src="services/httprequestService.js">
</script>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body ng-app="starter">
<div class="content">
<div ui-view ng-class="transition">
default content
</div>
</div>
</body>
</html>
colleges.js
angular.
module('controllers',[]).
controller('collegeCtrl', function ($scope,$state) {
});
I really don't understand what is going wrong. I have googled the error for the solution but it didn't work out.
You can try this
<html lang="en" ng-app="starter">
Try this:
.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
...
}
Whatever you inject should be in the same order or else it can be a dependency injection mismatch sort of problem

can't load agGrid in dependencies

I'm trying to load agGrid in my angular project but i can't figure what i'm doing wrong in implementation.. The error i got is
Error: [$injector:nomod] Module 'ag.grid' is not available!
below is the scripts and dependencies i use to get agGrid in my project.
<link rel="stylesheet" type="text/css" href="bower_components/toastr/toastr.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-select/dist/select.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-loading-bar/build/loading-bar.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/nvd3/build/nv.d3.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-prettyjson/dist/ng-prettyjson.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ng-table/dist/ng-table.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/angular-ui-grid/ui-grid.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/ag-grid/dist/styles/ag-grid.css">
define([
'pages/transfer/grid/transfer-grid',
'pages/reports/reports/reports-config'
], function () {
var module = angular.module('app.pages.ePayment', [
'app.pages.transfer.grid',
'app.pages.reports.config',
'ngTable',
'agGrid'
]);
module.config(['$stateProvider', function ($stateProvider) {
$stateProvider.state('ePayment', {
url: '/ePayment',
views: {
contentView: {
templateUrl: 'app/pages/ePayment/ePayment.html'
}
}
});
}]);
module.run(['navigationMenuService', function (navigationMenuService) {
navigationMenuService.addMenuItem({
name: "ePayment",
link: "ePayment",
iconClass: "fa fa-money"
})
}]);
<script>window.name = "NG_DEFER_BOOTSTRAP!";</script>
<!-- build:remove:production -->
<script src="bower_components/angular/angular.js" type="text/javascript"></script>
<script src="bower_components/angular-animate/angular-animate.min.js" type="text/javascript"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<!-- <script angular-cache ojt preku require.js -->
<script src="bower_components/angular-filter/dist/angular-filter.min.js" type="text/javascript"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js" type="text/javascript"></script>
<script src="bower_components/angular-translate/angular-translate.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-select/dist/select.min.js"></script>
<script src="bower_components/angular-ui-utils/ui-utils.min.js" type="text/javascript"></script>
<script src="bower_components/ngInfiniteScroll/build/ng-infinite-scroll.min.js" type="text/javascript"></script>
<script src="bower_components/quick-ngrepeat/quick-ng-repeat.js" type="text/javascript"></script>
<script src="bower_components/angular-nvd3/dist/angular-nvd3.min.js" type="text/javascript"></script>
<script src="bower_components/ng-prettyjson/dist/ng-prettyjson.min.js" type="text/javascript"></script>
<script src="bower_components/file-saver.js/FileSaver.js" type="text/javascript"></script>
<script src="bower_components/js-xlsx/dist/xlsx.core.min.js" type="text/javascript"></script>
<script src="bower_components/alasql/dist/alasql.min.js" type="text/javascript"></script>
<script src="bower_components/ng-table/dist/ng-table.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-grid/ui-grid.min.js" type="text/javascript"></script>
<script src="bower_components/ag-grid/dist/ag-grid.js" type="text/javascript"></script>
Did i call it wrong or what? i installed using bower ( bower install ag-grid ) .
One thing that I faced with ag-grid is that you have to mention it in index.html even before angularjs and the other thing is in your main module you have to call the function:
agGrid.initialiseAgGridWithAngular1(angular);
Even before your module declaration. Refer https://www.ag-grid.com/best-angularjs-data-grid/index.php
Try these things and see if it works for you.

Categories