I just started learning Ionic and recently I have added jquery and angular-ui-router through npm which worked perfectly fine and created in node_modules folder. But when i start my app and tries to include those files they are not included. In console the error is 404 not found. I have checked the path which is fine but its not working at all. May be its because the node_modules folder is outside the www folder. I am sharing an Image please tell me whats wrong.
.
This is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"></meta>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"></meta>
<title></title>
<link rel="manifest" href="manifest.json"></link>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script> -->
<link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
<link href="asset_files/css/style.css" rel="stylesheet"></link>
<!-- 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 -->
</head>
<body ng-app="starter">
<div class="bar bar-header bar-positive">
<h1 class="title">Cleaners</h1>
</div>
<ion-content class="has-header" ui-view>
</ion-content>
<div class="bar bar-footer bar-balanced"></div>
<script>
document.write("<script type='text/javascript' src='require.js'><\/script>");
</script>
</body>
</html>
and this is my require.js.
document.write("\
<script type='text/javascript' src='../node_modules/jquery/dist/jquery.min.js'><\/script>\
<script type='text/javascript' src='../node_modules/angular-ui-router/release/angular-ui-router.min.js'><\/script>\
<script type='text/javascript' src='app.js'><\/script>\
<script type='text/javascript' src='asset_files/js/routes.js'><\/script>\
");
I am not being able to understand whats wrong. In console , network where the error is coming the path is this http://localhost:8100/node_modules/angular-ui-router/release/angular-ui-router.min.js
Related
I just finished an angular app and would like to deploy it to a web server. I'm actually looking for a free solution for now. I'm using
http-server to launch my app so I don't have any other setup such as grunt or yeoman. I thought I could upload the files to my apache server but it shows blank.
This is how my file directory look. index.html
<!doctype html>
<html lang="en" ng-app="musicSearch">
<head>
<meta charset="utf-8">
<title>Angular App</title>
<!-- Scripts -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-route.min.js"></script>
<script src="//code.angularjs.org/1.3.0-rc.2/angular-resource.min.js"></script>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet/less" type="text/css" href="assets/styles/style.less">
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.1/less.min.js"></script>
<!-- Styles -->
</head>
<body>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
<script src="app.js"></script>
<script src="routes.js"></script>
<script src="controllers.js"></script>
<script src="services.js"></script>
<script src="directives.js"></script>
I am building a demo app using ionic framework. At a point I decided to use this version of angularjs
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>
Whenever I use the above version of angular I get this error Uncaught Error: [$injector:modulerr]
I have also loaded the angular module in my app.js file
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
===============EDITTED
<!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 -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- emoticon rendering -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<!--<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.min.js"></script>-->
<!--<script src="lib/ionic/js/ionic.bundle.js"></script>-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/emoji.min.js"></script>
<link type="text/stylesheet" rel="stylesheet" href="css/emoji.min.css" />
<!-- end of emoticon rendering -->
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<p>Welcome</p>
<br><br><br><br>
<div ng-controller="emojiController">
<div emoji-form emoji-message="emojiMessage" style="margin-top:100px; margin-left:200px">
<textarea id="messageInput" ng-model="emojiMessage.messagetext"></textarea>
<button id="emojibtn">
<i class="icon icon-emoji"></i>
</button>
</div></div>
</ion-content>
</ion-pane>
</body>
</html>
=================complete app.js
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
angular.module('starter', ['ionic','ngSanitize','emojiApp'])
emojiApp.controller('emojiController', ['$scope', function($scope) {
$scope.emojiMessage={};
}])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
document.addEventListener('deviceready', function () {
var Pushbots = PushbotsPlugin.initialize("56c898fb17795903658b4567", {"android":{"sender_id":"786368090790"}});
}, false);
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Where am I getting it wrong please?
So I have this simple code in angular that works on jsfiddle as you can see by pressing Run code snippet:
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact += 1;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div>{{ contact }}</div>
</div>
But when I try to use it in my Ionic app, it doesn't work. This is my complete index.html file:
<!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 id="body">
<div ng-app="" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
<script>
function ContactController($scope) {
$scope.contact = 0;
$scope.add = function() {
$scope.contact+=1;
}
}
</script>
</body>
</html>
Can anyone please tell me what I need to include in index.html in order for angular to work?
yes you need to initialize your app. in your app.js file you should see
angular.module('starter', ['ionic'])
so in your index.html you have ng-app=""
that needs to say
ng-app="starter"
You're html should look like this:
<div ng-app="starter" ng-controller="ContactController">
<button ng-click="add()">Add</button>
<div> {{ contact }} </div>
</div>
right now nothing is being bootstrapped and angular is not being attached to the page.
I've completed a course on AngularJs through codecademy. I followed the angular-seed steps to set up my own local environment to make my first app, but it appears angular is not initializing on my site. I cant even evaluate a simple expression such as {{3+2}} let alone pull scope values from the controller.
my first steps:
1. clone angular seed from git
2. npm install into directory
3. npm start
my code:
index.html
<html lang="en" ng-app='myApp'>
<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">
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.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>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[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 class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
and here is my module:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
controller:
myApp.controller('MainController', function($scope) {
}
];
});
Any help is greatly appreciated.
thanks
my console errors in chrome are :
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: print, not all, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)
http://localhost:8000/app/js/app.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/MainController.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:8000/app/js/listinginfo.js Failed to load resource: the server responded with a status of 404 (Not Found)
angular.js:4138 Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.15/$injector/nomod?p0=myApp
at http://localhost:8000/app/bower_components/angular/angular.js:63:12
at http://localhost:8000/app/bower_components/angular/angular.js:1774:17
at ensure (http://localhost:8000/app/bower_components/angular/angular.js:1698:38)
at module (http://localhost:8000/app/bower_components/angular/angular.js:1772:14)
at http://localhost:8000/app/bower_components/angular/angular.js:4115:22
at forEach (http://localhost:8000/app/bower_components/angular/angular.js:323:20)
at loadModules (http://localhost:8000/app/bower_components/angular/angular.js:4099:5)
at createInjector (http://localhost:8000/app/bower_components/angular/angular.js:4025:11)
at doBootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1452:20)
at bootstrap (http://localhost:8000/app/bower_components/angular/angular.js:1473:12)
http://errors.angularjs.org/1.3.15/$injector/modulerr?p0=myApp&p1=Error%3A%…calhost%3A8000%2Fapp%2Fbower_components%2Fangular%2Fangular.js%3A1473%3A12)
i figured cloning angular-seed and running npm install would setup everything correctly
It would be hard to tell without checking what errors are being thrown. Have you defined your controller though? Try adding a controller in your module like:
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}])
and remove
<!-- Controllers -->
<script src="js/MainController.js"></script>
EDIT:
I tried to run your application without much overhead and it works. My files look something like this:
index.html
<html lang="en" ng-app='myApp'>
<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"> -->
<!-- core Bootstrap css -->
<link rel="stylesheet" href="app.css">
<!-- <script src="bower_components/html5-boilerplate/js/vendor/modernizr-2.6.2.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.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> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<!-- Modules -->
<script src="js/app.js"></script>
<!-- Controllers -->
<script src="js/MainController.js"></script>
<!-- Directives -->
<script src="js/listinginfo.js"></script>
</head>
<body ng-controller ='MainController'>
<div class ='container-fluid'>
<div class ='col-md-4'>
<ul>
<li class = 'text-primary'> Properties </li>
<li>view1</li>
<li>view2</li>
</ul>
</div>
<!--[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 class = 'col-md-8'>
<p> {{ 3 + 2 }}</p>
</div>
</div>
<!-- container--> </div>
<!-- for production use
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script> -->
</body>
app.js
// Declare app level module which depends on views, and components
var myApp = angular.module('myApp', []);
MainController.js
var myApp = angular.module('myApp', []);
myApp.controller('MainController', ['$scope', function ($scope) {
}])
I hope this helps.
Your web server may not have access to read the js files inside your bower_components/angular folder. This has happened to me when one time.
Also like the above comment look at your browser console to see what kind of errors you see. Is MainController defined?
I have developed an AngularJs, RequireJs application with PHP as back-end and is hosted on WAMP server.
Server machine name is "ICC-Server" and alias is "iccportal" and domain is "ip.bombay".
When I access the portal with http://iccportal.ip.bombay on IE10 and Chrome it works well.
But If I try to access the same portal without domain name (http://iccportal), I get following error.
SCRIPT5009: 'angular' is undefined
app.js, line 4 character 1
SCRIPT5009: 'angular' is undefined
main.js, line 6 character 5
I am not sure if issue with requirejs or WAMP.
Please guide.
Following is the code snippet for main.js and app.js
Main.js
require(["app"], function (app) {
// Following line is more important else angular js will not work
angular.bootstrap(document.getElementsByTagName("body")[0], ["wkPortal"]);
});
app.js
(function (define, angular) {
"use strict";
// enable/disable logs
define(["components/home/homeController","components/home/homeService"], function (homeController, homeService) {
var app = angular.module("wkPortal", ["ngRoute", "ngSanitize"]);
// register home controller
app.controller("HomeController", homeController);
// register home service
app.service("HomeService", homeService);
return app;
}
);
}(define, angular));
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="shortcut icon" href="favicon.ico" type="image/ico"/>
<title>ICC Portal</title>
<!-- CSS ===================== -->
<!-- load bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/css/bootstrap-theme.css">
<link rel="stylesheet" href="assets/css/MetroJs.css">
<link rel="stylesheet" href="assets/css/app.css">
</head>
<body>
<div ng-view></div>
<!-- JS -->
<!-- load jquery -->
<script src="assets/js/jquery-2.1.0.js" type="application/javascript"></script>
<script src="assets/js/jquery-ui.js" type="application/javascript"></script>
<script src="assets/js/jquery.validate.js" type="application/javascript"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.js" type="application/javascript"></script>
<!-- load angular -->
<script src="assets/js/angular.min.js" type="application/javascript"></script>
<script src="assets/js/angular-animate.js" type="application/javascript"></script>
<script src="assets/js/angular-cookies.js" type="application/javascript"></script>
<script src="assets/js/angular-route.js" type="application/javascript"></script>
<script src="assets/js/angular-touch.js" type="application/javascript"></script>
<script src="assets/js/angular-sanitize.js" type="application/javascript"></script>
<script src="assets/js/MetroJs.js" type="application/javascript"></script>
<!-- application app -->
<script data-main="app/main" src="assets/js/require.js"></script>
</script>
</body>
</html>
Thanks,
Indrajit
The problem can be caused by an older document-mode.
Try going to developer tools (F12), and manually changing the document-mode.
If that works, check why your site forces an older document mode.
A likely cause may be the following line in your HTML head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
How Internet Explorer Chooses Between Document Modes: Link
You should not explicitly import AngularJS if you are using RequireJS. In this case Angular should be loaded by RequireJS and you should bootstrap your application manually. Google a little about it and you will find the solution.