CODEWITHSUNDEEP
javascriptasp.net-mvcangularjs
wootscootinboogie
wootscootinboogie

Reputation: 8705

Rendering Angular JS partials views with ASP.NET Development Server

I'm currently trying to use Visual Studio 2010 to learn some Angular JS and I'm having a problem rendering partials views. I have a shell page index.html and a table which contains some person data inside /partials/list.html. When a user clicks on a button located in the table in list.html they should be taken to another partial view edit.html. When I run the project the I get this as the url in the browser: http://localhost:62807/index.html#/ and the partial view list.html is injected where it needs to be. Here's what those two things look like:

index.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>Angular JS Routing</title>
        <link rel="stylesheet"
              href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"/>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"
              rel="stylesheet">
    </head>
    <body>
    <div ng-app="enterprise" ng-controller="AppController">
        <a href="#"><h2>Enterprise Crew</h2></a>
        <ng-view></ng-view>
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    </body>
    </html>

here's the partial view injected into the ng-view tag from index.html

<table class="table table-striped" style="width: 250px">
    <thead>
    <tr>
        <td>Name</td>
        <td>Description</td>
        <td> <a href="/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

        </td>
    </tr>
    </thead>
    <tbody>
    <tr ng-repeat="person in crew">
        <td>{{person.name}}</td>
        <td>{{person.description}}</td>
        <td><i class="glyphicon glyphicon-edit"></i></td>
    </tr>
    </tbody>
</table>

Here's what it looks like when it's rendered: enter image description here

When the user clicks the plus sign they need to be taken to another partial view edit.html, this is in the same partials folder as list.html. It's HTML looks like

edit.html

<form action="">
    <input ng-model="person.name"/>
    <input ng-model="person.description"/>
    <button ng-click="save()" class="btn-primary">Save</button>
    save function not yet implemented
</form>

When I'm at the URL in my browser http://localhost:62807/index.html#/ everything loads up fine and the list.html partial view is injected where it needs to be. When I hover my mouse over the plus button I get a URL preview of localhost:62807/new. When clicked this should inject the edit.html partial view, but instead I get a 404 error.

Here's the JS.

angular.module('enterprise',['ngRoute'])
    .config(function($routeProvider){
        $routeProvider
            .when("/",{templateUrl:"partials/list.html"})
            .when("/new",{templateUrl:"/partials/edit.html"})
    })
//this is the that iterated over in the partial views ng-repeat
function AppController($scope){
    $scope.crew =[
        {name:'Picard',description:'captain'},
        {name: 'Riker',description:'number 1'},
        {name:'Word',description:'Security'}
    ]
}

The problem is somewhere in the routing, I believe. In video tutorials I have followed I notice that the URLs that I get when I run the application include either the project name or the page name in them (in this case index.html is included in the URL). I'm curious why the list.html view gets injected correctly in the first place, and whenever I try to navigate to /new the edit.html partial view isn't correctly injected. I'm playing around with this all locally, so I would like to first of all get it working and then understand what the deal is and why the list.html partial view will render and edit.html doesn't.

Upvotes: 2

Views: 383

Answers (1)

Chandermani
Chandermani

Reputation: 42669

I believe the url should be

<a href="#/new"><i class="glyphicon glyphicon-plus-sign"></i></a>

Upvotes: 3

Related Questions