当我开始使用ngroute时,我的应用程序会被破坏

wfveoks0  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(283)

在我开始使用路由和在我的angular文件中使用just controller之前,它工作得非常好,这是我的应用程序,没有ng路由

这些都是配置功能“使用ngroute”

这是主html文件

<!DOCTYPE HTML>
<html ng-app="myApp">
        <!-- Here is Your Website Start-->
<head>
    <link rel="stylesheet" href="css.css">
    <link rel="icon" href="img\icon.png">
    <title>Shopment</title>
    <script src="app/lib/angular.min.js"></script>
    <script src="app/lib/angular-route.js"></script>
    <script src="app/lib/app.js"></script>
</head>

<body>
        <ng-include src="'include/navbar.html'"></ng-include>
        <ng-view></ng-view>
        <!-- Here is Your Website End-->
</body>
<script src="script.js"></script>
</html>

如果我只使用了控制器,它就工作了,当我开始使用配置函数时,它就坏了

//module that define our application 
var myApp = angular.module('myApp',['ngRoute']);

// config that controlles all the application's URLs

myApp.config(function($routeProvider) {
    $routeProvider.when('/stores' , {
        templateUrl:'views/stores.html'
    }).when('home' , {
        templateUrl:'views/home.html'
    }).otherwise({
        redirectTo:'/stores'
    })
});

// Controller that control signIn page
//
// we have to define our dependencies before the function in a single array item then define it again 
// in the function arguments
//
myApp.controller('main',["$scope",function($scope){

    $scope.removeItem = function(man){
        var removeMan = $scope.people.indexOf(man);
        $scope.people.splice(removeMan,1)
    };

    $scope.addMan = function(){
        $scope.people.push({
                'name': $scope.newMan.name,
                'color': $scope.newMan.color,
                'rate': parseInt($scope.newMan.rate),
            });
            $scope.newMan.name="";
            $scope.newMan.color="";
            $scope.newMan.rate="";
    };

    $scope.people = [
        {
            'name':'ali',
            'color':'blue',
            'rate':40
        },
        {
            'name':'ahmed',
            'color':'black',
            'rate':540
        },
        {
            'name':'adhm',
            'color':'red',
            'rate':120
        },
        {
            'name':'kareem',
            'color':'purple',
            'rate':3000
        }
    ]

}])

包含存储视图的文件:

<div class="store">
    <div ng-repeat="man in people" class="item">
            <div><img  class="under-photo" src="https://media.istockphoto.com/photos/plain-red-tee-shirt-isolated-on-white-background-picture-id471188329?k=6&m=471188329&s=612x612&w=0&h=2I2iiScsLky2XB6J-KGC2hDBei9AfBlJsAVO4zdYn_s=" alt=""></div>
            <div class="item-photo">{{man.name}}</div>
            <button ng-click="removeItem(man)">remove</button>
    </div>
    <form ng-submit="addMan()">
            <input type="text" placeholder="Name" ng-model="newMan.name">
            <input type="text" placeholder="color" ng-model="newMan.color">
            <input type="text" placeholder="rate" ng-model="newMan.rate">
            <input type="submit" value="submit">
    </form>
</div>
7uhlpewt

7uhlpewt1#

解决方案:我使用了两个不同版本的angularjs和agular route,所以它们不起作用

相关问题