Supun Athukorala

base URL  :  http://stackoverflow.com/questions/24316355/multiple-controllers-with-angularjs-in-single-page-app down vote I think you are missing the "single page app" meaning. That doesn't mean you will physically have one .html, instead, you will have one main index.html and several NESTED .html file. So why single page app? Because this way you do not load pages the standard way (i.e. browser call that completely refreshes the full page) but you just load the content part using Angular/Ajax. Since you do not see the flickering between page changes, you have the impression that you didn't move from the page. Thus, you feel like you are staying on a single page. Now, I'm assuming that you want to have MULTIPLE contents for your SINGLE PAGE app: (e.g.) home, contacts, portfolio and store. Your single page/multiple content app (the angular way) will be organized this way: index.html: contains header,  <ng-view>  and footer contacts.html:...

First, and most important - all Spring beans are managed - they "live" inside a container, called "application context". Second, each application has an entry point to that context. Web applications have a Servlet,  JSF uses a el-resolver, etc. Also, there is a place where the application context is bootstrapped and all beans - autowired. In web applications this can be a startup listener. Autowiring happens by placing an instance of one bean into the desired field in an instance of another bean. Both classes should be beans, i.e. they should be defined to live in the application context. What is "living" in the application context? This means that the context  instantiates  the objects, not you. I.e. - you never make  new UserServiceImpl()  - the container finds each injection point and sets an instance there. In your controllers, you just have the following: @Controller // Defines that this class is a spring bean @RequestMapping ( "/use...