Click here to Skip to main content
15,915,742 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i don't know why angular routing didn't work with me. I revised the code 10 times and I couldn't find the solution. My index page is like
HTML
<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <script src="scripts/jquery-1.9.0.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/angular.js"></script>
    <script src="scripts/angular-route.js"></script>
    <script src="demo.js"></script>
</head>
<body>
    <div class="container">
        <nav style="background-color:darkslateblue" role="navigation" class="nav navbar-inverse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home">home</a></li>
                <li><a href="#add">add</a></li>
                <li><a href="#edit">edit</a></li>
                <li><a href="#delete">delete</a></li>
            </ul>
        </nav>

      <ng-view>

      </ng-view>

        <h3 style="font-size:small" class="text-center text-info">developed by Mr-Mohammed Elwany</h3>
    </div>
</body>
</html>

and my javascript page is
JavaScript
/// <reference path="C:\Users\elwany\documents\visual studio 2015\Projects\spaapplication\spaapplication\scripts/angular.js" />

var myApp = angular.module("myApp", ['ngRoute']);
myApp.config(['$routeProvider',
    function ($routeProvider) {
        $routeProvider.
        when('/add', {
            templateUrl: 'Views/add.html',
            controller:'addController'
        }).
        when('/edit', {
            templateUrl: 'Views/edit.html',
            controller: 'editController'
        }).
        when('/delete', {
            templeteUrl: 'Views/delete.html',
            controller: 'deleteController'
        }).
        when('/home', {
            templateUrl: 'Views/home.html',
            controller: 'homeController'
        }).
        otherwise({ redirectTo: '/home' });
    }]);

myApp.controller("addController",function ($scope) {
    $scope.message = "in Add view Controller";
});
myApp.controller("editController",function ($scope) {
    $scope.message = "in edit view Controller";
});
myApp.controller("deleteController",function ($scope) {
    $scope.message = "in delete view Controller";
});
myApp.controller("homeController",function ($scope) {
    $scope.message = "in home view Controller";
});


C#
I have 4 html pages in "Views" folder their name is "add","edit","delete","home" and they have the same content.


HTML
<div class="row jumbotron">
    <h2>{{message}}</h2>
</div>

note that i downloaded angular from nugets manager and i use asp.net

What I have tried:

the angular routing code not work i didn't have any syntax error but i wish like to know why it doesn't work
Posted
Updated 12-Sep-16 23:39pm
Comments
OkuDoku 13-Sep-16 5:00am    
The only thing i can see in your routing code is the typo in the delete route, where you spelled templeteUrl. But that should not affect the other routes.
Are there any error messages or is it simply not showing anything?

[edit] Are you sure you have all the paths set up right? If you work with the default folders it maybe Scripts with a capital S for your scripts.
Mohammed Elwany 13-Sep-16 5:17am    
no error message in the project and all the path is true
but i cant understand [ If you work with the default folders it maybe Scripts with a capital S for your scripts.]
can u explain ??@OkuDoku
OkuDoku 13-Sep-16 5:23am    
When I have a new asp.net project, nuget installs the scripts to a folder calles Scripts. So on the html page i would have to pack
<script src="Scripts/angular.js"></script>
instead of
<script src="scripts/angular.js"></script>

on teh other hand i'm not even sure if it's case sensitive
[edit] just checked it, that's not the problem
Mohammed Elwany 13-Sep-16 6:15am    
@OkuDoku Thanks alot To you Its Worked just when i change tempeleteUrl to templateUrl in delete view
Thanks Alot my friend

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900