bennadel / angularjs-routing Goto Github PK

  html ng-app="demoApp"
head
    meta charset="UTF-8"
    titleRoutingtitle
    script src="../angular.min.js"script
    script src="../angular-route.js"script
    script src="app.js"script
head
body
    div ng-viewdiv
body

        var demoApp = angular.module('demoApp', ['ngRoute']);
        demoApp.controller('NameCtrl', function($scope, $http){
            $http.get("../countries.json").success(function(data){
                alert("Hello");
                $scope.countries = data;
            }).error(function(data, status){
                alert("No Hello");
                alert(status);
                $scope.data = data || "Request failed";
                $scope.status = status;
            });
        });
        demoApp.controller('CntryDtlCtrl', function($scope, $routeParams){
            alert($routeParams);
            console.log($routeParams);

        });
        demoApp.config(function($routeProvider){
            $routeProvider
                  .when('/',{
                        template: '<ul><li ng-repeat="entity in countries">{{entity.country}}</li></ul>',
                        controller: 'NameCtrl'
                  }).
                  when('/:country',{
                    // Add # with a name i.e country name in the url to get this content eg. file:///Users/karthicklove/Documents/Aptana%20Studio%203%20Workspace/Object_Javascript/Angular_Js/50_examples/Routing/index.html#/china
                    template: '<h1>TODO create country detail view<h1>',
                    controller: 'CntryDtlCtrl'
                  }).
                  otherwise({
                    redirectTo: '/'
                  });
        });

        App.config(function ($routeProvider) {                
            $routeProvider
                .when('/', { templateUrl: 'Partials/View1.htm', controller: 'SimpleController' })
                .when('/partial2', { templateUrl: 'Partials/View2.htm', controller: 'SimpleController' })
                .otherwise({ redirectTo: '/AJTest' });
        });

        App.controller('SimpleController', function ($scope) {
            $scope.customers =
                                [
                                    { name: 'a', city: 'a' },
                                    { name: 'b', city: 'b' },
                                    { name: 'c', city: 'c' },
                                    { name: 'd', city: 'd' }
                                ];
            $scope.addCustomer = function () {
                $scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
            }
        });

    </script> 
    <div data-ng-controller="SimpleController">
        Name :<br /> 
        <input type="text" data-ng-model="name" />  {{ name }}    
        <ul>
            <li data-ng-repeat="cust in customers | filter:name | orderBy:city">{{ cust.name  + ' ' + cust.city}} </li>
        </ul>
    </div>                                
</body>