Help create a dynamic route, I can’t do it at all. When you click "view details", the phone-detail.html file should open with the "id" of the phone to which the click was made. There are json files that are in the phones folder. There are phones.json , which contains a list of phones
{ "age": 0, "id": "motorola-xoom-with-wi-fi", "imageUrl": "img/phones/motorola-xoom-with-wi-fi.0.jpg", "name": "Motorola XOOM\u2122 with Wi-Fi", "snippet": "The Next, Next Generation\r\n\r\nExperience the future with Motorola XOOM with Wi-Fi, the world's first tablet powered by Android 3.0 (Honeycomb).", "status": true },
There are pages index.html, and in the template folder (home.html, about.html, contact.html, phone-detail.html).
index.html contains
<body ng-controller="PhoneListCtrl"> <nav class="navbar navbar-fixed-top navbar-inverse"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" ui-sref="home">Phonecat</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li ui-sref-active="selected"><a ui-sref="home">Home</a> </li> <li><a ui-sref="about">About</a> </li> <li><a ui-sref="contact">Contact</a> </li> </ul> </div> <!-- /.nav-collapse --> </div> <!-- /.container --> </nav> <!-- /.navbar --> <div class="container"> <ui-view></ui-view> </div> A home.html contains
<div class="col-xs-12 col-sm-6 col-lg-4 item" ng-repeat="phone in phones | filter:search"> <div class="preview-img text-center"> <img ng-src="{{ phone.imageUrl }}" alt="{{ phone.name }}"> <span class="label" ng-init="status = phone.status ? 'Есть в наличии' : 'Под заказ' " ng-class="{'label-success':phone.status,'label-warning': !phone.status}"> {{ status }} </span> </div> <h2>{{ phone.name }}</h2> <p>{{ phone.snippet }}</p> <p><a class="btn btn-default" href="phones/{{ phone.id }}" role="button">View details »</a></p> </div>< phone-detail.html contains bold text
<!-- phone-detail.html --> <h1>Phone Information {{ phoneId}}</h1> In controller.js, everything works fine, except for the link that is located in home.html, how I cannot do it so that clicking on the link opens detail-phone.html with the id of the phone that was clicked
var phonecatApp = angular.module('phonecatApp', ['ui.router']){ .config(['$urlRouterProvider', '$stateProvider', '$locationProvider', function($urlRouterProvider, $stateProvider, $locationProvider){ $urlRouterProvider.otherwise('/'); $stateProvider .state('home', { url: '/', templateUrl: 'template/home.html', controller: 'PhoneListCtrl', }) .state('contact', { url: '/contact', templateUrl: 'template/contact.html', controller: 'ContactCtrl', }) .state('about', { url: '/about', templateUrl: 'template/about.html', controller: 'AboutCtrl', }) .state('phones',{ url: '/phones/{phoneId}', templateUrl: 'template/phone-detail.html', controller: 'PhoneDetailCtrl' } }) $locationProvider.html5Mode(true); $locationProvider.hashPrefix = '!'; }]); //About Controller phonecatApp.controller('AboutCtrl',['$scope', '$http','$location', function($scope,$http,$location){ }]); //Contact Controller phonecatApp.controller('ContactCtrl',['$scope','$http','$location',function($scope,$http,$location){ }]); //phone detail controller phonecatApp.controller('PhoneDetailCtrl',['$scope','$http','$location','$stateParams' , function($scope, $http, $location,$stateParams){ $scope.phoneId=$stateParams.phoneId; }]); //PhoneList Controller phonecatApp.controller('PhoneListCtrl',['$scope','$http','$location', function($scope, $http,$location){ $http.get('phones/phones.json').success(function(data, status, headers ,config) { $scope.phones = data; }); }]); Help set up PhoneDetailCtrl and state ('phones', .....) so the links work. state ('phones', .....) does not work
$http.get('phones/phones.json')you find the data file, you may still need to specify the absolute path? -