i am trying to add angularjs to my spring 3.0 project. I am not able to add angularjs as front end technology for my project. here is my web.xml file.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<!-- The definition of the Root Spring Container shared by all Servlets and Filters -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/spring/root-context.xml</param-value>
</context-param>
<filter>
<filter-name>springSecurityFilterChain</filter-name>
<filter-class>org.springframework.web.filter.DelegatingFilterProxy</filter-class>
</filter>
<filter-mapping>
<filter-name>springSecurityFilterChain</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<!-- Creates the Spring Container shared by all Servlets and Filters -->
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<!-- Processes application requests -->
<servlet>
<servlet-name>appServlet</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/spring/appServlet/servlet-context.xml,
/WEB-INF/spring/spring-security.xml
</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>appServlet</servlet-name>
<url-pattern>/</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
and here is servlet-context.xml file
<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:beans="http://www.springframework.org/schema/beans"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mongo="http://www.springframework.org/schema/data/mongo"
xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc.xsd
http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd
http://www.springframework.org/schema/data/mongo
http://www.springframework.org/schema/data/mongo/spring-mongo-1.1.xsd">
<!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
<!-- Enables the Spring MVC @Controller programming model -->
<annotation-driven/>
<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
<resources mapping="/resources/**" location="/resources/"/>
<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
<!-- <beans:bean id="velocityConfig"
class="org.springframework.web.servlet.view.velocity.VelocityConfigurer">
<beans:property name="resourceLoaderPath" value="/WEB-INF/views/" />
</beans:bean> -->
<!-- <beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<beans:property name="cache" value="true" />
<beans:property name="prefix" value="" />
<beans:property name="layoutUrl" value="layout.vm"/>
<beans:property name="suffix" value=".html" />
</beans:bean> -->
<beans:bean id="viewResolver"
class="org.springframework.web.servlet.view.velocity.VelocityLayoutViewResolver">
<beans:property name="cache" value="true" />
<beans:property name="prefix" value="" />
<beans:property name="suffix" value=".html" />
</beans:bean>
<context:component-scan base-package="com.dashboard" />
<mongo:repositories base-package="com.dashboard.repositories"/>
</beans:beans>
here is app.js file
'use strict';
var AngularSpringApp = {};
var App = angular.module('DashBoard', ['DashBoard.filters', 'DashBoard.services', 'DashBoard.directives']);
// Declare app level module which depends on filters, and services
App.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/main', {
templateUrl: '/views/main.html',
controller: "MyController"
});
$routeProvider.when('/user', {
templateUrl: '',
controller: "My2Controller"
});
$routeProvider.when('/admin', {
templateUrl: '',
controller: "My3Controller"
});
$routeProvider.otherwise({redirectTo: '/'});
}]);
But but when i try to run project as webapplication (with tomcat) no "#" sing appears in url (which should appear in angularjs application).
Index.html file loads successfully (with out # in url) and when i change the url to
(localhost:8080/dashboard/#/main)
nothing happens and i still see the index file.
Is there any thing that i should do to add the angular nature to my application? Kindly help me, i shall be thankful.
UPDATE :
here is my index file
<!doctype html>
<html lang="en" ng-app="AngularSpringApp">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link rel="stylesheet" href="resources/css/app.css"/>
<link rel="stylesheet" href="resources/bootstrap/css/bootstrap.min.css" />
<script src="/resources/js/lib/angular/angular.js"></script>
<script src="/resources/js/app.js"></script>
<script src="/resources/js/services.js"></script>
<script src="/resources/js/controllers/RailwayStationController.js"></script>
<script src="/resources/js/controllers/CarController.js"></script>
<script src="/resources/js/controllers/TrainController.js"></script>
<script src="/resources/js/filters.js"></script>
<script src="/resources/js/directives.js"></script>
</head>
<body>
<div id="wrapper">
<div ng-view></div>
</div>
</body>
</html>
