All geek questions in one place

Corner Route Assistant

Any ideas on how to create solutions that help generate the URL in a more convenient way, instead of hard coding:

<a ng-href="#/Book/{{item.bookId}}/ch/{{item.id}}">Chapter {{item.id}}</a>

I want to use:

<a chapters="[item.bookId, item.id]">Chapter {{item.id}}</a>

Thus, it checks the routes and generates for each directive specific to the route.

I am interested in the most general solution as possible.

+4
source share
4 answers

I highly recommend you use ui-router and it $stateProvider.

var app = angular.module('yourModuleName', ['ui.router']);

app.config(function ($stateProvider) {
  $stateProvider
    .state('book', {
      url: '/Book/:bookId'
    })
    .state('book.chapter', {
      url: '/ch/:id'
    });
});

<a ui-sref="book.chapter({bookId: item.bookId, id: item.id})">Chapter {{item.id}}</a>

Something along these lines should do the trick. I'm not completely familiar with the other parameters of your application, but creating a dynamic URL with the parameters passed to match with $stateis a breeze.

ui-router: https://github.com/angular-ui/ui-router

ui-sref (): https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

+8

Angular -UI Angular -UI/UI-Router

, , , , . .

$stateProvider
      .state("bookPreview", {
        url: "/book/:id/:itemId",
        controller: "BookPreviewCtrl",
        templateUrl: 'sb/add-cpe-template.tpl.html'
      });

html :

<button ng-click="view(item.bookId, item.id)">Chapter {{item.id}}</button>

- , ng-click .

java script: ( , $

controller("BookSelectionCtrl",function($scope,$state){

  //this will rewrite the url , go to the state and load the template(view).
  $scope.view=function(bookId,itemId){
    $state.go("bookPreview",{id:bookId,itemId:itemId}) //there is a third object representing options, which are optional and you can check them on doc site
  }   

})

controller("BookPreviewCtrl",function($scope,$stateParams){
   //in this new ctrl of the new view you can now do what ever you want with these params
   $scope.bookId = $stateParams.id;
   $scope.itemId = $stateParams.itemId; 
})
+2

, http://plnkr.co/edit/d592a58CMan5BVKQYSAy?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope,$route) {
  var keys = [];
  for(var k in $route.routes) keys.push(k);
  $scope.name = keys;
  for (var i=0; i<keys.length; ++i) {
    app.directive('SomethingDynamic', function() {
      return {
        restrict: 'A',
        replace: true,
        template: '....',
      };
    });
  }
});

app.config(function ($routeProvider) {
  $routeProvider.
    when('/complex/:name/:color/:number/extra', {
      templateUrl: "404.html",
      name:'complex'
    }).
    when('/objects', {
      templateUrl: "404.html",
      name:'list'
    }).
    when('/object/detail/:id', {
      templateUrl: "404.html",
      name:'detail'
    });
});
+1
source

Or you can create a directive ( jsbin ):

View:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="mainCtrl">

<book-link book="book" ng-repeat="book in books"></book-link>
  </div>
</body>
</html>

JS:

var app = angular.module("app",[])
.controller("mainCtrl", function($scope){

  var books = [
    {bookId : "book1", id:"1" },
    {bookId : "book1", id:"2" },
    {bookId : "book1", id:"3" }
  ];

  $scope.books = books;


})

.directive("bookLink",function(){

  return {
    restrict:"E",
    scope:{book:'='},
    template:"<a href='/book/{{book.bookId}}/ch/{{book.id}}'>Chapter {{book.id}}</a><br/>"

  };

});
+1
source

Source: https://habr.com/ru/post/1544463/

More articles:


All Articles