allen allen - 5 months ago 16
AngularJS Question

Need help checking over angular ui-router code

I'm trying to create a portfolio in angular, and can't seem to get the routing correct. I double checked with an app I had made previously, and can't seem to find anything. When I compile, there are no errors logged in the console. Could someone check if my code is properly laid out?

the HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>my portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">

<!-- <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300' rel='stylesheet' type='text/css"> -->
</head>

<body np-app="myPort">
<div id="navigation-bar">
<ul>
<li><a href="#/home">Home</a></li>
<li><a href="#/projects">My Projects</a></li>
<li><a href="#/contact">Contact</a></li>
</ul>
</div>

<div ui-view></div>

<!-- loading angular frameworks -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<!-- app js stuff -->
<script src="app.js"></script>
</body>
</html>


the module

angular.module('myPort', ['ui.router'])

.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'partials/bio/index.html',
})

.state('projects', {
url: '/projects',
templateUrl: 'partials/projects/index.html',
})

.state('contact', {
url: '/contact',
templateUrl: 'partials/contact/index.html',
})

$urlRouterProvider.otherwise('/home');
}]);
//no controllers linked for troubleshooting

Answer

There is a spelling mistake while defining ng-app.

Change <body np-app="myPort>" to <body ng-app="myPort>"