JSAngular-11

routing ng-view

by munir

HTML

<html ng-app="contacts">
    <title>Contacts</title>
    <div ng-controller="Contacts">
        <h1>Contacts</h1>
        <div ng-view></div>
    </div>
    <script>
        angular
            .module('contacts',[])
            .config(function($routeProvider) {
                //configure routes
                $routeProvider
                //Edit contact
                .when('/contacts/:index',{
                    templateUrl: 'edit.html'
                    controller: 'Edit'
                });
                //list all contacts
                .when('/',{
                    templateUrl: 'list.html'
                });
            })
            .controller('Contacts',function($scope){
                //contacts is the parent controller, so
                //$scope.contacts is available in all children
                $scope.contacts=[
                    {name: 'Tom',number: '23489234'},
                    {name: 'Jeffery',number: '29384723'},
                    {name: 'Joe' ,number: '90824987'}
                ];
            })
            .controller('Edit',function($scope,$routeParams){
                //Load un a contact from the route (/contact/:index)
                $scope.contact = $scope.contacts[$routeParamas.index];
                $scope.index = $routeParams.index;
            });
    </script>
</html>