单页应用程序在路由后停止工作

Question

我是 AngularJS 的新手，正在尝试制作一个简单的单页应用程序。一切正常，但后来我用 $stateProvider 添加了状态，当我单击已分配功能的按钮时，没有任何事情发生，就像控制器出现问题一样。如果你能帮助我，我将不胜感激。代码可能很长，但我不能靠自己走得更远。这是代码：

index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="favicon.ico">
    <link href="node_modules/angular-material/angular-material.min.css" rel="stylesheet" />
    <link href="node_modules/angular-material/angular-material.css" rel="stylesheet" />
    <link href="node_modules/mdi/css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="styles/customMaterial.css" rel="stylesheet" />
</head>
<body ng-app="ngClassifieds">

   <ui-view></ui-view>

    <script src="node_modules/angular/angular.min.js"></script>
    <script src="node_modules/angular-material/angular-material.min.js"></script>
    <script src="node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="node_modules/angular-animate/angular-animate.min.js"></script>    
    <script src="node_modules/angular-ui-router/release/angular-ui-router.min.js"></script>
    <script src="scripts/app.js"></script>
    <script src="classifiedsCtrl.js"></script>
    <script src="components/classifieds/classifieds.fac.js"></script>
    <script src="components/classifieds/new/newClassified.ctr.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
</body>
</html>

classifieds.tpl.html

<md-toolbar>
    <div class="md-toolbar-tools">
        <p>Pixo</p>
        <md-button ng-click="vm.openSidenav()">
            <md-icon class="mdi mdi-plus-circle"></md-icon>
            Add new
        </md-button>
        <md-button ng-click="filtering = !filtering">
            <md-icon class="mdi mdi-magnify"></md-icon>
            Filter
        </md-button>
    </div>
</md-toolbar>

<ui-view></ui-view>

<div class="filters" layout="row" layout-align="center center" ng-show="filtering">
    <md-input-container style="margin-top:43px">
        <label>Enter search term</label>
        <input type="text" ng-model="filter" />
    </md-input-container>

    <md-input-container>
        <label>Category</label>
        <md-select ng-model="category" placeholder="Select a category">
            <md-option ng-repeat="category in vm.categories" value="{{category}}" ng-bind="category"></md-option>
        </md-select>
    </md-input-container>

    <md-input-container>
        <md-button class="md-warn" ng-click="category='';filter=''">
            Clear <md-icon class="mdi mdi-backspace"></md-icon>
        </md-button>
    </md-input-container>

</div>



<md-content class="md-padding" layout="row" layout-wrap>
    <md-card flex="30" ng-repeat="classified in vm.classifieds | filter:filter
                 |filter: category" class="classified">
        <img ng-src="{{classified.img}}" alt="phone" style="height:300px !important" />

        <md-card-content>
            <div class="classified-info" ng-show="!showContact">
                <h2 class="md-title" ng-bind="classified.title"></h2>
                <h3 ng-bind="classified.price | currency:'€'"></h3>
                <p ng-bind="classified.description">
                </p>
            </div>
            <div class="classified-contact" ng-show="showContact">
                <p><md-icon class="mdi mdi-account"></md-icon><span ng-bind="classified.contact.name"></span></p>
                <p><md-icon class="mdi mdi-phone"></md-icon><span ng-bind="classified.contact.phone"></span></p>
                <p><md-icon class="mdi mdi-email"></md-icon><span ng-bind="classified.contact.email"></span></p>
            </div>
            <div layout="row">
                <md-button ng-click="showContact = true" ng-show="!showContact">Contact</md-button>
                <md-button ng-click="showContact = false" ng-show="showContact">Details</md-button>
                <md-button ng-click="showAdmin = true" ng-show="!showAdmin">Admin</md-button>
                <md-button ng-click="showAdmin = false" ng-show="showAdmin">Cancel</md-button>
            </div>
            <div class="row" ng-show="showAdmin">
                <md-button class="md-primary" ng-click="vm.editClassified(classified)">EDIT</md-button>
                <md-button class="md-warn" ng-click="vm.deleteClassified($event,classified)">DELETE</md-button>
            </div>
        </md-card-content>
    </md-card>
</md-content>

newClassified.tpl.html

