AngularJS state provider integration in project

Standard

URL routing is a popular approach to matching the contents of a URL to specific functionality within a web application. URL routes programatically present specific content to users based on the URL that they are visiting. It is a popular approach that has proven to be very effective.

Something that might not be obvious is that URL routing is also a finite state machine. When you configure the routing for an app, you are laying out the various states the application can be in, and informing the application what to display and do when a specific route is encountered.

AngularJS supplies URL routing by default. It is adequate, but also has some limitations.

app.config(['$stateProvider', function ($stateProvider) {
        $stateProvider.state('page1', {
            url: '/page1',
            templateUrl: 'Scripts/app/modules/views/page1.html',
            controller: 'page1Controller',
            controllerAs: 'vm'
        }).state('profile', {
            url: '/profile',
            templateUrl: 'Scripts/app/layout/views/profile-shell.html',
            abstract: true,
        }).state('page2', {
            url: '/page2',
            templateUrl: 'Scripts/app/modules/views/page2.html',
            controller: 'page2Controller',
            controllerAs: 'vm'
        }).state('page3', {
            url: '/page3',
            templateUrl: 'Scripts/app/modules/views/page3.html',
            controller: 'page3Controller',
            controllerAs: 'vm'
        }).state('page4', {
            url: '/page4',
            templateUrl: 'Scripts/app/modules/views/page4.html',
            controller: 'page4Controller',
            controllerAs: 'vm'
        }).state('page5', {
            url: '/page5',
            templateUrl: 'Scripts/app/modules/views/page5.html',
            controller: 'page5Controller',
            controllerAs: 'vm'
        });
    }]);
 
    app.run(['$state', function ($state, $rootScope, $templateCache) {
        $state.go('page1');
    }]);

 

Advertisements

One thought on “AngularJS state provider integration in project

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s