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 ?
Related
I am learning Angularjs and Setting my routing for pages. Right now when whatever Url I try the .otherwise statement is executed. here is my app.js
var myNinjaApp = angular.module('myNinjaApp', ['ngRoute']);
myNinjaApp.config(['$routeProvider', function($routeProvider){
$routeProvider
.when ('/home',{
templateUrl: 'views/home.html'
})
.when ('/directory', {
templateUrl: 'views/directory.html',
controller : 'NinjaController'
})
.otherwise({
redirectTo: '/directory'
});
}]);
And the following is my index.html
<html lang="en" ng-app="myNinjaApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="app/lib/angular.min.js"></script>
<script src="app/lib/angular.route.min.js"></script>
<script src="app/app.js"></script>
</head>
<body >
<header ng-include = "'header.html'"></header>
<div ng-view></div>
</body>
</html>
I am using vscode live server to run this simple app. Also, I have the the controller in my app.js but I haven't pasted the code over here for simplicity.
try this <base href="/"> in you're header tag, and add $locationProvider.html5Mode(true); before $routeProvider
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'm trying to create a login/signup site in order to learn how to separate controllers and partial views, but I'm not sure why my 'LoginController' isn't being injected. Feel free to provide any other feedback.
app.js
angular.module('Registration', ['ngRoute'])
.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/login', {
templateUrl: 'app/login/login.html',
controller: 'LoginController'
})
.otherwise({ redirectTo: '/login' });
}]);
LoginController.js
angular.module('Registration')
.controller('LoginController', ['$scope', ($scope) => {
$scope.message = 'Does this work?';
}]);
login.html
<div class="col-md-offset-3 col-md-6">
{{ message }}
</div>
index.html
<!doctype html>
<html ng-app="Registration">
<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>Sup?</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="row">
<div ng-view></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="assets/js/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/login/LoginController.js"></script>
</body>
</html>
server.js
var express = require('express');
var app = express();
app.use(express.static('./public'));
app.listen(3000, () => {
console.log('Listening on port 3000.');
});
Directory Structure
Turns out you can't use an arrow function in the controller! Totally didn't mean to answer my own question.
Found the answer here: https://github.com/angular/angular.js/issues/14814
Just try to reach to your login route like http://localhost:8080/#/login
Am trying to use material-design-lite with ui-router, but my templates are never rendered into the view
<html lang="en" ng-app="admin">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="fragment" content="!">
<base href="/">
<title ng-bind="state.data.title"></title>
<link rel="stylesheet" type="text/css" href="libs/material-design-lite/material.min.css">
<link rel="stylesheet" type="text/css" href="src/css/app.css">
</head>
<body>
<div class="app-layout mdl-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<app-header></app-header>
<app-sidebar></app-sidebar>
<main class="mdl-layout__content mdl-color--grey-100 page">
<section ui-view></section>
</main>
</div>
<script>
//Global Variables
</script>
<script src="libs/material-design-lite/material.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
<script src="libs/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="src/js/modules/angular-mdl.js"></script>
<script src="src/js/app.js"></script>
<script src="src/js/app.routes.js"></script>
<script src="src/js/controllers/main.js"></script>
<script src="src/js/controllers/dashboard.js"></script>
<!-- Directives -->
<script src="src/js/directives/header.js"></script>
<script src="src/js/directives/sidebar.js"></script>
</body>
</html>
app.routers.js file
//App Routes
angular.module('admin').
config(['$stateProvider', '$urlRouterProvider','$locationProvider',
function($stateProvider, $urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true).hashPrefix('!');
$urlRouterProvider.otherwise('/dashboard');
$stateProvider.state('app',{
abstract: true,
url: '',
controller: 'MainController'
})
.state('app.dashboard', {
url: '/dashboard',
data: {
'title': "Admin - Dashboard"
},
templateUrl: '/tpls/dashboard.html',
controller: 'DashboardController'
})
}
]);
$rootScope.$on('$stateChangeSuccess', function () {
$timeout(function () {
componentHandler.upgradeAllRegistered();
});
});
I found that ui-router doesn't work well with material design lite in my project, And in the source code of material, I found an Window object componentHandler which has a function upgradeAllRegistered, this function should work. So, I called it after stateChangeSuccess, and it just worked.
Add template: "<ui-view />" to your 'app' state's config object
https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#abstract-states
Remember: Abstract states still need their own <ui-view/> for their children to plug into. So if you are using an abstract state just to prepend a url, set resolves/data, or run an onEnter/Exit function, then you'll additionally need to set template: "<ui-view/>".
I have this web app that has to become a app using phonegap: the problem is that we used angularjs and routing and so the views. It seems that there is no way to make them work using phonegap, I already tried Angular ng-view/routing not working in PhoneGap but it doesn't help.
This is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="RoutingApp">
<head>
<title>Big Gym</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/courses.css">
<link rel="stylesheet" href="css/navbar.css">
<link rel="stylesheet" href="css/sidebar.css">
</head>
<body>
<div class="mainContainer">
<div ng-view></div>
</div>
<!--Footer-->
<div my-footer></div>
<!-- Include the AngularJS library -->
<script src="js/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<!-- Scroll-->
<script src="js/angular-smooth-scroll.min.js"></script>
<!-- UI Bootstrap -->
<script src="js/ui-bootstrap-tpls-0.13.0.min.js"></script>
<!-- Directives -->
<script src="js/directives/footer.js"></script>
<!-- Controllers -->
<script src="js/controllers/MapController.js"></script>
<script src="js/controllers/CourseHomeController.js"></script>
<script src="js/controllers/CourseController.js"></script>
<script src="js/controllers/InstructorController.js"></script>
<script src="js/controllers/NavbarController.js"></script>
<script src="js/controllers/categoriesController.js"></script>
<!-- Services -->
<script src="js/services/courses.js"></script>
<script src="js/services/categories.js"></script>
<!-- Maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</body>
</html>
app.js
app=angular.module('RoutingApp', ['ngRoute','ui.bootstrap','smoothScroll']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: '/www/views/Home.html'
})
.when('/CourseHome/', {
controller: 'CourseHomeController',
templateUrl: '/www/views/CourseHome.html'
})
.when('/course/:id', {
controller: 'CoursesJoinInstructor',
templateUrl: '/www/views/Course.html'
})
.when('/courseByLevel/', {
controller: 'CourseLevelController',
templateUrl: '/www/views/CourseLevel.html'
})
.when('/coursesByCategory/', {
controller: 'CourseByCourseCategoryController',
templateUrl: '/www/views/CourseLevel.html'
})
.when('/instructor/:id', {
controller: 'InstructorController',
templateUrl: '/www/views/Instructor.html'
})
.when('/Location', {
templateUrl: '/www/views/Location.html'
})
.when('/Categories/', {
controller: 'CategoriesController',
templateUrl: '/www/views/Categories.html'
})
.when('/form/:id', {
controller: 'CourseController',
templateUrl: '/www/views/Form.html'
})
.otherwise({
redirectTo: '/'
});
});
index.js
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, true);
},
onDeviceReady: function() {
angular.element(document).ready(function() {
angular.bootstrap(document);
});
},
};
With this code i get white screen on my android phone, without the index.js and putting ng-app in the body i can see the footer with the css, so the directives are working but not the views. Hope someone can help.