Editor

Pregled code-a:

<!DOCTYPE HTML>
<html lang="hr">
<head>
<meta charset="UTF-8">
<title>AngularJS - $route index file</title>
</head>
<body ng-app="mojApp" ng-controller="MojCtrl">

Ovo je main layout za $route primjer.
<br>Dodatni fajlovi su:
<br>50route_popis.html
<br>50route_greska.html
<br>
<hr>
Klikni na ovaj link kako bi se dodao popis imena iz fajla 50route_popis.html:
<a href="50route_index.html#/popis">50route_index.html#/popis</a> .
<br>
<br>Klikni na ovaj link kako bi se prikazala greska iz fajla 50route_greska.html:
<a href="50route_index.html#/greska">50route_index.html#/greska</a>
<br>
<br>Klikni na ovaj bezveze link kako bi se desio redirectTo:
<a href="50route_index.html#/bezveze">50route_index.html#/bezveze</a>   
<br>
<br>

<div ng-view></div>

<p style="color:green;font-weight:bold;">{{poruka}}</p>

<script src="../angularjs/1.2.9/angular.min.js"></script>
<script src="../angularjs/1.2.9/angular-route.min.js"></script>
<script>
    var mojModul = angular.module('mojApp', ['ngRoute']);
    
   //routes
    mojModul.config(['$routeProvider',
        function($routeProvider){
            $routeProvider.
            when('/popis', {
                templateUrl: '50route_popis.html',
                controller: 'PopisCtrl'
            }).
            when('/greska', {
                templateUrl: '50route_greska.html',
                controller: 'GreskaCtrl'
            }).
            otherwise({
                redirectTo: '/'
            });
    }]);
    
    
    //controllers
    mojModul.controller('MojCtrl', function($scope){
        //model
        $scope.poruka='Ovo je poruka iz glavnog kontrolera!';
    });
    
    mojModul.controller('PopisCtrl', function($scope){
        //model
        $scope.niz_obj=[
            {ime:'Marko', godiste:1975}, //1. objekt
            {ime:'Janko', godiste:1998}, //2. objekt
            {ime:'Berta', godiste:1956}, //3. objekt
            {ime:'Zorko', godiste:1991}  //4. objekt
        ];
    });
    
    mojModul.controller('GreskaCtrl', function($scope){
        //model
        $scope.gres='Desila se neka greška!';
    });
    
</script>

</body>
</html>

Pregled stranice:

Pogledaj stranicu ../javascript/angularjs/primjeri/50route_index.html.