<md-sidenav md-component-id='left' class="md-sidenav-left">
    <md-toolbar>
        <h2 class="md-toolbar-tools">Add new</h2>
    </md-toolbar>
    <md-content class="md-padding">
        <form>
            <md-input-container>
                <label for="title">Title</label>
                <input type="text" autofocus ng-model="classified.title" />
            </md-input-container>
            <md-input-container>
                <label for="price">Price</label>
                <input type="text" ng-model="classified.price" />
            </md-input-container>
            <md-input-container>
                <label for="description">Description</label>
                <textarea ng-model="classified.description"></textarea>
            </md-input-container>
            <md-input-container>
                <label for="image">Image link</label>
                <input type="text" ng-model="classified.image" />
            </md-input-container>
            <md-button class="md-primary" ng-click="vm.saveClassified(classified)" ng-if="!vm.editing">SAVE</md-button>
            <md-button class="md-primary" ng-if="vm.editing" ng-click="vm.saveEdit()">SAVE EDIT</md-button>
            <md-button class="md-warn" ng-click="vm.closeSidenav()">CANCEL</md-button>
        </form>
    </md-content>
</md-sidenav>

app.js

angular.module("ngClassifieds", ["ui.router", "ngMaterial"])
.config(function ($mdThemingProvider, $stateProvider) {
    $mdThemingProvider.theme('default')
    .primaryPalette('teal')
    .accentPalette('orange');

    $stateProvider.state("classifieds", {
        url: '/classifieds',
        templateUrl: 'components/classifieds/classifieds.tpl.html',
        controller: 'classifieds as vm'
    })
    .state('classifieds.new', {
        url: '/new',
        templateUrl: 'components/classifieds/new/newClassified.tpl.html',
        controller: 'newClassified as vm'
    });
});

classifiedsCtrl.js

(function () {

angular
    .module("ngClassifieds")
    .controller("classifieds", function ($scope, $http, classifiedsFactory, $mdSidenav, $mdToast, $mdDialog) {

        var vm = this;
        var classifieds;
        vm.openSidenav = openSidenav;
        vm.closeSidenav = closeSidenav;
        vm.saveClassified = saveClassified;
        vm.editClassified = editClassified;
        vm.saveEdit = saveEdit;
        vm.deleteClassified = deleteClassified;

        vm.classifieds;
        vm.categories;
        vm.editing;
        vm.classified;

        classifiedsFactory.classifiedsData().then(function (classifieds) {

            vm.classifieds = classifieds.data;
            vm.categories = getCategories(vm.classifieds);

        });

        function getCategories(classifieds) {
            var categories = [];
            angular.forEach(classifieds, function (classified) {
                angular.forEach(classified.categories, function (category) {
                    categories.push(category);
                });
            });
            return _.uniq(categories);
        }


        function openSidenav() {
            $mdSidenav('left').open();
        }
        function closeSidenav() {
            $mdSidenav("left").close();
        }

        var showSavedToast = function (message) {
            $mdToast.show($mdToast.simple()
                .content(message).position("right", "top").hideDelay(3000));
        }
        var contact = {
            "name": "John Doe",
            "phone": "545 555 655",
            "email": "john.doe@mail.com"
        }
        function saveClassified(classified) {

                classified.contact = contact;
                vm.classifieds.push(classified);
                classified = {};
                closeSidenav();
                showSavedToast("Classified saved");

        }
        function editClassified(classified) {
            vm.editing = true;
            vm.classified = classified;
            openSidenav();
        }
        function saveEdit() {
            vm.editing = false;
            vm.classified = {};
            vm.closeSidenav();
            showSavedToast("Classified edited");
        }
        function deleteClassified(event, classified) {
            var confirm = $mdDialog.confirm()
                            .title("Are you sure you want to delete " + classified.title + "?")
                            .textContent("This item will be deleted permanently")
            .ok('Yes')
            .cancel('No');
            $mdDialog.show(confirm).then(function () {
                var index = vm.classifieds.indexOf(classified);
                vm.classifieds.splice(index, 1);
            }, function () { });
        }
    });})();

newClassified.ctr.js

(function () {
angular.module('ngClassifieds')
    .controller('newClassified', function ($mdSidenav, $mdDialog, classifiedsFactory, $timeout) {

        var vm = this;
        $timeout(function () {

            $mdSidenav('left').open();
        });
    });})();

Answer 1

您需要在 app.js 中添加默认状态

        .state('classifieds',{
            url:'/classifieds',
            templateUrl: 'app/views/partials/mergeTemplate5.html'            
        })
    $urlRouterProvider.otherwise('/classifieds');

如果您要从一种状态重定向到另一种状态，则需要在控制器中添加以下代码

 <a  name="AdvSearch" id="btnAdvSearch" ng-click="GoToNew()" ></a>

 $scope.GotoNew = function() {
            $state.go('classified.new');
        };

单页应用程序在路由后停止工作

Single page app stopped working after routing

uiviewcontroller

angularjs

single-page-application

angular-ui-router

angularjs-material