angular - navigation

simple navigation with angular

by FrictionlessPulley

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div class="container" ng-app="application">
    <div class="page-header">
         <h1>ng</h1>

    </div>
    <div ng-controller="menuCtrl">
        <ul class="nav nav-tabs" role="tablist" >
            <li ng-repeat="item in menuItems" ><a href="#">{{item.title}}</a></li>
        </ul>
    </div>
</div>

JavaScript

angular.module("application", [])
 .factory("menuService", ["$q", function ($q) {
 var menuItems = [{
        title: "Home",
        active: true,
    }, {
        title: "Profile",
        active: false
    }, {
        title: "contact",
        active: false
    }];
     
    var getMenuItems = function () {
        var deferred = $q.defer();
        deferred.resolve(menuItems);
        return deferred.promise;
    };
    return {
        get: getMenuItems
    };
}])
.controller("menuCtrl", ["$scope","menuService",function ($scope, menuService) {
        var success = function (items) {
        $scope.menuItems = items;
    };
    var error = function (error) {
        console.log(error);
    };

    menuService.get().then(success, error);
}]);