I ended my Angular JS app...
and now what?
I have a app with 10 scripts src in index.html, 6 ng includes,...
All this are http requests, and have a relative size...
There are some particular way or command for "compile/build/generate/deploy" end app code? with all included, minified,...
Or I must do this with grunt/gulp :(?
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="Bit2Card" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="Bit2Card" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>App</title>
<meta name="description" content="Generate a credit card on fly with Bitcoins">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="reset.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">
You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.
</p>
<![endif]-->
<div id="app" ng-controller="appController" class="{{viewBack ? 'viewBack' : ''}}">
<ng-include src="'partials/overlays/load.html'"></ng-include>
<ng-include src="'partials/overlays/error.html'"></ng-include>
<ng-include src="'partials/overlays/terms.html'"></ng-include>
<ng-include src="'partials/overlays/qr.html'"></ng-include>
<ng-include src="'partials/overlays/payout.html'"></ng-include>
<ng-include src="'partials/overlays/restart.html'"></ng-include>
<div id="flip">
<div id="frontCard">
<ng-include src="'partials/header.html'"></ng-include>
<div id="panels">
<div id="select" class="panel{{panel === 1 ? ' visible' : ''}}" ng-include="'partials/panels/select.html'"></div>
<div id="pay" class="panel{{panel === 2 ? ' visible' : ''}}" ng-include="'partials/panels/pay.html'"></div>
<div id="get" class="panel{{panel === 3 ? ' visible' : ''}}" ng-include="'partials/panels/get.html'"></div>
</div>
<ng-include src="'partials/footer.html'"></ng-include>
</div>
<div id="backCard" ng-include="'partials/backside.html'"></div>
</div>
</div>
<!--
In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="bower_components/zeroclipboard/dist/ZeroClipboard.min.js"></script>
<script type="text/javascript" src="bower_components/ng-clip/dest/ng-clip.min.js"></script>
<script type="text/javascript" src="bower_components/qrcode/lib/qrcode.min.js"></script>
<script type="text/javascript" src="bower_components/angular-qr/angular-qr.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate/angular-translate.min.js"></script>
<script type="text/javascript" src="bower_components/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js"></script>
<script type="text/javascript" src="scripts/lin2a.min.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
I think you should check out: https://www.npmjs.org/package/gulp-html-replace. It will read through that html for you and insert a new script tag in there that points to a bundled version of all those deps.
Related
I am trying to set up a simple Flask app which uses React and Material UI (I cannot use Node/NPM for this). react, react-dom and material-ui.js are all being served by Flask out of the static resources path. They load up just fine, but in the very first text/babel function the Button element can't be found. Its there in the material-ui.js but my JSX function can't see it. Is there a way to import the component from the material-ui.js?
My index.html:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<!-- Metas -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
<title>F.L.O.P.</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
<!-- Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<h1>Hello World!!</h1>
<div id="test"></div>
<!-- Local React Lib -->
<script src="static/js/react/react.js"></script>
<!-- Local React DOM lib-->
<script src="static/js/react/react-dom.js"></script>
<!-- Local Material UI Lib -->
<script src="static/js/material/material-ui.js"></script>
<!-- Babel -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<script type="text/babel">
function App() {
return (
<Button variant="contained" color="primary">
Hello World
</Button>
);
}
ReactDOM.render(<App />, document.querySelector('#test'));
</script>
</body>
</html>
This results in a
Uncaught ReferenceError: Button is not defined
in the console from:
Inline Babel script:4
Which is the:
<Button variant="contained" color="primary">
line.
The example for the button is here: https://material-ui.com/getting-started/usage/
The components will be available inside the MaterialUI object. For the Button component, access it via MaterialUI.Button or destructure it.
<body>
<div id="test"></div>
<!-- React -->
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<!-- Babel -->
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<!-- MUI -->
<script src="https://unpkg.com/#material-ui/core#latest/umd/material-ui.development.js"></script>
<script type="text/babel">
const { Button } = MaterialUI;
ReactDOM.render(
(<Button variant="contained" color="primary">
Hello
</Button>),
document.getElementById("test")
);
</script>
</body>
I just started with angular and I've been experimenting with single page website, so I've basically just created really simple html to change, such as:
login.html
<div>
<h1>login</h1>
</div>
register.html
<div>
<h1>login</h1>
</div>
But when I click the links below leading to login.html and register.html, nothing happens.
Index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
login
register
<div ng-view>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
And here is where my module lies
app.js
'use strict';
var app = angular.module('myApp', []);
app.config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider
.when("/", {
templateURL : "view/login.html",
})
.when("/register", {
templateUrl : "view/register.html"
})
.otherwise({redirectTo: '/login'});
}]);
I'm using JetBrains WebStorm for the premade angular html file, and local server.
Thank you
Let try with this way
angular.module('myApp', ['ngRoute']);
login
register
The problem lied with the server I was running, it was not properly set up.
I seem not to be able to redo a simple directive tutorial in cloud9. Basically it does not produce the output "Here I am to save the day".
main2.js
var app = angular.module("superhero", []);
app.directive("superman", function() {
return {
restrict: "E",
template: "<div>Here I am to save the day</div>"
}
})
This function is loaded in the index file here as shown below. In addition I have another file called main.js where I declare the app "myApp", but even removing that does not help.
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div ng-app="superhero">
<superman></superman>
</div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="main.js"></script>
<script src="main2.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
You need to load the main2.js script (and the angular files) before
<div ng-app="superhero">
<superman></superman>
</div>
I tried in jsfiddle.net and it only appears to work when the javascript is loaded in the head of the page before the HTML.
I have a AngularJS page that I am attempting to display in IE 8.
Below is my HTML
<html id="ng-app" ng-app="">
<head>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/json3/3.3.0/json3.min.js'></script>
<script src="http://docs.angularjs.org/angular.min.js"></script>
</head>
<BODY ng-app="">
<script type="text/javascript">
function cstScope($scope) {
$scope.LEVEL = "x1 ";
$scope.change = function() {
alert("changed");
};
}
</script>
<div ng-controller="cstScope">
<input type=text ng-model="LEVEL" ng-change="change()"></input>
</div>
</BODY>
</html>
It falls over when the page is loading with
Line: 30
Error: [$sce:iequirks] http://errors.angularjs.org/1.2.14-build.2316+sha.24fe163/$sce/iequirks
I have tried adding JSON3 and ieshiv but no luck.
Add this meta tag in inside of Header tag
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Look like
<head>
<meta charset="utf-8">
<title>Sample App</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
I hopes, it's helps to you. Cheer's...
Just a shot here, but make sure you do not have compatibility mode turned on. I wasted some time on a similar error, and had accidentally clicked the compatibility button when I meant to click on the refresh button.
for Angularjs working correctly in Internet Explorer you also need jQuery version which is under 2.0. Here is the solution which works for me.
<head>
<!--[if lt IE 9]>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="../../js/jquery.1.9.0.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script type="text/javascript" src="../../js/jquery.2.0.min.js"></script>
<!--<![endif]-->
<title>App Title</title>
<script type="text/javascript" src="../../js/angular.min.js"></script>
<script type="text/javascript" src="../../js/jquery.plugin.min.js"></script>
My index.html has:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="/public/stylesheets/bootstrap.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app="WebApp">
<base href="/app">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<!-- Add your site or application content here -->
<div class="container" ng-view=""></div>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-X');
ga('send', 'pageview');
</script>
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) /app/scripts/scripts.js -->
<script src="/app/scripts/app.js"></script>
<script src="/app/scripts/controllers/main.js"></script>
<!-- endbuild -->
</body>
</html>
All of my angular code is in a app directory from the top level. My Gruntfile.coffee is:
useminPrepare:
html: "<%= appConfig.app %>/index.html"
options:
dest: "<%= appConfig.dist %>"
usemin:
html: "<%= appConfig.dist %>/*.html"
css: ["<%= appConfig.dist %>/styles/**/*.css"]
options:
dirs: ["<%= appConfig.dist %>"]
But I'm getting an error:
Running "useminPrepare:html" (useminPrepare) task
Going through app/index.html to update the config
Looking for build script HTML comment blocks
Warning: An error occurred while processing a template (Cannot read property 'src' of undefined). Use --force to continue.
What am I doing wrong?
I think your problem is, that you want to concat/minify the angular sources. The documented way is to use the provided files like angular-route.min.js and include them in the head section of your html.
So, following lines throws that error:
<script src="/app/bower_components/angular/angular.js"></script>
<!-- build:js /app/scripts/angular.js -->
<script src="/app/bower_components/angular-route/angular-route.js"></script>
<script src="/app/bower_components/angular-resource/angular-resource.js"></script>
<script src="/app/bower_components/angular-cookies/angular-cookies.js"></script>
<script src="/app/bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
As a side note: these angular libs heave heavy complex sourcecode in some parts, its quite a challenge to exactly configure your personal minifier, like the angular developers did with theirs, to provide the public angular-xxxxx.min.js files.
If I understand correctly, your index.html file is in the app directory, so you may try to use relative links to scripts in your html.
<!-- build:js scripts/angular.js -->
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<!-- endbuild -->
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
<!-- endbuild -->