After starting my server I navigate to 'localhost:8000'. The only thing I see is console error "ReferenceError: invalid assignment left-hand side" for row $scope.userLogin() = function(userSrv){
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');
}
});
};
Basically you are declaring your app twice which is flushing the old app components. Here you have defined you app module myApp from the app.js but from service.js while amending service component to myApp module you have used angular.module('myApp', []) which reinitialize your app. You must have getting $injector error inside console.
Code
'use strict';
angular.module('myApp')
.service('carsService', function () {