ReferenceError: invalid assignment left-hand side (app.js:41:27) & nothing is displayed angular

Question

启动我的服务器后，我导航到 'localhost:8000'。我唯一看到的是 $scope.userLogin() = function(userSrv){

行的控制台错误 "ReferenceError: invalid assignment left-hand side"

index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>


<!--[if lt IE 7]>
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<div ng-view></div>


<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="services/services.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>

services.js

'use strict';
angular.module('myApp', [])
.service('carsService', function () {
  var carList = [];

  var addUserCar = function (currObj, title, color, description, image) {
    currObj = {
        title: title,
        color: color,
        descriptiopn: description,
        image: image
      };
      /* console.log("Car Added:  " + currObj.id + "\n" + currObj.title + "\n" + currObj.color + "\n" + currObj.description + "\n" + currObj.image);*/
    carList.push(currObj);
    console.log(carList);
  };

  var getCars = function () {
    console.log("User cars");
    console.log(carList);
    return carList;

  };

  return {
    addUserCar: addUserCar,
    getCars: getCars
  }


})
.service('userSrv', userSrv)
.provider('storageSrv',storageSrv);
    function userSrv(storageSrv, carsSrv) {
      var user = {name: '', cars: [] };
      this.getUser = function() {
          return user;
      };

      this.getUserName = function () {
          return user.name;
      };
      this.login = function(){
        user.name = 'test name',
        user.cars = init()
      }
      this.logout = function(){
        user.name = '';
        user.cars = [];
      }
      this.checkLoginUser = function(){
        return user.name !='';
      }
      this.getUserFeatures = function(){
        return user.features;
      }
      this.registration = function(){
        user.name = name;
        user.cars = init();
      }
      function init(){
        return storageSrv.getData();
      }

    }



  function storageSrv(){
    var storageName = 'cars';
    return {
      configStorageName : configStorageName,
      $get:$get
    };

    function configStorageName(name){
      if(name){
        storageName = name;
        return this;
      }
      else{
        return storageName;
      }
    }

    function $get(){
      function updateStorage(data){
        localStorage.setItem(storageName, data);
      }
      function getStorage(){
        return localStorage.getItem(storageName);
      }
      function updateData(data){
        console.log('storageName ' + storageName);
        updateStorage(JSON.stringify(data));
      }
      function getData(){
        console.log('storageName ' + storageName);
        var data = getStorage();
        return JSON.parse(data) || [];
      }
      return {
        updateData: updateData,
        getData:getData
      }
    }
  };

app.js

    'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
    'ngRoute'
])
.constant('STORAGE_NAME', 'USER_CARS')
.config(configStorage)
.config(configRoutes)

.controller('carsCtrl', ['$scope', '$http', 'carsService',
    function($scope, $http, carsService) {
        alert("cars view");

        $http.get('cars/cars.json')
            .success(function(data) {

                $scope.cars = data;

                $scope.addCar = function(id, title, color, description, image) {
                    carsService.addUserCar(id, title, color, description, image);
                };

            })
            .error(function() {
                alert("can not get data from cars.json");
            });
    }
])

.controller('homeCtrl', [

    function() {
        alert("home view");
    }
])

.controller('loginCtrl', ['userSrv', '$scope',
    function (userSrv, $scope) {
        alert("login view");
        $scope.userLogin() = function(userSrv){
            userSrv.login();
        }

    }
])

.controller('profileCtrl', ['$scope', 'carsService',
    function($scope, carsService) {
        alert("profile view");
        $scope.userCars = carsService.getCars();


    }
]);

function configStorage(storageProvider, STORAGE_NAME){
  console.log(storageProvider);
  storageSrvProvider.configStorageName(STORAGE_NAME);
}

function configRoutes($routeProvider) {
        $routeProvider

        .when('/cars', {
            templateUrl: 'views/cars.html',
            controller: 'carsCtrl',
            secure: true
        })

        .when('/profile', {
            templateUrl: 'views/profile.html',
            controller: 'profileCtrl',
            secure: true
        })

        .when('/home', {
            templateUrl: 'views/home.html',
            controller: 'homeCtrl',
            isLogin: false
        })

        .when('/login', {
            templateUrl: 'views/login.html',
            controller: 'loginCtrl',
            secure: false
        })



        .otherwise({
            redirectTo: '/home'
        });
    }

var appRun = function($rootScope, $location, $userService) {
    $rootScope.on('$routeChangeStart', function(event, next) {
        if (next.secure && !userService.checkLoginUser()) {
            $location.path('/login');
        }
    });
};

Answer 1

基本上您是在两次声明您的应用程序，这会刷新旧的应用程序组件。在这里，您已经从 app.js 定义了您的应用程序模块 myApp，但是从 service.js 将 service 组件修改为 myApp 模块时，您使用了 angular.module('myApp', [])重新初始化您的应用程序。您必须在控制台中收到 $injector 错误。

代码

'use strict';
angular.module('myApp')
.service('carsService', function () {

Answer 2

您不能为函数调用赋值，这里：

    $scope.userLogin() = function(userSrv){
        userSrv.login();
    }

我假设它应该是

    $scope.userLogin = function(userSrv){
        userSrv.login();
    }

ReferenceError: invalid assignment left-hand side (app.js:41:27) & nothing is displayed angular

ReferenceError: invalid assignment left-hand side (app.js:41:27) & nothing is displayed angular

javascript

angularjs

angularjs-module