So You Want to Build a SPA: Multiple Screens in the SPA

Angular uses different hash URLs, e.g., <http://domain.com/#/> and <http://domain.com/#/login> to differentiate screens as one navigates the app. Like any URL they can be bookmarked and crawled independently by the search engines. The important thing to understand is that the browser is not reloading the page as it navigates to a different hash URL.

Angular uses a separate ngRoute module to handle navigation between screens within an app. In order to make sense of the following, one will need to make it through step 7 in the tutorial: Routing & Multiple Views <https://docs.angularjs.org/tutorial/step_07>.

Like the earlier example in JSFIDDLE, we will use the version of Angular.js provided by a Google CDN
<//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js> by adding it to the "External Resources". Likewise will be using a Google CDN version of ngRoute <//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-route.min.js>.

note: It is important to set the place the JavaScript included in the HTML as "No wrap - in <head>".

Because JSFIDDLE only has a single HTML file with a single block of embedded JavaScript, we will collapse what is normally in separate files into the single HTML file. The normal file structure would be (see comments in the example):

note: Having the application split across multiple files helps with the performance as well makes it a bit easier to develop. For example, page1.html is not loaded until it is needed.

index.html
app.js
controllers

my_controllers.js

routes

routes.js

views

home.html
page1.html
page2.html

HTML

<!-- normally files are stored in separate files
<script src="controllers/my_controllers.js"></script>
<script src="app.js"></script>
<script src="routes/routes.js"></script>
-->
<div ng-app="myApp">
   <div ng-view></div>
     
    <!-- SEPARATE FILE views/home.html (obmit work-around script tag)-->
    <script type="text/ng-template" id="views/home.html">
        Home<br />
        {{test}}<br />
        <br />
        <a href="#/p1">Page 1</a><br />
        <a href="#/p2">Page 2</a><br />
    </script>
    <!-- EOF -->
     
    <!-- SEPARATE FILE views/page1.html (obmit work-around script tag)-->
    <script type="text/ng-template" id="views/page1.html">
        Page 1<br />
        {{test}}<br />
        <br />
        <a href="#/">Back Home</a><br />
    </script>
    <!-- EOF -->
     
    <!-- SEPARATE FILE views/page2.html (obmit work-around script tag) -->
    <script type="text/ng-template" id="views/page2.html">
        Page 2<br />
        {{test}}<br />
        <br />
        <a href="#/">Back Home</a><br />
    </script>
    <!-- EOF -->
     
</div>

JavaScript

// SEPARATE FILE controllers/my_controllers.js
var controllers = angular.module('myControllers', []);
controllers.controller('HomeCntrl', ['$scope', function($scope) {
    $scope.test = 'hello world';
}]);
controllers.controller('Page1Cntrl', ['$scope', function($scope) {
    $scope.test = 'wow this worked';
}]);
controllers.controller('Page2Cntrl', ['$scope', function($scope) {
    $scope.test = 'this is cool';
}]);
// EOF
 
// SEPARATE FILE app.js
var myApp = angular.module('myApp', [
    'ngRoute',
    'myControllers'   
]);
// EOF
 
// SEPARATE FILE routes/routes.js
angular.module('myApp').config(['$routeProvider',    
    function($routeProvider) {
        $routeProvider.
            when('/', {
                    templateUrl: 'views/home.html',
                    controller: 'HomeCntrl'
            }).
            when('/p1', {
                    templateUrl: 'views/page1.html',
                    controller: 'Page1Cntrl'
            }).
            when('/p2', {
                    templateUrl: 'views/page2.html',
                    controller: 'Page2Cntrl'
            }).
            otherwise({
                redirectTo: '/'
            });
    }
]);
// EOF

So You Want to Build a SPA

Saturday, January 17, 2015

Multiple Screens in the SPA

No comments:

Post a Comment