can't create <a> in angular

Question

Hi,

I've finished the angularJS course and now I'm trying to create my portfolio site in angular just for practice. I got a problem when create the portfolio page cause I can't make my <li> elements into links for my projects, no matter what I do.

I've tried: <a href=""> <a ng-href=""> <li ng-href=""> And much much more..

When I inspect the page there is no sign of any links.

index.html:

<!DOCTYPE html>

<html>

<head>
    <title>Home</title>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/main.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
</head>


<body ng-app="portfolioApp">

    <div class="wrapper">

        <navbar></navbar>
        <ng-view></ng-view>

    </div>

    <footers></footers>

    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/directives/navbar.js" type="text/javascript"></script>
    <script src="js/directives/footers.js" type="text/javascript"></script>

</body>

</html>

portfolio.html (template):

<div class="portfolio">
    <h2>My projects</h2>
    <ul>
        <li class="project"><img src="img/random_quote.png">
            <h4 class="project-name">RandomQuote</h4></li>
        <li class="project"><img src="img/weather.png">
            <h4 class="project-name">Weather-App</h4></li>
        <li class="project"><img src="img/wikipedia.png">
            <h4 class="project-name">WikipediaViewer</h4></li>
        <li class="project"><img src="img/rps.png">
            <h4 class="project-name">Rock, Paper, Scissors</h4></li>
    </ul>
</div>

**app.js + routes:

var app = angular.module("portfolioApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {

    $routeProvider.when("/", {

        templateUrl: "templates/introduction.html"

    }).when("/portfolio", {

        templateUrl: "templates/portfolio.html"

    }).when("/about", {

        templateUrl: "templates/about.html"

    }).otherwise({

        redirectTo: "/"

    });

    $locationProvider.html5Mode(true);

});

I really hope someone got an idea how to fix this cause I'm losing it really soon :-P

Btw, I'm not added any controllers for now but I don't think that's why I can't get the links working / showing up..

Welcome to the Treehouse Community

Looking to learn something new?

Henrik Christensen

Henrik Christensen

can't create <a> in angular

Henrik Christensen

Henrik Christensen