I'm new to Ionic, and I'm trying to create a ion-nav-view as shown in the tutorial here.
I have created 2 pages and set an angular conf file. While loading I get the following error in my browser: XMLHttpRequest cannot load file:///C:/Users/ITAI/Development/Ionic/LaughWithMe/www/templates/register.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
app.js:
angular.module('myApp', ['ionic'])
.config(function ($stateProvider,$urlRouterProvider) {
// Set and define states
$stateProvider
.state('register', {
url: '/register',
templateUrl: 'templates/register.html'
});
})
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-nav-bar></ion-nav-bar>
<ion-nav-view animation="slide-left-right">
</ion-nav-view>
<!-- <script id="index" type="text/ng-template">
<!-- The title of the ion-view will be shown on the navbar -->
<ion-view title="'Home'">
<ion-content>
<!-- The content of the page -->
<a ui-sref="register">Register</a>
</ion-content>
</ion-view>
</script>-->
</body>
</html>
register.html:
<h1> hello world!</h1>
I have a bit of experience with angular, but I got very confused this framework. I can't tell where is the directives and how to inject them into my HTML pages.
What I tried to do is to link the register page to the index.html page. The simplest way there is.
A cors error usually indicates that you are running the project without using an http serve.
Try running
ionic serve
or
phonegap serve
from the root of your project.
Related
I was working on some project and here is "index.html" file of my Angular project.
<!doctype html>
<html ng-app="templateApp">
<head>
<meta charset="utf-8">
<title> MEAN project template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- including App scripts -->
<!-- JQuery -->
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- App scripts -->
<script type="text/javascript" src="configs/app_setup.js">
</script>
</head>
<body>
</body>
</html>
and my project hierarchy as following:
client (contains: configs(folder) & index.html )
bower_components
my curious question here: what are the rules for script tags i expected the above "bower_components" path should not work but it works well.
and the above path and the following one are working without problems, so how that happened although they are different ??!!
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
it seems by default it looks into the root project directory, and then check for relative paths.
This one would make the directory go up one level from the directory that your index.html is located in
<script type="text/javascript"
src="../bower_components/jquery/dist/jquery.min.js">
</script>
Where as the following one would make the folder bower_componets be in the same directory as your index.html
<script type="text/javascript"
src="bower_components/jquery/dist/jquery.min.js">
</script>
Hi guys can you help me I'm just starting to learn angularjs. How to deal with these errors
app.js:6 > Uncaught ReferenceError: angular is not defined
angular.min.js:6 > Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.20/$injector/modulerr?p0=ajs&p1=Error%3A%20…%2F%2FC%3A%2FUsers%2FABK3%2FDesktop%2Fajs%2Fjs%2Fangular.min.js%3A18%3A139)
Thanks in advance guys
var app = angular.module('ajs', ['ui.router'])
<!DOCTYPE html>
<html ng-app="ajs">
<head>
<meta charset="utf-8">
<title>AJS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<h1 ui-view>Hi</h1>
</body>
<script src="app.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<script src="jquery/jquery.min.js"></script>
</html>
Make sure your scripts are loaded after angular so they can actually do something. The load order is important, for instance make sure to load jQuery before anything, almost all the libraries requires them to be previously loaded.
<!-- Load vendors -->
<script src="jquery/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
<!-- Load source code -->
<script src="app.js"></script>
You must put all of your script tags that calls angular BEFORE your app.js because your app.js needs angular.
Because here your file loads app.js then angular
I'm trying to run a Angular2 app from WAMP on my local pc.
I develop the app from the wamp/www folder and test it at different stages both from localhost:3000 and localhost/myapp (liteserver and wamp)
All works fine until i try to add <base href="/"> to Index.html right below the <head>.
At that point, only in Wamp i get the error: ReferenceError: System is not defined
Is there any workaround or fix to get past this error? (and move to the next one :) )
This is my Index.html.
<html>
<head>
<base href="/">
<title>Firebase</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Update:
LiteServer working, Folder Structure, and main.ts:
WAMP, Index.html
I was just reading about the new angular2 router and i thought to try this:
<base href=".">
and it just works with no further errors!!
I can't tell why, but both wamp and liteserver work fine now, even though in all tutorials about router they all show this method: <base href="/">. I hope this will help someone else to waste less time on this silly thing then i did.
I am new to ionic framework. In my app, i am trying to input something and when the user hits the add button i want it to save in my database. How do i define the controller for that? And what backend should i use for routing here? I am really confused here where to start. Please help me out. Any lead will be helpful. Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-header-bar class="top">
<h1 class="Title">Ionic App</h1>
</ion-header-bar>
<ion-content>
Add URL: <input>
<button>Add</button>
</ion-content>
</body>
</html>
Some receipes to get you started:
create a view with form elements backed by a controller that holds an initial (model) value for every element.
get familiar with "2-Way-Data-Binding" using the ngModel directive. This basically connects your form elements with the model values.
in the controller create a function that for example saves your model to a DB (something like $scope.saveData(){...};)
add the ngClick directive to your "save" button: <button ng-click"saveData()">Add</button> to call the function.
Have a look at $http or $resource and learn about RESTful Webservices to connect to your backend.
Implement a REST endpoint on your server that saves the data to the DB
See here for a tutorial that will take you further. There are plenty of such tutorials on the web.
Good luck! :-)
I have already an exsisting html file which use another librairies and stuff, I want to use in my new ionic application.
So I would like to use it as an ion-view. so I would like to know if it would be possible to include an html file in the ion-view ? which look like :
<ion-view>
<io-content>
</ion-view>
</ion-content>
this is the existing HMTL file where I use different libraries and css file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="./assets/js/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/ofc.css" rel="stylesheet" type="text/css" />
<script src="./assets/js/jquery-1.7.1.min.js"></script>
<script src="./assets/js/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="pouchdb-3.4.0.min.js"> </script>
<script type="text/javascript" src="blob-util.min.js"> </script>
<script type="text/javascript" src="moment.js"> </script>
<script src="properties.js"> </script>
</head>
<body>
<div data-role="page" id="p1">
</div>
<script src="core.js"></script>
</body>
</html>
Why would you do this? I believe this question comes from a problem you haven't described yet.
Normally all libraries used in an Ionic app are included in the index.html and not within each <ion-view> or <ion-content>. In these Ionic directives you only load the HTML needed for that view.
I suggest you start reading from the beginning:
Getting Started with Ionic
Ionic documentation
CodePen examples Ionic