Хобрук: Ваш путь к мастерству в программировании

как правильно маршрутизировать несколько html-страниц с помощью angular

У меня есть только базовые знания AngularJS. Я создал одно приложение AngularJS с несколькими html-страницами. Это мой основной вид html. Мне очень жаль, что мой вопрос такой длинный. Но это лучший способ задать мой вопрос.

Main.cshtml

    <html ng-app="myapp">
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Main</title>
    <!-- Main CDN Links-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.3.1/css/bootstrap-theme.css">
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- end-->
    <link href="~/Content/Css/sidebar.css" rel="stylesheet" />
    <style>
        * {
            border-radius: 0 !important;
        }
    </style>
</head>
<body>
<div class="nav-side-menu">
 //some code
</div>
<div class="nav-top-menu nav-top">
 //some code
</div>
<div class="contents" id="subContents" ui-view>
 //route my sub views to here
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="~/Scripts/smart-table.debug.js"></script>
<script src="~/Scripts/MainView.js"></script>
</body>
</html>

MainView.js

var myapp = angular.module('myapp', ["ui.router"]);
myapp.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise("/route1")
    $stateProvider
      .state('sideMenuCustomerDivition', {
          templateUrl: "Main/Customer"
      })
      .state('sideMenuDashboardDivition', {
          templateUrl: "Main/Staff"
      })
})

у меня есть маршрут моего другого представления html в main.cshtml. Это html этого представления

Клиент.cshtml

<html>
 <body ng-app="customerTableApp">
  <div ng-controller="safeCtrl">

        <button type="button" ng-click="addRandomItem(row)" class="btn btn-sm btn-success">
            <i class="glyphicon glyphicon-plus">
            </i> Add random item
        </button>

        <table st-table="displayedCollection" st-safe-src="rowCollection" class="table table-striped">
            <thead>
                <tr>
                    <th st-sort="firstName">first name</th>
                    <th st-sort="lastName">last name</th>
                    <th st-sort="birthDate">birth date</th>
                    <th st-sort="balance">balance</th>
                </tr>
                <tr>
                    <th colspan="5"><input st-search="" class="form-control" placeholder="global search ..." type="text" /></th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in displayedCollection">
                    <td>{{row.firstName}}</td>
                    <td>{{row.lastName}}</td>
                    <td>{{row.birthDate}}</td>
                    <td>{{row.balance}}</td>
                    <td>
                        <button type="button" ng-click="removeItem(row)" class="btn btn-sm btn-danger">
                            <i class="glyphicon glyphicon-remove-circle">
                            </i>
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="~/Scripts/CustomerView.js"></script>
 </body>
</html>

CustomerView.js

var app = angular.module('customerTableApp', ['smart-table'])
app.controller('safeCtrl', ['$scope', function ($scope) {

    var firstnames = ['Laurent', 'Blandine', 'Olivier', 'Max'];
    var lastnames = ['Renard', 'Faivre', 'Frere', 'Eponge'];
    var dates = ['1987-05-21', '1987-04-25', '1955-08-27', '1966-06-06'];
    var id = 1;

    function generateRandomItem(id) {

        var firstname = firstnames[Math.floor(Math.random() * 3)];
        var lastname = lastnames[Math.floor(Math.random() * 3)];
        var birthdate = dates[Math.floor(Math.random() * 3)];
        var balance = Math.floor(Math.random() * 2000);

        return {
            id: id,
            firstName: firstname,
            lastName: lastname,
            birthDate: new Date(birthdate),
            balance: balance
        }
    }

    $scope.rowCollection = [];

    for (id; id < 5; id++) {
        $scope.rowCollection.push(generateRandomItem(id));
    }
    $scope.displayedCollection = [].concat($scope.rowCollection);
    $scope.addRandomItem = function addRandomItem() {
        $scope.rowCollection.push(generateRandomItem(id));
        id++;
    };
    $scope.removeItem = function removeItem(row) {
        var index = $scope.rowCollection.indexOf(row);
        if (index !== -1) {
            $scope.rowCollection.splice(index, 1);
        }
    }
}]);

Я знаю, что проблема в том, что ng-приложение перенаправляется в другое ng-приложение. Любой может дать мне лучшее решение для этого. Шаблон уже перенаправлен для просмотра. Моя проблема в том, что я не могу назначать значения во втором представлении. Представление клиента отображается в боковом основном представлении. Но назначенные значения не отображаются. Браузер показывает этот тип ошибки.

Ошибка: [ng:areq] http://errors.angularjs.org/1.3.9/ng/areq?p0=safeCtrl&p1=not%20aNaNunction%2C%20got%20undefined при ошибке (собственный) на https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:6:416 в Qb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:19:417) в sb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:20:1) по адресу https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min..js:76:95 в https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:257 в s (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:7:408) в v (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:57:124) в g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:52:9) по адресу https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js:51:118


  • Если Customer.cshtml должен быть представлением, он не должен быть полным HTML-документом. Удалите теги html и body верхнего уровня, чтобы тег верхнего уровня был div. 21.01.2015

Ответы:


1

Это может вам помочь!!

var app = angular.module('MyApp', ['ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
        .state('index', {
            templateUrl: 'index.html',
            controller: 'IndexCtrl'
          })
        .state('index.test', {
            url: '/',
            templateUrl: 'test.html',
            controller: 'TestCtrl'
          })
        .state('app', {
            templateUrl: 'app.html',
            controller: 'AppController'
          })
        .state('app.test2', {
            url: '/test2',
            templateUrl: 'test2.html',
            controller: 'Test2Controller'
          })
});

И другой пример

$stateProvider
    .state('index', {
        url: '/',
        views: {
          '@' : {
            templateUrl: 'layout.html',
            controller: 'IndexCtrl'
          },
          'top@index' : { templateUrl: 'tpl.top.html',},
          'left@index' : { templateUrl: 'tpl.left.html',},
          'main@index' : { templateUrl: 'tpl.main.html',},
        },
      })
    .state('index.list', {
        url: '/list',
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
    .state('index.list.detail', {
        url: '/:id',
        views: {
          'detail@index' : {
            templateUrl: 'detail.html',
            controller: 'DetailCtrl'
          },
        },
      });
21.01.2015

2

Я не совсем понимаю, о чем ваш вопрос, но

Одна из первых вещей, которые я отмечу, это то, что вы должны передать контроллер из состояния. Вы можете иметь .state('statename', { templateUrl: 'templateName', controller: controllerName });

Кроме того, вы можете указать URL-адрес, который вы хотите связать с маршрутом, используя тег url внутри объекта конфигурации состояния.

.state('sideMenuCustomerDivition', { url: '/route1', templateUrl: 'Main/Customer', controller: 'safeCtrl' });

Теперь, если вы перейдете к маршруту с URL-адресом / route1, шаблон должен быть вставлен в пользовательский интерфейс.

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

    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..

    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..

    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..

    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..

    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..

    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..

    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..