Dispatcher:
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="
http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
<context:component-scan base-package="com.nt.beans" />
<mvc:resources mapping="/resources/**" location="/" />
<mvc:annotation-driven />
<bean
class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix">
<value>/WEB-INF/views/</value>
</property>
<property name="suffix">
<value></value>
</property>
</bean>
</beans>
Controller class:
#Controller
public class IndexController {//Serves main index.html
#RequestMapping("/**")
public String getIndexPage() {
return "/";
}
}
UI-Router:
myApp.config(function ($stateProvider, $locationProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /login
$urlRouterProvider.otherwise("/Login");
// Now set up the states
$stateProvider
.state('Login', {
url: "/Login",
views: {
header: header,
content: {
templateUrl: 'views/Login.html',
controller: function () {
}
},
footer: footer
}
});
$locationProvider.html5Mode({
enabled: false,
requireBase: true
});
});
index jsp page:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<title>BulkSMS - HTML</title>
<base href="/BulkSMS2/">
<!-- Bootstrap core CSS -->
<link href="resources/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<!--font-awesome-->
<link href="resources/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<!--Bootstrap social-->
<link href="resources/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="wrap">
<!--main content-->
<div ui-view="content"></div>
</div>
<!--Bootstrap core JavaScript-->
<script src="resources/bower_components/bootstrap/dist/js/bootstrap.min.js" type="text/javascript"></script>
<!--angular related scripts-->
<script src="resources/bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="resources/bower_components/angular-ui/build/angular-ui.min.js" type="text/javascript"></script>
<script src="resources/bower_components/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="resources/js/angular_module.js" type="text/javascript"></script>
<script src="resources/js/controllers/StateProvider.js" type="text/javascript"></script>
<script src="resources/js/controllers/LoginController.js" type="text/javascript"></script>
</body>
</html>
When I run the app, it is supposed to load login.html but it showing error in console like:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:8084/BulkSMS2/resources/bower_components/bootstrap-social/bootstrap-social.css"
The prefix in dispatcher.xml is WEB-INF/views so the login.html page inside it should load and also in the controller I am returning the path as / so any unmatched url pattern should load login page according to state provider.
Related
I am new to angular-js.I am creating a sample application to understand the usage of Angular-route.My Webapp is a Spring Web-MVC Application.
I have home page with following two tabs:
Add Record
View Record
find below its code snippet: home.jsp
<%# page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<jsp:include page="taskAppCommonJs.jsp"/>
</head>
<body ng-app="taskApp">
<form id="taskForm" name="taskForm">
<table width="100%" bgcolor="black" border="0">
<tr>
<td>
<div class="main_menu">
<ul>
<li> Add Record</li>
<li> View Record</li>
</ul>
</div>
</td>
</tr>
</table>
<div ng-view></div>
</form>
</body>
</html>
taskAppCommonJs.jsp
<%
final String ctxPath = request.getContextPath();
%>
<script type="text/javascript" src="<%=ctxPath%>/resources/js/jquery-3.1.1-min.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/resources/js/jquery-1.12.1-ui.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/resources/js/angular-1.4.8-min.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/resources/js/angular-route.js"></script>
<script type="text/javascript" src="<%=ctxPath%>/resources/js/taskAppAngular.js"></script>
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/resources/css/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="<%=ctxPath%>/resources/css/menu_style.css"/>
taskAppAngular.js
var customerApp = angular.module('taskApp', [ 'ngRoute' ]);
customerApp.config(function($routeProvider) {
$routeProvider
.when('view', {
templateUrl : 'viewTask.html',
controller : 'activityController'
})
.when('add', {
templateUrl : 'createTask.html',
controller : 'activityController'
});
});
customerApp.controller('activityController',function($scope){
$scope.createInfo="create page";
$scope.viewInfo="view page";
});
Spring Controller Class:
#Controller
public class TaskController implements Serializable{
#RequestMapping(value = "/createTask.html", method = RequestMethod.GET)
public String createTask() {
System.out.println("createTask invoked");
return "createTask";
}
#RequestMapping(value = "/viewTask.html", method = RequestMethod.GET)
public String viewTask() {
System.out.println("viewTask invoked");
return "viewTask";
}
}
viewConfig.xml
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-4.3.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
<mvc:annotation-driven />
<mvc:resources mapping="/resources/**" location="/resources"/>
<bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/view/" />
<property name="suffix" value=".jsp" />
</bean>
</beans>
My createTask.jsp and viewTask.jsp is inside /WEB-INF/view/ folder.
createTask.jsp
<p ng-bind="createInfo"></p>
viewTask.jsp
<p ng-bind="viewInfo"></p>
My problem is angular router is not working.
Can anyone provide any solution to this????
You are missing / before view and add:
it should read:
.when('/view',....
.when('/add',....
Your states in the config should be,
$routeProvider
.when('/view', {
templateUrl : 'viewTask.html',
controller : 'activityController'
})
.when('/add', {
templateUrl : 'createTask.html',
controller : 'activityController'
});
});
I have included my dependencies for using Angular UI router but when I run my application I keep receiving an error stating: $urlRouteProvider is not defined. It seems to not be recognizing UI router and is immediately forward to the .otherwise instead of activating the initial login state.
Here is my code:
app.js --
var app = angular.module("demoApp", ["ngVidBg", "ngAnimate","ui.router"]);
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/login',
templateUrl: 'views/login.html',
controller: 'LoginCtrl'
})
.state('signup', {
url: '/signup',
templateUrl: 'views/signup.html',
controller: 'SignUpCtrl'
})
.state('form', {
url: '/form',
templateUrl: 'views/form.html',
resolve: {
logincheck: checkLoggedin
}
})
$urlRouteProvider.otherwise('/views/login');
}]);
index.html--
<!DOCTYPE html>
<html lang="en" ng-app="demoApp">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/vidBg.css"
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<nav ng-controller="NavCtrl">
<span ng-show="!currentUser">
</span>
</nav>
<div ng-view>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Angular -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-animate.js"></script>
<script src="./js/app.js" type="text/javascript"></script>
<script src="./js/controllers.js" type="text/javascript"></script>
<script src="./js/vidBg.js" type="text/javascript"></script>
</body>
</html>
Its typo at the $urlRouteProvider.otherwise line, it should be
$urlRouterProvider
instead of
$urlRouteProvider
$urlRouterProvider Doc
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>
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.
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';
}
])