使用控制器和路由在AngularJS中单击每个数据的Url参数_Angularjs_Ngroute

使用控制器和路由在AngularJS中单击每个数据的Url参数

angularjs

使用控制器和路由在AngularJS中单击每个数据的Url参数,angularjs,ngroute,Angularjs,Ngroute,我正在尝试从api中获取电影详细信息，该api运行良好，现在我想单击每部电影，并在filmdetail页面中的单击参数上显示电影详细信息。我想在api中使用“url”作为参数我的项目结构如下： index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="js/angular.min.js"&g

我正在尝试从api中获取电影详细信息，该api运行良好，现在我想单击每部电影，并在filmdetail页面中的单击参数上显示电影详细信息。我想在api中使用“url”作为参数我的项目结构如下：

index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <script src="js/controller.js"></script>
  </head>
  <body ng-app="mainApp">


    <div ng-view></div>
  </body>
</html>

您希望在单击项目时使用修改URL中的查询参数。此方法是一个getter/setter，因此如果向其传递一个对象，这些key=value对将作为URL查询参数添加……但是如果不传递任何参数，它将作为对象返回当前查询参数

<div ng-controller="upcomingFilmsCtrl">
    <ul>
        <li ng-repeat="film in films">
            {{film.filmName + ' ' + film.filmReleaseDate}}
        </li>
    </ul>
</div>

<div ng-controller="filmsInTheatresCtrl">
    <ul>
        <li ng-repeat="film in films">
            <a href="#films/{{film.url}}">{{film.filmName + ' ' + film.filmReleaseDate}}</a>
        </li>
    </ul>
</div>
Hello world <a href="#/filmdetail">films</a>

//Individual film details
    <div ng-controller="fillmDetailsCtrl">
            {{filmName}}
            {{filmReleaseDate}}
            {{otherFilmStuf}}

    </div>

 var app = angular.module('mainApp', ['ngRoute']);        
     //upcomingFilms Controller
     app.controller('upcomingFilmsCtrl', function($scope, $http){
        $http.get('upcoming-films.php')
        .success(function(response){
            $scope.films = response.upcomingFilms;  
        });

     });

     //filmsInTheatres Controller
     app.controller('filmsInTheatresCtrl', function($scope, $http){
        $http.get('films-in-theatres.php')
        .success(function(response){
            $scope.films = response.filmsInTheatres;    
        });

     });

    //config

    app.config(function($routeProvider){
        $routeProvider
        .when('/', {
            templateUrl: 'home.html'    
        })
        .when('/films', {
            templateUrl: 'filmdetail.html'  
        })
        .otherwise('/anotherPage', {
            redirectTo: '/'
        });

    });