Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: Angular 2, AngularJS
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг 4.94/18: Рейтинг темы: голосов - 18, средняя оценка - 4.94
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
1

RouteProvider не работает

04.01.2015, 19:36. Просмотров 3354. Ответов 25
Метки нет (Все метки)

Добрый день
Помогите пожалуйста разобраться с Routing
Работаю в Visual Studio . MVC - приложения
Есть вьюха Index. Там простенький код
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html >
<head>
    <title>Example</title>        
    <script src="~/Scripts/angular.js"></script>    
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/Scripts/angular-route.js"></script>  
    <script src="~/Scripts/angular-route.min.js"></script>
    <script type="text/javascript">
       
               var app = angular.module("demo", []);
 
        app.config(function ($routeProvider) {
            $routeProvider.when("/",
              {
                  templateUrl: "app.html",
                  controller: "demoCtrl"
              }
            )
            .otherwise({
                templateUrl: "app.html",
                controller: "demoCtrl"
            });
        });
 
        app.controller("demoCtrl", function ($scope) {
            $scope.name= "This is my app!!!";
              
            
        });
      
    </script>
</head>
<body>
   
    <div ng-app="demo" ng-controller="demoCtrl">
        <ng-view></ng-view>
    </div>
    
</body>
</html>
Есть еще файл app.html Там код
HTML5
1
2
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
И не работает. В чем дело не могу понять. Делала все в соответствии с сайтом https://thinkster.io/egghead/ng-view/
Спасибо

Добавлено через 13 минут
Проект прикрепила
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
04.01.2015, 19:36
Ответы с готовыми решениями:

$routeProvider и два ng-view
Как реализовать чтобы при нажатии на ссылку вызывалось два шаблона и...

RouteProvider, не устанавливается шаблон страницы
Использую ASP.NET MVC. Когда прописываю путь с указанием имени действия шаблон...

Использование контроллера и $routeProvider одновременно
Помогите, пожалуйста, решить следующую интересную проблему: index.html состоит...

Мышь работает через раз, то есть запустил ОС - мышь не работает, перезагрузил - мышь работает
Установлена Windows 7 со всеми последними обновлениями. Все всегда замечательно...

SelText в textBox'e отчёта не работает или работает не так как в форме?
Пробовал всяко-разно выудить выделенный текст - не выходит. Пишет: &quot;Введенное...

25
vovandr
631 / 519 / 194
Регистрация: 19.08.2013
Сообщений: 1,400
04.01.2015, 20:47 2
Забыли поставить в зависимость ngRoute:
Javascript
1
var app = angular.module("demo", ["ngRoute"]);
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
05.01.2015, 11:38  [ТС] 3
Спасибо. Это я описалась. В Коде стоит эта строка. И все равно не работает.
Вот код
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html >
<head>
    <title>Example</title>        
    <script src="~/Scripts/angular.js"></script>    
    <script src="~/Scripts/angular.min.js"></script> 
    <script src="~/Scripts/angular-route.js"></script>  
    <script src="~/Scripts/angular-route.min.js"></script>
    <script type="text/javascript">
       
        var demo = angular.module("demo", ["ngRoute"]);
 
        demo.config(function ($routeProvider) {
            $routeProvider.when("/",
              {
                  templateUrl: "app.html",
                  controller: "demoCtrl"
              }
            )
            .otherwise({
                templateUrl: "app.html",
                controller: "demoCtrl"
            });
        });
 
        demo.controller("demoCtrl", function ($scope) {
            $scope.model = {
                message: "This is my app!!!"
            }
            
        });
      
    </script>
</head>
<body>
   
    <div ng-app="demo" >
        <ng-view></ng-view>
    </div>
    
