On one side, you should separate your main view from your index.
And, on the other side, your code is not working because this part of the code is wrong:
app.config('$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {//redirect if the router is unspecified$urlRouterProvider.otherwise('/home');$stateProvider//home router where all the posts are displayed.state('home', { url: '/', templateUrl: 'index.html', controller: 'mainController'})//the login router.state('login',{ url:'/login', templateUrl: 'login.html', controller: 'loginController'});});You forgot the []'s.
app.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { //redirect if the router is unspecified $urlRouterProvider.otherwise('/home'); $stateProvider //home router where all the posts are displayed .state('home', { url: '/', templateUrl: 'index.html', controller: 'mainController' }) //the login router .state('login', { url: '/login', templateUrl: 'login.html', controller: 'loginController' });}]);But with that code your main menu won't dissapear.
Here's a snippet with a better approach:
var app = angular.module("secret", ["ui.router"]);//TO DO: THIS NEEDS TO BE COMPLETEDapp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { //redirect if the router is unspecified $urlRouterProvider.otherwise('/init'); $stateProvider //home router where all the posts are displayed .state('init', { url: '/init', templateUrl: 'init.html', controller: 'mainController' }) //the login router .state('login', { url: '/login', templateUrl: 'login.html', controller: 'loginController' });}]);//service to be used by other controllersapp.factory('posts', [function() { var o = { posts: [] }; return o;}]);//the controller for the login routerapp.controller('loginController', ['$scope', function($scope) {}]);//the controller for the post controllerapp.controller('postController', ['$scope', '$stateParams', 'posts', function($scope, $stateParams, posts) {}]);//main controllerapp.controller('mainController', ['$scope', 'posts', function($scope, posts) {}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script><script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script><body ng-app="secret"><!--Injected View in here--><div ui-view> </div><script type="text/ng-template" id="init.html"><div id="mainBar"><div id="mainBarWrapper"><div><ul id="navBar"><li><a ui-sref="login">Login</a></li><li>Sort<ul class="subMenu"><li>thing1</li><li>thing2</li><li>thing3</li></ul></li><li>Schools<ul class="subMenu"><li>thing1</li><li>thing2</li><li>thing3</li><li>thing4</li></ul></li></ul></div></div></div></script><script type="text/ng-template" id="login.html"><h1>Login page</h1></script></body>PS: I'd recommend you to use latest AngularJS and UI-Router versions.
EDIT 1:
All paths are relative to the place you load them, in this case, index.html. So that's your base path. As I can't have files in here, what I did in the code snippet was to add the template between <script> tags. You can see them below the ui-viewdirective. Those are 2 templates.
You should always maintain your views separated in templates files, that way everything has order and makes easier bugfixes and maintainence.
Usually inside templates folder:
|--index.html|--templates/ |--- init.html |--- login.htmlThen you change the templateUrl to: templates/init.html and templates/login.html to the other state.