Новичок в Angular. Что не так?

ProgramBox

Новичок в Angular. Что не так?

Post author:admin
Запись опубликована:30 сентября, 2022
Post category:Вопросы по программированию

#javascript #angularjs

Вопрос:

Я следую руководству на Youtube…Я считаю, что я все сделал правильно, но он отказывается работать … На видео @ youtube это работает как заклинание, но я не могу заставить его работать локально. Есть какие-нибудь подсказки? На экране нет ошибки или даже результата. Это просто пустая страница.

в моем controller.js …

 var demoApp = angular.module('demoApp',[]);
//Routes
demoApp.config(function ($routeProvider){
$routeProvider
    .when('/view1',
    {
        controller : 'SimpleController',
        templateUrl : 'view1.html'
    })
    .otherWise('/',
    {
        redirectTo : '/view1'
    });
});

//Controllers
demoApp.controller('SimpleController' , function ($scope) {
    $scope.familyArray = [
    { name : 'Me ', city : 'London'},
    {name : 'Wife', city : 'St. Matheus'},
    {name : 'Son', city : 'Ipswich'}
];
});

в моем index.html . Я…

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="demoApp">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>My Title</title>
</head>
<body>
<div>
    <div data-ng-view="">

    </div>
</div>
    <script src="./css_and_js/angular.min.js"></script>
    <script src="./css_and_js/controller.js"></script>
</body>

.. И, наконец, это мой view1.html …

 <div class="container">
Name:<br>
<input type="text" data-ng-model=filter."nameInput"><br><br>
Hello, {{name}}
<ul>
    <li data-ng-repeat="data in familyArray | filter : filter.nameInput | orderBy: 'city'">{{data.name}} - {{data.city | lowercase}}</li>
</ul>
Add Name : <br>
<input type="text" data-ng-model="new.name">
<br>
</ul>
Add City : <br>
<input type="text" data-ng-model="new.city">
<br>
<a href="#/view2">View 2</a>

Кроме того, я понятия не имею, как его отлаживать … на моей консоли Chrome это просто show: неперехваченный объект
в angular.min.js:6

Обновить…После получения некоторых предложений по изменению моего кода…На самом деле я сталкиваюсь с результатом пустой страницы без сообщения об ошибке на консоли. Позвольте мне обновить код:

controller.js: var demoApp = angular.module('demoApp',['ngRoute']); //Routes demoApp.config(function ($routeProvider){ $routeProvider .when('/view1', { controller : 'SimpleController', templateUrl : 'view1.html' }) .otherwise('/', { redirectTo : '/view1' }); }); //Controllers demoApp.controller('SimpleController' , function ($scope) { $scope.familyArray = [ { name : 'Marco Jr', city : 'London'}, {name : 'Rosana Valkovics', city : 'São Matheus'}, {name : 'Fernando Valkovics', city : 'Ipswich'} ]; });

мой view1.html:

 `<div class="container">
Name:<br>
<input type="text" data-ng-model="filter.nameInput"><br><br>
Hello, {{name}}
<ul>
    <li data-ng-repeat="data in familyArray | filter : filter.nameInput | orderBy: 'city'">{{data.name}} - {{data.city | lowercase}}</li>
</ul>
Add Name : <br>
<input type="text" data-ng-model="new.name">
<br>
</ul>
Add City : <br>
<input type="text" data-ng-model="new.city">
<br>
<a href="#/view2">View 2</a>
</div>`

Мой index.html : Никаких изменений.

На самом деле исключений нет, но я все еще сталкиваюсь с пустой страницей:(

Ответ №1:

Angular работает с HTML5. У вас неправильный doctype. Вам нужно:

 <!doctype html>

Кроме того, удалите xmlns="http://www.w3.org/1999/xhtml" свой html-тег.

Что касается отладки, вы никогда не должны использовать уменьшенную версию чего-либо для отладки.

Ответ №2:

Я считаю, что проблема в вашем view1.html , строка 3. Кавычки находятся в неправильном положении в data-ng-model, поскольку они должны окружать все «filter.nameInput».

1. Это действительно ошибка! TYVM!!! Однако я все еще сталкиваюсь с теми же результатами: (Рано или поздно я верю, что смогу все решить с вашей помощью и помощью других ребят! тю!

Ответ №3:

Если ваше видео старое, и вы используете новую версию Angular.js у вас , вероятно , их нет $routeProvider . В какой-то момент команда angular $routeProvider вырвалась из основного angular.js файла и поместила его в отдельный модуль под названием ngRoute .

Вам нужно изменить определение вашего модуля следующим образом:

 var demoApp = angular.module('demoApp',[ngRoute]);

И вам нужно включить angular-route.js тег script.

 <script src="./css_and_js/angular-route.js">

Вот некоторая дополнительная информация о ngRoute

Ответ №4:

В вашем коде есть несколько ошибок и неверных предположений.

Новые версии angular требуют, чтобы ngRoute был объявлен как зависимость.

Зависимости:

вы должны добавить его в свой index.html например:

 <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.js"></script>

и объявите зависимость в модуле:

 var demoApp = angular.module('demoApp',['ngRoute']);

Он все равно не будет работать, потому что у вас синтаксическая ошибка

 .otherWise('/',

должно быть

 .otherwise('/',
{
    redirectTo : '/view1'
});

Вы можете увидеть это вживую здесь

1. Привет, Тай!!! Исключений больше нет.. Однако он по-прежнему показывает черную страницу:( даже в скрипке результата нет:( Но я все равно это ценю 🙂

2. Скрипка не имеет index.html … пожалуйста, будьте конкретны. Что такое «проблема»? Можете ли вы использовать «hello world» в partials вместо сложного синтаксиса angular?

3. как я уже говорил .. проблема в пустом экране. Простой пустой экран — никаких следов чего-либо, касающегося view1.

Метки: Новичок в Angular. Что не так?