</body>
</html>
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
05.01.2015, 14:09 4
Путь к шаблону проверь. И вообще, какая ошибка?
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
05.01.2015, 15:42  [ТС] 5
Нет ошибки на экране. Просто на выходе пустой экран. Не происходит routing.
Скорее всего ошибка да в пути . Вот здесь templateUrl: "app.html",
Уже всяко попыталась не переходит он в эту страницу. Файл app.html прям в корне проекта.
0
whiteapps
408 / 373 / 220
Регистрация: 18.07.2014
Сообщений: 1,258
05.01.2015, 19:31 6
HelloWord, попробуйте так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html ng-app="demo">
<head>
    <title>Example</title>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/angular-route.min.js"></script>
    <script type="text/javascript">
       
       var app = angular.module("demo",["ngRoute"]);
 
        app.config(function ($routeProvider) {
            $routeProvider.when("/",
              {
                  templateUrl: "app.html",
                  controller: "demoCtrl"
              }
            )
            .otherwise({
                templateUrl: "app.html",
                controller: "demoCtrl"
            });
        });
 
        app.controller("demoCtrl", function ($scope) {
            $scope.name= "This is my app!!!";            
        });
      
    </script>
</head>
<body>
   
    <div ng-view>
    </div>
    
</body>
</html>
app.html
HTML5
1
2
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{name}}</h1>
так же вам нужно открыть консоль браузера(F12) и посмотреть какие у вас выводятся ошибки
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
05.01.2015, 23:29 7
Цитата Сообщение от HelloWord Посмотреть сообщение
Нет ошибки на экране.
Не на экране, а в консоли.

Цитата Сообщение от HelloWord Посмотреть сообщение
Файл app.html прям в корне проекта.
Но путь у тебя относительный.
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
06.01.2015, 13:57  [ТС] 8
Спасибо.Попробовала код который написан выше. Опять пустой экран. Посмотрела ошибки,нажала F12. Там ошибки такие(ниже).
Сделала проект не mvc. Обычный web проект . Там все работает у меня.
Все же хочется чтобы работала все в mvc проекте.

