I am new to using Angular JS and I am trying to create routers for my app using ui.router.
This is my index.html page where I am injecting other views into it through the div.
<!DOCTYPE html><html lang="en"><head><title>omg</title><link rel="stylesheet" type="text/css" href="stylesheets/style.css"/><link rel="icon" type="" href=""/><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><script type="text/javascript" src="javascripts/index.js"></script><script type="text/javascript" src="javascripts/login.js"></script><script type="text/javascript" src="javascripts/signup.js"></script></head><body ng-app="secret"><div id="mainBar"><div id="mainBarWrapper"><div id="siteLogo"><img src="images/mimiLogo.png" alt="mimi"/></div><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><!--Injected View in here--><div ui-view> </div></body>This is my index.js file and I've included all the routers here:
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('/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'});});//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){}]);My index.html and login.html contains some simple html content.Image may be NSFW.
Clik here to view.
I am just trying to get the router to work, but for some reason using the sref tag makes me link unclickable. If I use href tag instead and do href="#/login", it gives me a 404 not found error even though I have implemented the .otherwise method. Can anyone tell whats wrong?
