I'm trying to set up a simple app with angular 1.5 and ng-admin,I imported all the dependencies and done everything right but angular can't find the ng-admin module even though I have imported it
this is my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gestionale Clienti</title>
<link rel="icon" type="image/png" href="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src-="utilities/ng-admin.min.js"></script>
<link rel="stylesheet" href="utilities/ng-admin.min.css">
<link rel="stylesheet" href="styles/css_compiled/base.css" />
</head>
<body ng-app="gestionale">
<div ui-view></div>
<script src="bundle.min.js"></script>
</body>
</html>
this is my javascript:
'use strict';
angular.module('gestionale',['ng-admin']);
and the error I get is : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=gestionale&p1=Errorogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
thanks in advance,any help would be appreciated.
You have a typo
<script src-="utilities/ng-admin.min.js"></script>
should be
<script src="utilities/ng-admin.min.js"></script>
Also, ng-admin currently doesn't support Angular 1.5. Use ng-admin 0.9 it with Angular 1.3, or the master branch (future 1.0) with Angular 1.4.
Related
I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks
I am using angluar cli to build my app.
Currently its building the app in dist folder
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.aa8ce79f832f8715c04d.css"></head>
<body>
<app-root>
</app-root>
<script type="text/javascript" src="runtime.d981c7f14a84cffbe02a.js"></script><script type="text/javascript" src="polyfills.c914ea4c8f6edd6e6f45.js"></script><script type="text/javascript" src="scripts.b5ea1a3cf9f89977f873.js"></script><script type="text/javascript" src="main.ebfc576e2cbf5f6d553e.js"></script></body>
</html>
I would like to customize all src path to have /app appended & look like:
<script type="text/javascript" src="/app/runtime.d981c7f14a84cffbe02a.js"></script>
Is there any way to achieve this?
You can use the deploy-url parameter when building your app
ng build --prod --deploy-url /app/
You want to prepend rather than append.
Try changing your base href value so that all relative paths start from the app folder
From:
<base href="/">
To:
<base href="./">
I am using both ng serve --watch and ng build --watch. With ng build, it will use my index.html file, but with ng serve, it seems to ignore it.
Right now, I am rendering some dynamic JSON in the index.html file like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="<%=base%>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
const appData = JSON.parse('<%=json%>');
</script>
<app-root></app-root>
</body>
</html>
the above works with ng build but not ng serve, since ng serve doesn't seem to incorporate this file.
Is there a better way to send dynamic JSON to an Angular7 app when the app is first loaded? My server can render the JSON to the index.html in production, but during development with ng serve, it's not working so well.
For now I just abandoned ng-serve, and just use ng build --watch, and then use static-server (an npm CLI tool), like so:
"static-server": "cd dist/my-app && static-server --index index.html"
and my index.html looks like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
<script type="text/javascript">
define('app-data',() => {
console.log('retrieving app-data...');
let val = null;
try{
val = JSON.parse('<%=json%>')
}
catch(err){
val = {routes: [1,2,3,4,5].map(v => ({val:v}))};
}
return {
value: val
}
});
</script>
<app-root></app-root>
</body>
</html>
requirejs allows me to easily load dynamic code, haven't figured out how to do that with Angular yet.
I found nice modal form at http://www.bootply.com/60244, but when I try run it in my code I get empty content after click on "Launch Modal". Probably I don't have some stylesheet or library.
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic&subset=latin,latin-ext" type="text/css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Anyone know what I need to run it? On bootply everything is fine.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
I found the reason - Bootstrap v2.3.1, I using 3.3+.
I'm developing a mobile application with Phonegap and AngularJS, and the application is working fine so far in desktop browser. Although, when I build it into an APK, some of the code of the application doesn't work.
First of all, I've seen this topic Phonegap - app works on desktop, not on mobile and the issue continues.
index.html
<!DOCTYPE html>
<html ng-app="home">
<head>
<meta charset="utf-8" />
<title>My new Application</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimal-ui" />
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-hover.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-base.min.css" />
<link rel="stylesheet" href="public/css/angular/mobile-angular-ui-desktop.min.css" />
<link rel="stylesheet" href="public/css/global.css" />
</head>
<body>
<div class="app">
<div ng-include="'application/views/header.html'" style="margin-bottom: 51px"></div>
<div ng-view="">
</div>
<div ng-include="'application/views/footer.html'"></div>
</div>
<script srC="cordova.js"></script>
<script type="text/javascript" src="public/js/angular/angular.min.js"></script>
<script type="text/javascript" src="public/js/angular/angular-route.min.js"></script>
<script type="text/javascript" src="application/controllers/home.js"></script>
</body>
</html>
home.js
var app = angular.module('home', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : '/application/views/home/home.html',
controller : 'home_controller'
})
});
app.controller('home_controller', ['$scope', '$location', function($scope, $location){
console.log('im here..');
alert('im here..!!');
}]);
I tried to "debug" by setting console.log and alert messages, but none of them shows up.
For debug, I'm using http://debug.build.phonegap.com/ weinre.
Conclusion: my application shows up normally, it loads the header.html and the footer.html, but not the home.html (nor shows up messages).
I also tried to set up the controller in the body ng-controller="home_controller" but the route configuration should do the same.