asked on

Could you point how to call an Angular view from inside an Angular controller?

Hi Experts

Could you point how to call an Angular view from inside an Angular controller?

Accordingly to:

Angular View's code:

 <div class="wrapper-md" ng-controller="usersController">
        <div class="panel panel-default">
            <div class="panel-heading" translate="nav.USERS">Users</div>  
            <table st-table="users" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>Nome</th>
                        <th>Nome de Usuário</th>
                        <th>Email</th>
                        <th>Status</th>
                        <th>Opções</th>
                    </tr>
                </thead>
                <tbody>
                        <tr ng-repeat="row in usersCollection" st-select-row="row">
                        <td>{{row.name}}</td>
                        <td>{{row.username}}</td>
                        <td>{{row.email}}</td>
                        <td>{{row.status}}</td>
                        <td><button type="button" ng-click="view(row.id)"><i class="fa fa-eye"></i></button><button type="button" ng-click="edit(row.id)"><i class="fa fa-edit"></i></button><button type="button" ng-click="del(row.id)"><i class="fa fa-trash"></i></button></td>
                    </tr>
                </tbody>
                    
            </table>
                   
        </div>

Open in new window

Angular controller:

'use strict';
angular.module("app").controller("usersController", ['$scope','usersService', function ($scope,usersService) {
      usersService.get().then(function(data){
         $scope.usersCollection = data;
      }).catch(function(){
        console.log('Erro!');  
      });
      
      
     $scope.view = function() {
        console.log('view');
        //  ??? How to call a view from here ???
    };
    
    
     $scope.edit = function() {
        console.log('edit');
    };
    
     $scope.del = function() {
        console.log('del');
    };
    
      
}]);

Open in new window

Angular structure (with Laravel)

Thanks in advance.

leakim971

