I am new to the eclipse environment and have been working on Microsoft VS. Currently I have to work on the angularjs project on Eclipse. When I try to add new module in the application the eclipse gives me the error
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Login/MyApp.Login.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Camera/MyApp.Camera.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Chart/MyApp.GoogleChart.js
!JavaScript ERROR: ReferenceError: Can't find variable: angular on line 1 for http://localhost:17594/Register/MyApp.Register.js
!JavaScript ERROR: Error: [$injector:modulerr]
Is there anything I am Missing.
Following is my index.html file
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/ionic.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Hello World</title>
</head>
<body ng-app="MyApp">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-view></ion-nav-view>
<script type="text/javascript" src="cordova.js"></script>
<script src="/Login/MyApp.Login.js" type="text/javascript"></script>
<script src="/Camera/MyApp.Camera.js" type="text/javascript"></script>
<script src="/Chart/MyApp.Chart.js" type="text/javascript"></script>
<script src="/Chart/MyApp.GoogleChart.js" type="text/javascript"></script>
<script src="/Register/MyApp.Register.js" type="text/javascript"></script>
<script src="js/ionic.bundle.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
Maybe ionic.bundle has to be first, before cordova.js?
My code looks like:
<link href="css/ionic.app.css" rel="stylesheet">
<link href="lib/toaster/toaster.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- angular touch -->
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
Related
I migrated my application from Rails 3.2 to 4.0. I am having css and js in my assets folder and public -> technology folder.
Now while running the application, the css and js under public folder are not applicable.
This is my layout:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ABC TECHNOLOGIES</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/technology/css/vendor/bootstrap.css">
<link rel="stylesheet" href="/technology/css/all.css">
<link rel="stylesheet" href="/technology/css/colorbox.css">
<%= javascript_include_tag "application" %>
<script src="/technology/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="/technology/js/vendor/bootstrap.min.js"></script>
</head>
<body>
------------ some code ---------------
</body>
</html>
How to access my css / js from public folder in this layout?
Or is there any configurations I missed or made true/false in development.rb / application.rb etc; ?
This is the link I followed.
I am wanting to use Google Adsense with an Ember site I'm working on. However, if I just copy the code block I get from Google I get this error:
Error: `SCRIPT` tags are not allowed in HTMLBars templates (on line 3)
After doing some searching, it seems some people has the same issue, but I have not found a solution for this. Does anybody have any ideas?
Put external scripts in your app/index.html file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>TmpApp</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{content-for 'head'}}
<link rel="stylesheet" href="assets/vendor.css">
<link rel="stylesheet" href="assets/tmpapp.css">
{{content-for 'head-footer'}}
</head>
<body>
{{content-for 'body'}}
<script src="assets/vendor.js"></script>
<script src="assets/tmpapp.js"></script>
{{content-for 'body-footer'}}
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-12345678-1', 'auto'); // get the exact number from your Google Analytics admin screen
ga('send', 'pageview');
</script>
</body>
</html>
Notice the script is below the content-for 'body-footer'? Remember to use your own Google Analytics code from your admin section in Google Analytics.
I have a large php application that I am converting to ember.js. In my php application I used to have separate css and js files which was loaded when the specific routes get called. what the best way to accomplish this in ember.js or is there any other best practice for that. Right now I am loading all the js and css files in my index.html file.
<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />
js files:
<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>
I saw this tutorial http://madhatted.com/2013/6/29/lazy-loading-with-ember and also looked ember-cli. It will be really helpful for me if people share what they are doing for their application. Thanks in advance.
Typically you can take two paths to preprocess your assets: minify, compress, uglify, etc.
You can do it with the back-end you are using. As examples here, you have Rails using sprockets for its asset pipeline, or PHP's Assetic.
If you don't want to rely on your back-end for this task, you can opt to do it using any front-end build tool. There are a few here, the most popular option for ember-cli these days seems to be broccoli, which comes set up by default. Other choices could be gulp or grunt. All these options involve using your terminal to build your application, using a configuration file as a central point (Brocfile.js, Gruntfile.js, etc.)
It's mostly a matter of personal preference. As an example, I'd probably go with Rails asset pipeline for small projects, while I'd use ember-cli and broccoli if I'd be working on something bigger.
motivation
I want to user bower (grunt) package of bootstrap in my django template folder. I am aware of django-bootstrap3 which ideally can be configured to use those "local"/deployed copies of bootstrap package.
For now, I need a plain example to work. So this is what I do
step 1: layout.html
I take an hello world template layout.html (from bootstrap docs page) and put it into templates folder registered within my django project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
This example is valid for precompiled package.
step 2: bower
I run something like:
cd path/to/django/static/folder
bower install bootstrap
That creates a folder called bower_components
step 3: linking
?
PS
I am currently looking at yeoman board here to check if what is discussed is also a solution for me.
Use static files as documented on django page
{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}
In detail,
Layout.html will be changed to (assuming django 1.6):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{% block title %}title{% endblock %}</title>
{% load staticfiles %}
<!-- Bootstrap -->
<link href="{% static "bower_components/bootstrap/dist/css/bootstrap.css" %}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
{% block content %}
{% endblock %}
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="{% static "bower_components/jquery/dist/jquery.min.js" %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static "bower_components/bootstrap/dist/js/bootstrap.min.js" %}"></script>
</body>
</html>
I was tring to create a simple datepicker control using JQuery, but i was getting that error.
I have no clue why i am getting that error. Trying from 3 hrs but couldn't find the solution.
Can anyone plz help me with this.
Here is my code which i placed in masterpage.
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/DevExMenu.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.10.custom.min.js" ></script>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
this is the code i am using in my source file:
<asp:Content ID="Content4" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
$(function () {
$("#datepicker1").datepicker();
});
</script>
<p>
<asp:TextBox ID="datepicker1" runat="server"></asp:TextBox>
</p>
</asp:Content>
I dont know what the problem is but when i am trying the same code without a master page it is working fine.
Please help.
.NET could be renamaing the id of datepicker1.
After the DOM is ready, you could try to get the runtime id and setting to a js var:
textboxDatePick = '<%= datepicker1.ClientID %>';
Then in your scipt change $("#datepicker1").datepicker();
to: $("#" + textboxDatePick).datepicker();