[Angular-Scaled web] 3. Basic State with ui-router

1. Install ui-route, include js file in html and add dependence in js file.

bower install angular-ui-router

<script src="bower_components/angular-route/angular-route.min.js"></script>

angular.module('Eggly', [
    'ui.router',
    'categories',
    'categories.bookmarks'
])

 

2. Add config() to the app, inject with $stateProvider.

angular.module('Eggly', [
    'ui.router',
    'categories',
    'categories.bookmarks'
])

    //inject the stateProvider
    .config(function($stateProvider){
        $stateProvider
            .state('eggly', {
                url:'/',   //point to the root url
                templateUrl: 'app/categories/categories.tmpl.html',
                controller: 'MainCtrl'
            })
        ;
    })

 

3. add ui-view directive to the html

        <div class="container-fluid" ui-view>

        </div>

 

4. Add content to the 

categories.tmpl.html

<div class="row">
    <div class="col-sm-3 col-md-2 sidebar">
        <a ng-click="setCurrentCategory(null)"><img class="logo" src="assets/img/eggly-logo.png"></a>
        <ul class="nav nav-sidebar">
            <li ng-repeat="category in categories" ng-class="{'active':isCurrentCategory(category)}">
                <a ng-click="setCurrentCategory(category)">
                    {{category.name}}
                </a>
            </li>
        </ul>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <div ng-class="{active: isSelectedBookmark(bookmark.id)}"  ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
            <button type="button" class="close" ng-click="deleteBookmark(bookmark)">&times;</button>
            <button type="button" class="btn btn-link" ng-click="setEditedBookmark(bookmark);startEditing();" ><span class="glyphicon glyphicon-pencil"></span>
            </button>
            <a href="{{bookmark.url}}" target="_blank">{{bookmark.title}}</a>
        </div>
        <hr/>
        <!-- CREATING -->
        <div ng-if="shouldShowCreating()">
            <button type="button" class="btn btn-link" ng-click="startCreating()">
                <span class="glyphicon glyphicon-plus"></span>
                Create Bookmark
            </button>
            <form class="create-form" ng-show="isCreating" role="form" ng-submit="createBookmark(newBookmark)" novalidate>
                <div class="form-group">
                    <label for="newBookmarkTitle">Bookmark Title</label>
                    <input type="text" class="form-control" id="newBookmarkTitle" ng-model="newBookmark.title" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label for="newBookmarkURL">Bookmark URL</label>
                    <input type="text" class="form-control" id="newBookmarkURL" ng-model="newBookmark.url" placeholder="Enter URL">
                </div>
                <button type="submit" class="btn btn-info btn-lg">Create</button>
                <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelCreating()">Cancel</button>
            </form>
        </div>
        <!-- EDITING -->
        <div ng-show="shouldShowEditing()">
            <h4>Editing {{editedBookmark.title}}</h4>

            <form class="edit-form" role="form" ng-submit="updateBookmark(editedBookmark)" novalidate>
                <div class="form-group">
                    <label>Bookmark Title</label>
                    <input type="text" class="form-control" ng-model="editedBookmark.title" placeholder="Enter title">
                </div>
                <div class="form-group">
                    <label>Bookmark URL</label>
                    <input type="text" class="form-control" ng-model="editedBookmark.url" placeholder="Enter URL">
                </div>
                <button type="submit" class="btn btn-info btn-lg">Save</button>
                <button type="button" class="btn btn-default btn-lg pull-right" ng-click="cancelEditing()">Cancel</button>
            </form>
        </div>
    </div>
</div>

 

5. When visiting the page, url should change accordingly, otherwise nothing will show.

old url:
http://localhost:63342/eggly/index.start.html

new url:
http://localhost:63342/eggly/index.start.html#/

 

Read More:

https://github.com/angular-ui/ui-router

http://angular-ui.github.io/ui-router/site/#/api/ui.router

https://github.com/eggheadio/egghead-angularjs-eggly-architecture/tree/03-basic-state-ui-router