I am completely new in Angular. I want to load two different partial views with singleton controller by using ng-Route and ng-view.But every time when I executed below SpecialFields.cshtml that I got this type of error.
I have searched many times and test a lot of points in stack overflow like this: angular multiple routes sharing one controller. But code didn't work properly.
How can i solve this problem and how can I render partial views by ng-view and ng-route? Thanks in advance
SpecialField.cshtml is:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/angular-route.js"></script>
<script src="~/App/Patients/SpecialFields/specialFieldController.js"></script>
<script src="~/App/Common/Services/StorageService.js"></script>
<div class="row" style="font-family:BYekan">
<div class="col-md-12">
<div class="portlet light portlet-fit bordered">
<div class="portlet-title">
<div class="caption">
<i class=" fa fa-cog font-green"></i>
<span class="caption-subject font-green bold uppercase">SpecialFields config</span>
</div>
</div>
<div class="portlet-body" ng-app="SpecialFields" ng-controller="SpecialFieldsController">
<div class="row" style="margin:0 1px;direction:rtl">
<div class="col-md-12">
<div class="row panel panel-default">
<div class="panel-body">
<form name="frm" class="form-inline" >
<div class="form-group col-md-6">
<label for="fieldname" class="bold control-label">Field Name</label>
<span class="required">*</span>
<input type="text" name="fieldname" id="fieldname" class="form-control" required ng-model="specialfieldname" />
</div>
<div class="form-group col-md-5 col-md-pull-1" >
<label for="fieldtype" class="bold control-label">Field Type:</label>
<span class="required"> * </span>
<select id="fieldtype" class="form-control" ng-model="specialfieldtype" ng-options="option for option in [Item1,Item2]">
<option value="" class="placeholder" selected disabled>Item1</option>
</select>
<button class="btn btn-primary " type="submit" ng-click="addSpecialfield()">
Add
<span class="fa fa-plus-square-o" style="padding-right:5px;"></span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row">
<div class=" col-md-12">
<table class="table table-striped table-bordered" id="sfields">
<thead>
<tr>
<th> Index</th>
<th>Field name</th>
<th>Field Type</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="specialfield in specialfields">
<td class="col-sm-2">
{{$index+1}}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldname }}
</td>
<td class="col-sm-4">
{{ specialfield.specialfieldtype }}
</td>
<td class="col-sm-1">
<a href="#/update" class="btn btn-default">
Edit
<span class="glyphicon glyphicon-check"></span>
</a>
</td>
<td class="col-sm-1">
<a href="#" class="btn btn-danger" ng-click="deleteSpecialfield(specialfield)">
Delete
<span class="fa fa-remove"></span>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
this is specialFieldController.js
var isHtml5Compatible = document.createElement('canvas').getContext != undefined;
if (isHtml5Compatible) {
initiateLocalStorage();
}
function initiateLocalStorage() {
// Create the AngularJS app
var app = angular.module('SpecialFields', ['common']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'SpecialFieldsController',
templateUrl: '/List.html'
})
.when('/update', {
controller: 'SpecialFieldsController',
templateUrl: '/Update.html'
})
});
// Create the Controller
app.controller('SpecialFieldsController', ['$scope', 'getLocalStorage', function ($scope, getLocalStorage) {
//Read the Sfield List from LocalStorage
$scope.specialfields = getLocalStorage.getSpecialfields();
//Count the SpecialFields List
$scope.count = $scope.specialfields.length;
//Add Sfield - using AngularJS push to add sfield in the sfield Object
//Call BindTable_SpecialField to update the locally stored Sfield List
//Reset the AngularJS SpecialField scope
//Update the Count
$scope.addSpecialfield = function () {
$scope.specialfields.push({'specialfieldname': $scope.specialfieldname, 'specialfieldtype': $scope.specialfieldtype });
getLocalStorage.BindTable_SpecialField($scope.specialfields);
//$scope.sfno = '';
$scope.specialfieldname = '';
$scope.specialfieldtype = '';
$scope.count = $scope.specialfields.length;
};
//Delete Sfield - Using AngularJS splice to remove the sfield row from the sfield list
//All the Update sfield to update the locally stored sfield List
//Update the Count
$scope.deleteSpecialfield = function (specialfield) {
$scope.specialfields.splice($scope.specialfields.indexOf(specialfield), 1);
getLocalStorage.BindTable_SpecialField($scope.specialfields);
$scope.count = $scope.specialfields.length;
};
}]);
}
and this is StorageService.js
var storageService = angular.module('common', []);
storageService.factory('getLocalStorage', function () {
var specialfieldList = {};
return {
list: specialfieldList,
BindTable_SpecialField: function (SpecialfieldsArr) {
if (window.localStorage && SpecialfieldsArr) {
//Local Storage to add Data
localStorage.setItem("specialfields", angular.toJson(SpecialfieldsArr));
}
specialfieldList = SpecialfieldsArr;
},
getSpecialfields: function () {
//Get data from Local Storage
specialfieldList = angular.fromJson(localStorage.getItem("specialfields"));
return specialfieldList ? specialfieldList : [];
}
};
});
** Edit 2: Div with class portlet-body will have ng-view directive and will be my placeholder of my views.all of codes in this div will move to List.html.another html file that will be rendered is Update.html which it renders when Edit button will be clicked.
