How to build Single Page Apps (SPAs) with multiple views with Angular  

As soon as an app starts, consider that there is a List View that is responsible for displaying a list of records. When you click the 'Create' button, the beginCreate() controller action changes the view from List to Create. In the Create view you can enter the details of a new record. It has two buttons, namely, Save and Cancel. When you click the Save button, the saveNew() controller function stores the record in the database and takes you back to the List view. But if you click the Cancel button, the cancel() controller function does not perform any persistence operations and takes you back to the List view.

In the List view, there are Update and Delete buttons corresponding to each record. When you select a particular record, the beginUpdate() function changes the view from List to Update. In the Update view, the details of the selected record are displayed. Just like the Create view, the Update view has Save and Cancel buttons. After you are done with editing, you click the Save button and the saveUpdated() function updates the record in the database and transitions to the List view.

Similarly, the Delete View contains the Delete and Cancel buttons and they trigger the delete() and cancel() functions respectively. The delete() function deletes the selected record from the database and changes the view back to List.

<div ng-show="currentView=='listView'">
    <h2>List of Employees</h2>
    <div class="row" ng-repeat="employee in employeeRecords"> ... </div>
    <button ng-click="beginCreate()">Create Employee</button>
</div>
<div ng-show="currentView=='createView'">
    <input type="text" placeholder="Enter the Employee name" ng-model="newEmployeeName"/>
    <button ng-click="saveNewEmployee()">Save</button>
</div>

$scope.employeeRecords = [];
$scope.currentView = 'listView';
$scope.beginCreate = function () {
    $scope.newEmployeeName = ''; 
    $scope.currentView = 'createView';
}
$scope.saveNewEmployee = function () {
    $scope.employeeRecords.push($scope.newEmployeeName);
    $scope.currentView = 'listView';
}

Angular evaluates the Boolean expression supplied to the ng-show directive. If it is evaluated to true, Angular displays the associated content otherwise it hides it. In our example. the content of the listView is displayed only when the currentView property in the current scope has its value set to 'listView'.

The currentView property is managed by the controller. You define it on the $scope object like this:

$scope.currentView = 'view-name';

Notice that the controller sets the initial view to 'listView', therefore when the page is displayed, the List view is displayed. To navigate from one view to another, you just need to reset the value of $scope.currentView property to an appropriate view. For example, the beginCreate() function sets the current view to 'createView'. So when the user clicks the Create Employee button, Angular will display the 'createView' and hide the 'listView'.

The ng-model directive is placed on the input text box and it is used to bind the text box value to the newEmployeeName property of the $scope object.

In the saveNewEmployee() function, when you navigate back to the List view, Angular observes the change that you made to the $scope.employeeRecords property, and when it displays the list, it automatically includes the newly added employee name.

In this example, all views are merged into a single HTML file. As a result, the entire markup is loaded into the browser in a single step. However, your app might comprise a large number of views, and many of those views might be containing a lot of markup content. In such a scenario, it makes sense if you implement the views as separate pages. By the way, Angular provides a neat solution to manage multiple pages.