the code work without error in the chrome. but when i run it on the android device and click a tab to route, it will make error. when?
error infoļ¼Error: [ng:areq] Argument 'ChartController' is not a function, got undefined
index.html the module define
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>NursingManagement</title>
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<meta name="format-detection" content="telephone=no">
<!-- inject:app-styles:css --><!-- endinject -->
</head>
<body ng-app="NursingManagement">
<ion-nav-view></ion-nav-view>
<!-- inject:vendor:js --><!-- endinject -->
<!-- inject:app:js --><!-- endinject -->
<script src="cordova.js"></script>
</body>
</html>
app.js route config
angular.module('NursingManagement', ['ionic', 'ngCordova', 'ngResource'])
.config(['$httpProvider', '$stateProvider', '$urlRouterProvider','$ionicConfigProvider',function($httpProvider, $stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.platform.android.tabs.position('bottom');
// register $http interceptors, if any. e.g.
// $httpProvider.interceptors.push('interceptor-name');
// Application routing
$stateProvider
.state('main', {
url: '/main',
abstract: false,
templateUrl: 'templates/main.html'
})
.state('main.message',{
url:'/message',
views:{
'myContainer':{
templateUrl:'templates/views/message.html',
controller:'MsgListController'
}
}
})
.state('main.chart',{
url:'/chart',
cache:false,
views:{
'myContainer':{
templateUrl:'templates/views/chart.html',
controller:'ChartController'
}
}
})
.state('main.compose',{
url:'/compose',
views:{
'myContainer':{
templateUrl:'templates/views/compose.html',
controller:'ComposeController'
}
}
})
// redirects to default route for undefined routes
$urlRouterProvider.otherwise('/main/message');
}]);
define the controller
angular.module('NursingManagement')
.controller('ChartController', ['$scope','$ionicPlatform', '$cordovaSQLite',function($scope,$ionicPlatform, $cordovaSQLite) {
$scope.showChartType='line';
}
])
Related
I have an angular application where i have a app.run.js and app.controllers.js
Previously i was using one main.js , app was working fine but now when
i have separated the controllers and run.js
i am getting no module available error.
Error: $injector:modulerr
Module Error
What am i doing wrong here ?
Please see the fiddle for the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Starfleet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="http://webstandards.delhivery.com/favicon.ico">
<link rel="stylesheet" href="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.css">
<link rel="stylesheet" href="styles/style.css">
</head>
<body ng-app="starfleet-app" ng-controller="pageController as vm">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-route.min.js"></script>
<script src="https://webstandards.delhivery.com/2.1.0/libs/ws/delhivery.js"></script>
<script src="scripts/app.run.js"></script>
<script src="scripts/controllers/app.page.controller.js"></script>
</body>
</html>
This is my app.run.js
angular.module('starfleetApp',['dlv-ng','ngRoute']);
angular.module('starfleetApp').config(function($routeProvider) {
debugger;
$routeProvider
.when('/', {
templateUrl: './../partials/tracking.html'
})
.when('/create', {
templateUrl: './../partials/createOrder.html'
})
.when('/singleUpload', {
templateUrl: './../partials/singleUpload.html'
})
.otherwise({
redirectTo: '/'
});
});
This is my app.page.controller.js
angular.module("starfleetApp").controller('pageController', function($scope, $uibModal, $log, $document, $rootScope) {
});
<!-- begin snippet: js hide: false console: true babel: false -->
Have you tried to change your angular.module("starfleetApp") to angular.module("starfleet-app")?
according to your html and JS, you are using wrong module name. this might fix your error.
EDIT
working code
http://jsbin.com/komodukipe/edit?html,output
I created ionic app blank,after I created templates folder and a file login.html in it.
Now I want set when start my app login.html page will show.
I try it with code:
app.js
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
abstract: true,
templateUrl: 'templates/login.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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
</body>
</html>
but it show white page when start.
How I can fix it?
Thank everyone!
You have configured states, but didn't set a default state. You also don't have a <div ui-view></div> to kick off the state provider.
If you want to have the login page as the start page, you have to configure it like so:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
// remove abstract true
templateUrl: 'templates/login.html',
})
// Set default to /login
$urlRouterProvider.otherwise("/login");
})
Then in your html let the $stateProvider know where the root of your view navigation is:
<body ng-app="starter">
<div ui-view></div>
</body>
I am trying to display the response in my view.....I am getting data in my controller but the data is not showing in view
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 rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ngGeolocation/ngGeolocation.min.js"/>
<!-- 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/controller.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view ></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic','starter.controllers','ui.router'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('Login', {
cache: false,
url: '/Login',
views: {
'': {
templateUrl: 'Templates/Login.html',
controller: 'loginCtrl',
}
}
})
$urlRouterProvider.otherwise('/Login');
});
my controller
var app=angular.module('starter.controllers',['ngGeolocation']);
app.controller('loginCtrl',function($geolocation, $scope){
$scope.test="test string";
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
});
})
in the console i am able to see the data
Login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="main">
<pre>{{test}}</pre>{{best}}
{{myPosition.latitude}}
</div>
</body>
</html>
I can only see first pre tag data, the second is always '{}'
I tried to create a plunker but its giving a warning for $geolocation and that function is escaping from execution.. Any help will be appreciated...tq
Your $scope.myPosition is a Geoposition object. That object contains a coords object that contains the values for latitude and longitude (among others). Change your view like so:
{{myPosition.coords.latitude}}
Hope this helps.
I just tried on the jfiddle. Write this to see the latitude:
`<pre>{{myPosition.coords.latitude}}</pre>`
and make sure location settings is ENABLED in your computer and it will show the correct value.
I spent a bit of time generating a https://jsfiddle.net/jktkq8tL/6/. Most notably adding an error function,
$geolocation.getCurrentPosition({
}).then(function(position) {
$scope.myPosition = position;
console.log($scope.myPosition);
},function(data) {
console.log(data.error.message);
});
which highlighted an error:
Network location provider at 'https://www.googleapis.com/' : No
response received.
Once I had received this error, I performed a search and found this SO answer. Which states:
I simulated this problem and found that the success callback functions
were only called when the html page was hosted on a web server and not
when opened from a filesystem.
So this is worth investigating.
I'm using AngularJS 1.4.7 for a web application which works completely fine on the desktop site. However when I load the page on my phone using Chrome the webpage doesn't load any of the routing that should be taken care of by the ngRoute component.
The header.php
<?php ob_start(); ?>
<!DOCTYPE html>
<html lang="en-ca" ng-app="ledgerFeed">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Online Ledger</title>
<script src="/res/jQuery.js"></script>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="/bootstrap/css/bootstrap-theme.css" />
<script src="/bootstrap/js/bootstrap.min.js"></script>
<base href="/ledger/">
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="fetcher.js"></script>
<script src="accountController.js"></script>
<script src="entryController.js"></script>
</head>
<body>
The app.js
(function() {
var app = angular.module("ledgerFeed", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
// .when("/", {
// templateUrl: "accountlist.php",
// controller: "accountController"
// })
.when("/accounts", {
templateUrl: "accountlist.php",
controller: "accountController"
})
.when("/account/:accountID", {
templateUrl: "entrylist.php",
controller: "entryController"
})
.otherwise({ redirectTo: "/accounts" });
// $locationProvider.html5Mode(true);
});
})();
Does anyone know what I might be doing wrong ?
I used John Papa's HotTowel Angular template to generate my app. On my development machine, my angular project works fine in IIS Express without <base> in the Index.html. When the project is published to IIS 8 hosting server to "MyIISsite/myAppName" folder the application runs except all the navigation starts at the "MyIISsite" instead of "MyIISsite/myAppName/...". I can't navigate to anywhere. This IIS 8 has multiple sites. MyIISsite is using port 8083. The folder is converted to a web application. When I added <base> tag in the Index.html, then I got the error about ng-include file is not found. Does anyone know how to configure IIS 8 for this problem? Thanks.
Here are the IE Developer Tools console message, index.html, and ui-Router configuration
(function ()
{
'use strict';
var myApp = angular.module('myApp');
myApp.config(['$stateProvider', '$locationProvider', uiRouteConfigurator]);
function uiRouteConfigurator($stateProvider, $locationProvider)
{
//debugger;
//http://www.jokecamp.com/blog/resolving-angularjs-paths-in-asp-mvc-spa-iis
// UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
// ------------------------------------------------------------------------------------------------------------
$stateProvider
.state('home', {
url: '/',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
})
//test route ----------------------------------
.state('test', {
url: 'test',
//template:"<h2>Test</H2>",
templateUrl: 'app/test/test.html',
controller: 'testCtrl'
})
.state('uiGrid', {
url: 'uiGrid',
templateUrl: 'app/test/uiGrid.html',
controller: 'uiGridCtrl'
})
// admin routes -------------------------------
.state('changeSite', {
url: '/site',
templateUrl: 'app/admin/admin.html',
controller: 'adminCtrl'
})
// general routes -------------------------------
.state('about', {
url: '/about',
templateUrl: 'app/about/about.html',
controller: 'aboutCtrl'
})
.state('contactList', {
url: '/contacts',
//template:'<h2>Contacts</h2>',
templateUrl: 'app/contacts/contactList.html',
controller: 'contactCtrl'
})
// Otherwise routes -----------------------------
.state('otherwise', {
url: '*path',
templateUrl: 'app/dashboard/dashboard.html',
controller: 'dashboardCtrl'
});
$locationProvider.html5Mode(true);
}
})();
Error: [$compile:ctreq] Controller 'ngInclude', required by directive 'ngInclude', can't be found!
http://errors.angularjs.org/1.2.22/$compile/ctreq?p0=ngInclude&p1=ngInclude
at getControllers (http://myIISserver:8083/myApp/scripts/angular.js:6524:13)
at nodeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6692:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6086:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at compositeLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:6089:13)
at publicLinkFn (http://myIISserver:8083/myApp/scripts/angular.js:5982:30)
at Anonymous function (http://myIISserver:8083/myApp/scripts/angular.js:1440:11)
at Scope.prototype.$eval (http://myIISserver:8083/myApp/scripts/angular.js:12658:9)
at Scope.prototype.$apply (http://myIISserver:8083/myApp/scripts/angular.js:12756:11) <div data-ng-include="'/app/layout/shell.
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<style>
/* This helps the ng-show/ng-hide animations start at the right place. */
/* Since Angular has this but needs to load, this gives us the class early. */
.ng-hide {
display: none !important;
}
</style>
<title data-ng-bind="title">My App Title</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<script>
// Must be first. IE10 mobile viewport fix
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/))
{
var msViewportStyle = document.createElement("style");
var mq = "#-ms-viewport{width:auto!important}";
msViewportStyle.appendChild(document.createTextNode(mq));
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
</script>
<link href="content/ie10mobile.css" rel="stylesheet" />
<link href="content/bootswatch/cerulean/bootstrap.min.css" rel="stylesheet" />
<link href="content/font-awesome.min.css" rel="stylesheet" />
<link href="content/ui-grid-unstable.css" rel="stylesheet" />
<link href="content/toastr.css" rel="stylesheet" />
<link href="content/customtheme.css" rel="stylesheet">
<link href="content/styles.css" rel="stylesheet" />
<!--<base href="/MyAppName/" />-->
</head>
<body>
<div>
<!-- shell -->
<div data-ng-include="'app/layout/shell.html'"></div>
<!-- splash -->
<div id="splash-page" data-ng-show="false">
<div class="page-splash">
<div class="page-splash-message">
My App Name
</div>
<div class="progress progress-striped active page-progress-bar">
<div class="bar"></div>
</div>
</div>
</div>
</div>
<span data-cc-scroll-to-top></span>
<!-- Vendor Scripts -->
<script src="scripts/jquery-2.1.1.js"></script>
<script src="scripts/angular.js"></script>
<script src="scripts/angular-animate.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<script src="scripts/ui-grid-unstable.js"></script>
<script src="scripts/angular-resource.js"></script>
<script src="scripts/angular-sanitize.js"></script>
<script src="scripts/bootstrap.js"></script>
<script src="scripts/toastr.js"></script>
<script src="scripts/moment.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/spin.js"></script>
<!-- Bootstrapping -->
<script src="app/myApp.js"></script>
<script src="app/config.js"></script>
<script src="app/config.exceptionHandler.js"></script>
<script src="app/config.ui.route.js"></script>
<!-- common Modules -->
<script src="app/common/common.js"></script>
<script src="app/common/logger.js"></script>
<script src="app/common/spinner.js"></script>
<!-- common.bootstrap Modules -->
<script src="app/common/bootstrap/bootstrap.dialog.js"></script>
<!-- app modules -->
<script src="app/about/aboutController.js"></script>
<script src="app/admin/adminController.js"></script>
<script src="app/contacts/contactController.js"></script>
<script src="app/dashboard/dashboardController.js"></script>
<script src="app/layout/shellController.js"></script>
<!-- app.customers modules-->
<script src="app/customer/customerController.js"></script>
<!-- app.tasks modules -->
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskAddController.js"></script>
<script src="app/tasks/taskController.js"></script>
<script src="app/tasks/taskEditController.js"></script>
<script src="app/tasks/taskSearchController.js"></script>
<!-- app.users modules-->
<script src="app/users/userController.js"></script>
<!-- app Services -->
<script src="app/services/datacontext.js"></script>
<script src="app/services/directives.js"></script>
<script src="app/services/services.js"></script>
<script src="app/services/factories.js"></script>
<!-- test -->
<script src="app/test/testController.js"></script>
<script src="app/test/uiGridController.js"></script>
</body>
</html>