'use strict';
angular.module("app").controller("usersController", ['$scope','usersService', '$location', function ($scope,usersService,$location) {
      usersService.get().then(function(data){
         $scope.usersCollection = data;
      }).catch(function(){
        console.log('Erro!');  
      });
      
      
     $scope.view = function(userId) {
        console.log('view');
        // https://docs.angularjs.org/api/ng/service/$location
        $location.path("/user/"+userId); // for example...
    };

Open in new window

Julian Hansen

Can you elaborate on what you mean by how you call a view?

A view is not called - it is bound to the controller and is populated by state (the model).

What are you hoping to achieve with this code

$scope.view = function() {
  console.log('view');
  //  ??? How to call a view from here ???
};

Open in new window

Eduardo Fuerte

ASKER

Hi

I'm trying to use "Codeigniter's" concepts... Accordingly to your reply AngularJS as a front-end framework uses another concepts that I must to capture.

After some researches, I obtained this code from the controller .js

  function getResultsPage(pageNumber) { 
      if(! $.isEmptyObject($scope.libraryTemp)){

          // ? This part uses the model (also called state)
          dataFactory.httpRequest('/items?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {
            
           // Obtains the data
            $scope.data = data.data;
            $scope.totalItems = data.total;
          });
      }else{
        dataFactory.httpRequest('/items?page='+pageNumber).then(function(data) {
          $scope.data = data.data;
          $scope.totalItems = data.total;
        });
      }
  }

Open in new window

Am I going in the correct way?
Could you possibly clear?

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Julian Hansen

Personally I prefer ui-router over ngRoute
You will need to choose one of these going forward. UI Router gives better options and is more flexible (in my view)

I would also investigate AngularJs components and build your views around components. This makes your application layout more logical, there is an upgrade path to Angular 2 and it allows you to structure your code more logically.

Eduardo Fuerte

ASKER

Hi

Thank you for the replies that I'm carefully reading to correct catch the meanings. It's a kind of lessons!

Just to inform, the code used is from:

Laravel-5-Angularjs-CRUD

Julian Hansen

Going back to your original question
How to call a view from a controller

This is not the way that Angular works - your routing loads views - views have components.

Both views and components have controllers.

Eduardo Fuerte

ASKER

Julian

I'm trying to adapt your code to the mentioned project to have a better meaning.

<!doctype html>
<html ng-app="app">
<head>
<meta charset="UTF-8"/>
<title>Two different methods for handling search in Angular</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<div class="wrapper" ng-controller="mainCtrl">
  <header>
    <div class="container">
    <h1 class="col-lg-9">Two different methods for handling search in Angular</h1>
    </div>
  </header>
  <div class="container">
    <h5>Author: Julian Hansen, December 2016</h5>
    <p>Demonstrates how to do in page searching and searching on the server</p>
<div>
      <p>Demonstrates the filter directive of angular. Entire dataset is downloaded and local filtering is done</p>
      <input ng-model="searchText" />
      <table class="table">
        <tr ng-repeat="item in data | filter: searchText">
          <td>{{item.firstname}}</td>
          <td>{{item.surname}}</td>
        </tr>
      </table>
    </div>
<div>
      <p>Demonstrates getting a new set of results from the server</p>
      <input ng-model="searchTextServer" ng-change="search(searchTextServer)"/>
      <table class="table">
        <tr ng-repeat="item in serverData">
          <td>{{item.firstname}}</td>
          <td>{{item.surname}}</td>
        </tr>
      </table>
    </div>
</div>
</div>
<footer>
  <div class="container">
    Copyright Julian Hansen &copy; 2016
  </div>
</footer>

<script src="http://code.jquery.com/jquery.js"></script>
 
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.js"></script>
</body>
</html>

Open in new window

var app =  angular.module('main-App',['ngRoute','angularUtils.directives.dirPagination']);

app.config(['$routeProvider',
    function($routeProvider) {
        $routeProvider.
            when('/', {
                templateUrl: 'templates/home.html',
                controller: 'AdminController'
            }).
            when('/items', {
                templateUrl: 'templates/items.html',
                controller: 'ItemController'
            });
            
            when('/teste', {
                templateUrl: 'templates/teste.html',
                controller: 'TesteController'
            }); 
}]);

Open in new window

app.controller('AdminController', function($scope,$http){
 
  $scope.pools = [];
   
});

app.controller('TesteController', function($scope,$http){

//function() {
  'use strict';
  angular.module('app',[])
    // FACTORY FOR OUR API
    .factory('APISvc', function($http) {
      return {
        // GET FULL DATASET
        getData: function() {
          return $http.get('t1930.php');
        },
        // GET SEARCH DATA
        getSearchData: function(srch) {
          return $http.get('t1930.php?search=' + srch);
        }
      }
    })
    .controller('mainCtrl', mainController);
 
  function mainController($scope, APISvc)
  {
    $scope.data = [];
    $scope.serverData = [];
    $scope.searchTextServer = '';
    $scope.searchText = '';
 
    // Popuplate first table
    APISvc.getData().then(function(resp) {
      $scope.data = resp.data;
    });
    
    // Popuplate second table
    APISvc.getData().then(function(resp) {
      $scope.serverData = resp.data;
    });
 
    // Handle server side search
    $scope.search = function(searchText) {
      APISvc.getSearchData(searchText).then(function(resp) {
        $scope.serverData = resp.data;
      });
    };
  }
})();



app.controller('ItemController', function(dataFactory,$scope,$http){
 
  $scope.data = [];
  $scope.libraryTemp = {};
  $scope.totalItemsTemp = {};

  $scope.totalItems = 0;
  $scope.pageChanged = function(newPage) {
    getResultsPage(newPage);
  };

  getResultsPage(1);
  function getResultsPage(pageNumber) {
      if(! $.isEmptyObject($scope.libraryTemp)){
            dataFactory.httpRequest('/items?search='+$scope.searchText+'&page='+pageNumber).then(function(data) {
            $scope.data = data.data;
            $scope.totalItems = data.total;
          });
      }else{
        dataFactory.httpRequest('/items?page='+pageNumber).then(function(data) {
          $scope.data = data.data;
          $scope.totalItems = data.total;
        });
      }
  }

  $scope.searchDB = function(){
      if($scope.searchText.length >= 3){
          if($.isEmptyObject($scope.libraryTemp)){
              $scope.libraryTemp = $scope.data;
              $scope.totalItemsTemp = $scope.totalItems;
              $scope.data = {};
          }
          getResultsPage(1);
      }else{
          if(! $.isEmptyObject($scope.libraryTemp)){
              $scope.data = $scope.libraryTemp ;
              $scope.totalItems = $scope.totalItemsTemp;
              $scope.libraryTemp = {};
          }
      }
  }

  $scope.saveAdd = function(){
    dataFactory.httpRequest('items','POST',{},$scope.form).then(function(data) {
      $scope.data.push(data);
      $(".modal").modal("hide");
    });
  }

  $scope.edit = function(id){
    dataFactory.httpRequest('items/'+id+'/edit').then(function(data) {
    	console.log(data);
      	$scope.form = data;
    });
  }

  $scope.saveEdit = function(){
    dataFactory.httpRequest('items/'+$scope.form.id,'PUT',{},$scope.form).then(function(data) {
      	$(".modal").modal("hide");
        $scope.data = apiModifyTable($scope.data,data.id,data);
    });
  }

  $scope.remove = function(item,index){
    var result = confirm("Are you sure delete this item?");
   	if (result) {
      dataFactory.httpRequest('items/'+item.id,'DELETE').then(function(data) {
          $scope.data.splice(index,1);
      });
    }
  }
   
});

Open in new window

t1930.php

<?php
// MOCK DATA
$json = <<< JSON
[{
  "firstname": "Bruce",
  "surname": "Wayne"
},
{
  "firstname": "Clarke",
  "surname": "Kent"
},
{
  "firstname": "Bruce",
  "surname": "Banner"
},
{
  "firstname": "Peter",
  "surname": "Parker"
},
{
  "firstname": "Tony",
  "surname": "Stark"
},
{
  "firstname": "Wade",
  "surname": "Wilson"
},
{
  "firstname": "Steve",
  "surname": "Rogers"
},
{
  "firstname": "Clint",
  "surname": "Barton"
},
{
  "firstname": "Natasha",
  "surname": "Romanaoff"
},
{
  "firstname": "James",
  "surname": "Rhodes"
},
{
  "firstname": "Sam",
  "surname": "Wilson"
},
{
  "firstname": "Wanda",
  "surname": "Maximoff"
},
{
  "firstname": "Bucky",
  "surname": "Barnes"
},
{
  "firstname": "Scott",
  "surname": "Lang"
}]
JSON;
 
// GET THE SEARCH TERM
$search = isset($_GET['search']) ? $_GET['search'] : false;
 
// IF IT EXISTS ...
if ($search) {
  // LOOP THROUGH THE DATA
  $data = json_decode($json);
  $ret = array();
  
  // CHECK FOR SEARCH TERM USING CASE INSENSITIVE
  // SUBSTRING SEARCH ON CONCATENATION OF FIELDS
  foreach($data as $item) {
    if (stristr($item->firstname . $item->surname, $search)) {
 
      // ADD TO RESULT SET IF FOUND
      $ret[] = $item;
    }
  }
  
  // ENCODE RESULT
  $json = json_encode($ret);
}
// ELSE JUST USE THE JSON AS IS
 
// SEND BACK JSON
echo $json;

Open in new window

Laravel's root

Could you possibly check and maybe suggest how to configure it out?

Eduardo Fuerte

ASKER

Missed:

/*
|--------------------------------------------------------------------------
| Routes File
|--------------------------------------------------------------------------
|
| Here is where you will register all of the routes in an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/

Route::get('/', function () {
    return view('app');
});

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| This route group applies the "web" middleware group to every route
| it contains. The "web" middleware group is defined in your HTTP
| kernel and includes session state, CSRF protection, and more.
|
*/

Route::group(['middleware' => ['web']], function () {
    Route::resource('items', 'ItemController');
});

// Templates
Route::group(array('prefix'=>'/templates/'),function(){
    Route::get('{template}', array( function($template)
    {
        $template = str_replace(".html","",$template);
        View::addExtension('html','php');
        return View::make('templates.'.$template);
    }));
});

Open in new window

Julian Hansen

I'm trying to adapt your code to the mentioned project to have a better meaning.

The code was posted to illustrate how Angular views are local and rely on the server only for RESTful data to populate the views. At the time you had not posted the link to the sample so there was no context for what you are trying to do. Trying to work my sample into your code might not be the right solution here

The question is - if you are following the sample here http://itsolutionstuff.com/post/laravel-52-and-angularjs-crud-with-search-and-pagination-exampleexample.html - why are you deviating from what he has done?

Eduardo Fuerte

ASKER

My strategy here is just to implement new features based on existing code as a manner to learn.

Maybe I misconcept concepts when trying to implement your code on this existing project...

I gave a step behind using another project without Laravel.

just using Angular

This way and using your code I could have a better overall comprehension of Angular!

Thank you for your patience and assistance until now.

Eduardo Fuerte

ASKER

Thank you for the help!

I musted to have a break at Laravel project by now but when return back I will continue to study this more accurated.

Julian Hansen

You are welcome