Inline template in angular with dynamic url

Question

Hi I want to use a similar functionality like : Using Inline Templates in Angular

But in my case url will be dynamic. for example in below code url will have /first or /second but in my case it will have the category id. there can be 100 of category so I could not write 100 condition

  learningApp.config(function ($routeProvider) {$routeProvider.
    when("/cat1",{ controller: "SimpleController", templateUrl: "temp1.html"}).
    when("/cat2", {controller: "SimpleController", templateUrl: "temp2.html"}).
    otherwise({redirectTo : "/first"});

});

<script type="text/ng-template" id="cat1.html">
<div class="view">
    <h2>First View</h2>
    <p>
        Search:<input type="text" ng-model="filterText" />
    </p>
    <ul class="nav nav-pills">
        <li ng-repeat="cust in customers | orderBy:'name' | filter: filterText "><a href="#">{{cust.name}} - {{cust.school}}</a></li>
    </ul>
</div>
</script>

<script type="text/ng-template" id="cat2.html">
<div class="view">
    <h2>Second View</h2>
    <p>
       Search:<input type="text" ng-model="filterText" />
    </p>
    <ul class="nav nav-pills">
        <li ng-repeat="cust in customers | orderBy:'name' | filter:    filterText "><a href= "#">{{cust.name}} - {{cust.school}}</a></li>
    </ul>
</div>

and definitely I will have a section with id as category id corresponding to each category.

For example shown you only need one route and one template. Use `$routeParams` in the url for the category ID. Sounds like you need to study some routing tutorials and read the `ngRoute` docs — charlietfl, Oct 23 '15 at 11:54

Avijit Gupta · Answer 1 · 2015-10-23T12:30:19.850

You can specify Your URL like this:

.when("/category/:catId") {
    controller: "ControllerName",
    templateUrl: "templateURL",
}

And inside your controller:

.controller('ControllerName', ['$scope', '$routeParams', function($scope, $routeParams) {
    var $scope.categoryFromRoute = $routeParams.catId;
}]);

E.g. - Navigating to "/category/1" will lead to $routeParams.catId having the value equal to 1, inside the controller.

Inline template in angular with dynamic url

1 Answers1