Uncaught TypeError: undefined is not a function
angular.min.js:60 Error: Unknown provider: $templateRequestProvider <- $templateRequest <- $route <- ngViewDirective
at Error (native)
at http://localhost:62623/Scripts/angular.min.js:28:350
at Object.c [as get] (http://localhost:62623/Scripts/angular.min.js:26:104)
at http://localhost:62623/Scripts/angular.min.js:28:431
at c (http://localhost:62623/Scripts/angular.min.js:26:104)
at Object.d [as invoke] (http://localhost:62623/Scripts/angular.min.js:26:238)
at http://localhost:62623/Scripts/angular.min.js:28:449
at c (http://localhost:62623/Scripts/angular.min.js:26:104)
at Object.d [as invoke] (http://localhost:62623/Scripts/angular.min.js:26:238)
at http://localhost:62623/Scripts/angular.min.js:36:187

Добавлено через 13 минут
Теперь вот такие ошибки
Похоже не берет библиотеки angular-route.min.js angular.js
я сделала когда создавала проект PM> Install-Package angularjs
Uncaught TypeError: Cannot read property 'module' of undefined
angular.js:1058 Uncaught Error: No module: ngRoute
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
06.01.2015, 15:25 9
Зачем ты одновременно подключаешь и обычные скрипты, и минимизированные?
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
06.01.2015, 16:17  [ТС] 10
Спасибо.
Я думала что и те и те нужно. думала это разные библиотеки. Убрала подключения. Все равно не работает. Ошибки
Uncaught TypeError: Cannot read property 'module' of undefined
angular-route.min.js:7 Uncaught TypeError: Cannot read property 'module' of undefined

Добавлено через 30 минут
Что-то с путем . Не правильно прописан. Уж всяко пробовала. Не проходит. Хотя она заходит в этот код.alert срабатывает. Путь уже по всякому писала. Не получается в проекте mvc. Но в обычном проекте все прошло хорошо.

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
 $routeProvider
        .when('/', {           
            templateUrl: '~/Views/Home/views/home.html',
            controller: 'homeController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'aboutController'
        })
        .otherwise({
            templateUrl: '~/Views/Home/views/home.html',
            controller: 'homeController'
        });
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
06.01.2015, 16:24 11
Цитата Сообщение от HelloWord Посмотреть сообщение
Uncaught TypeError: Cannot read property 'module' of undefined
Очень похоже, что у тебя angular undefined. В правильном порядке скрипты подключаются? И безо всяких фокусов с отложенным исполнением? И ошибки загрузки файла нет?

Добавлено через 1 минуту
Цитата Сообщение от HelloWord Посмотреть сообщение
templateUrl: '~/Views/Home/views/home.html',
Это бред. В js-файлах подстановка не происходит. Кстати, а происходит ли в том, где ты подключаешь скрипты?

Добавлено через 48 секунд
Как выглядит получившийся код страницы в браузере? Куда шлётся запрос на скрипты?
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
06.01.2015, 18:24  [ТС] 12
Да уж всяко пробовала написать templateUrl.
Не знаю как там нужно правильно писать.
Вот все же что-то получилось.Это работает в MVC. Но есть недостаток. Там либо я нахожусь на главной странице Index либо иначе. Хочется чтобы при нажатии на несколько ссылок , я попадала в несколько окон(форм html). а здесь только две. Плохой вариант что только 2 формы. Не знаю как там путь прописывать если несколько форм.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp">
<head>
    <title>Sample AngularJS project using Visual Studio</title>      
    @*<script src="~/Views/Home/app.js"></script>*@    
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    @*<script src="~/Scripts/angular-route.min.js"></script>*@
    @*<script src="~/Scripts/angular.min.js"></script>*@
    @*<script src="~/Views/Home/controllers/aboutController.js"></script>
    <script src="~/Views/Home/controllers/homeController.js"></script>*@
    <script type="text/javascript">
    var app = angular.module('myApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {       
        $routeProvider
        .when('/', {           
            templateUrl: 'Index.html',
            template:"Hello Hello",
            controller: 'homeController'
        })
        
        .otherwise({
             templateUrl: "About.cshtml",
        template: "About Control",
        controller: 'homeController'
        });
                
    }])
    .controller('aboutController', function ($scope) {
        $scope.message = "Now viewing about!";
        alert("fsdfd");
    })
    .controller('homeController', function ($scope) {
        $scope.message = "Now viewing home!";
        
    })
    .controller('mainController', function ($scope, $route) {
       // alert( $route.current.$route);
        $scope.message = "Main Content";
       
    });;
    </script>
    </head>
    <body>
        <div>
            <a href="#/">Home</a>
            <a href="#/about">About</a>
        </div>
 
        <div ng-controller="mainController">
            <h1>{{message}}</h1>
            <ng-view />
        </div>
    </body>
</html>
Добавлено через 15 минут
Получилось. Но тоже есть минус.'About.cshtml' использует тот же controller что и Index.cshtml
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var app = angular.module('myApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {       
        $routeProvider
        .when('/', {
            templateUrl: 'Index.html',
            template: "Hello Hello",
            controller: 'homeController'
        })
       .when('/about', {
           templateUrl: 'About.cshtml',
           template: "Abbout Abbout",
           controller: 'homeController'
       })
        .otherwise({
             templateUrl: "About.cshtml",
             template: "About Control",
        controller: 'homeController'
        });
                
    }])
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
07.01.2015, 00:18 13
Да не в пути у тебя проблемы, а в подключении скриптов. Твой mvc-style url никто не разворачивает в нормальный, похоже.
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
08.01.2015, 14:10  [ТС] 14
Спасибо. Да мне кажется скрипты не подключаются совсем. angular.js - подключен . А вот angular-rote.js не подключен.
Не выполняется html файлы.
<div ng-controller="homeController">
<h1>{{message1}}</h1>
</div>
Да что ж такое с этим mvc проектом. В обычном web проекте все давно работает
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
08.01.2015, 14:41 15
Цитата Сообщение от HelloWord Посмотреть сообщение
<script src="~/Scripts/angular.js"></script>
Да перепиши ты эти подключения скриптов наконец...
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
08.01.2015, 15:08  [ТС] 16
Спасибо.
Но если я переписываю подключения то не срабатывает alert("xdgdfg");
Он срабатывает только если подключения как выше писала
HTML5
1
2
<script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
Только при таком подключении alert срабатывает. Но на экране нет содержимого Index1.html About.cshtml
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
        var app = angular.module('myApp', ['ngRoute'])
    .config(['$routeProvider', function ($routeProvider) {
        alert("xdgdfg");
        $routeProvider
        .when('/', {
            templateUrl: 'Index1.html',
          //  template: "Hello Hello",
            controller: 'homeController'
        })
       .when('/about', {
           templateUrl: 'About.cshtml',
        //  template: "Abbout Abbout",
           controller: 'homeController'
       })
        .otherwise({
            templateUrl: "Index1.html",
             //template: "About Control",
        controller: 'homeController'
        });
                
    }])
Index1.html About.cshtml - это
HTML5
1
2
3
<div >   
    <h1>{{message1}}</h1>
</div>
Добавлено через 5 минут
Попробовала вот так подключить
HTML5
1
2
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
Результат опять Index1.html About.cshtml не работает
0
Padimanskas
Superposition
937 / 604 / 256
Регистрация: 27.10.2013
Сообщений: 2,074
08.01.2015, 16:44 17
HelloWord, Все скрипты в angular нужно писать(и подключать кроме самогофреймворка) после определения dom(обычно после тега body).
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
08.01.2015, 17:06 18
Padimanskas, нет.
HelloWord, выложи наконец архив со всем проектом.
0
HelloWord
4 / 4 / 4
Регистрация: 15.04.2009
Сообщений: 348
08.01.2015, 17:32  [ТС] 19
Поставила все после тега <body> Ничего не помогает. Результат тот же.
Не работает Index1.html
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Sample AngularJS project using Visual Studio</title>      
    </head>
<body ng-app="myApp" ng-controller="mainController" >
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
    <script src="~/Views/Home/controllers/aboutController.js"></script>
    <script src="~/Views/Home/controllers/homeController.js"></script>
    <script type="text/javascript">
    var app = angular.module('myApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    alert("xdgdfg");
    $routeProvider
    .when('/', {
        templateUrl: 'Index1.html',
        //  template: "Hello Hello",
        controller: 'homeController'
    })
   .when('/about', {
       templateUrl: 'About.cshtml',
       //  template: "Abbout Abbout",
       controller: 'homeController'
   })
    .otherwise({
        templateUrl: "Index1.html",
        //template: "About Control",
        controller: 'homeController'
    });
 
}])
//.controller('aboutController', function ($scope) {
//    $scope.message = "Now viewing about!";
//    alert("fsdfd");
//})
//.controller('homeController', function ($scope) {
//    $scope.message1 = "Now viewing home!";
 
//})
.controller('mainController', function ($scope, $route) {
 
 
    $scope.message = "Main Content";
    //  $scope.message1 = "Main Content home";
 
});;
    </script>
 
    <div>
        <a href="#/">Home</a>
        <a href="#/about">About</a>
    </div>
 
    <div>
        <h1>{{message}}</h1>
        <div ng-view>
        </div>
    </div>
   
</body>
</html>
0
Qwertiy
823 / 631 / 100
Регистрация: 20.08.2013
Сообщений: 2,524
08.01.2015, 17:41 20
Цитата Сообщение от HelloWord Посмотреть сообщение
Поставила все после тега <body> Ничего не помогает. Результат тот же.
Естественно.
0
08.01.2015, 17:41
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
08.01.2015, 17:41

Так работает или не работает второй слот для оперативной памяти
Моему компьютеру уже больше 7-ми лет, купили мне его в сентября 2005 года. На...

Через sublime text 3 и компилятор g++ работает, посоветовали скачать VS, не работает. Миниатюры
через sublime text 3 и компилятор g++ работает, посоветовали скачать VS, не...

Swf не работает, а в тестовом режиме в самом flash и формате exe работает
Доброго времени суток. Такая проблема: есть рабочий код обмена данными с php...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru