CODEWITHSUNDEEP
angularjssymfonyangular-ui-routerangular-ui-router-extras
Rubén Fanjul Estrada
Rubén Fanjul Estrada

Reputation: 1304

Angularjs and dynamic routes

I am trying to create a link in my template angularjs by doing something like: 

 <a ng-href="/#!/content/[[value.id]]">[[key]]</a>

But I am wondering myself if is possible do something like symfony2 does, example:

routing.yml

  home_redirect:
    path: /
    defaults:
        _controller: FrontendBundle:Controller:function
        path: /home
        permanent: true
    options:
        expose: true

And using it in your twig template by doing:

<a href="{{ path('home_redirect')}}"> one link to home </a>

That is really, really helpful because I don't have to "hardcode" all my routes.

Upvotes: 0

Views: 539

Answers (2)

Okazari
Okazari

Reputation: 4597

To ensure a proper routing, you can use ui-router.

Here is an exemple on plunker

How this works :

1 - Follow the installation guide on their github

2 - Write your state definition :

app.config(function($stateProvider, $urlRouterProvider){
  //If no route match, you'll go to /index
  $urlRouterProvider.otherwise('/index');

  //my index state
  $stateProvider
  .state('index', {
    url: '/index',
    templateUrl: 'index2.html',
    controller: 'IndexCtrl'
  })

  //the variable state depending on an url element
  .state('hello', {
    //you will be able to get name with $stateParams.name
    url: '/hello/:name',
    templateUrl: 'hello.html',
    controller: 'HelloCtrl'
  })  
});

3 - Write links by their state name :

//add this directive to an html element
//This will go to /index
ui-sref="index"
//This will go to /hello/
ui-sref="hello"
//This will go to /hello/ben
ui-sref="hello({name:'ben'})"
//This will go to /hello/{myname}
ui-sref="hello({name:myname})"

4 - Get the param into your controller :

//inject $stateParams
app.controller('HelloCtrl', function($scope, $stateParams){
  $scope.controller = "IndexCtrl";
  //get the param name like this
  $scope.name = $stateParams.name;
});

Hope it helped. Also keep in mind the ui-router got some really powerful tools such as resolve and nested state/view. You'll probably need theses now or later.

PS : If the plunker don't work, just fork it and save again.

Upvotes: 2

Arno_Geismar
Arno_Geismar

Reputation: 2330

You could do this :

'use strict';

angular.module('AngularModule')
    .config(function ($stateProvider) {
        $stateProvider
            .state('YourStateName', {
                url: '/your/url',
                views: {
                    'aViewName': {
                        templateUrl:'views/components/templates/yourTemplate.html',
                        controller: 'YourController'
                    }
                },
                resolve: {

                }
            });
    });


// then in your controller

angular.module('AngularModule')
.controller('MyController',function($scope, $state){
$scope.goTo = function(){
$state.go('YourStateName');
}
}

);

//in your html make sure the <a> tag is in scope with the 'MyController'

<a ng-click='goTo'>[[key]]</a>

or

you can just do this :

<a ng-href="/your/url"></a>

that way you bypass the controller you can still put logic in the controller that was specified in the state

Upvotes: 1

Related Questions