40163

Controlling multiple views in one controller in AngularJS

Question:

Following the MVC pattern, one controller should be able to handle multiple views in AngularJS.

E.g. I have one view for showing all users and one for creating a new user. My $routeProvider (excerpt) looks like this:

app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/showusers', { templateUrl: 'partials/showusers.html', controller: 'userController' }). when('/createuser', { templateUrl: 'partials/showusers.html', controller: 'userController' }) }]);

Both views share several methods such as retrieving all user attributes. These shared methods are accessed through a factory.

The userController (excerpt) currently looks like this where Users is a factory:

angular.module('supportModule'). controller('userController', function($scope, Users) { var init = function(){ $scope.users = Users.getAll(); $scope.attributes = Users.getAttributes(); } init(); })

The problem is: I don't need to request Users.getAll(); when I'm on the createuser view.

Of course, I could easily parse the route by using $location, the $routeProvider or pure JS and then conditonally call methods - but I figure there is a more elegant and efficient way in Angular :)<br /> Something like in typical MVC frameworks where one controller has many actions - one for each view.

So my question:<br /><strong>How to elegantly call methods based on the view in a controller which controls more than one view?</strong>

Answer1:

You could use resolve: when setup $routeProvider to pass values to a controller depending on the matched route.

app.config(['$routeProvider', function($routeProvider) { $routeProvider. when('/showusers', { templateUrl: 'partials/showusers.html', controller: 'userController', resolve: { ctrlOptions: function () { return { getAllUsers: true, }; } } }). when('/createuser', { templateUrl: 'partials/showusers.html', controller: 'userController', resolve: { ctrlOptions: function () { return { getAllUsers: false, }; } } }) }]);

and then in the controller, you can inject item specified in resolve: like this:

app.controller('userController', function ($scope, Users, ctrlOptions) { var init = function () { if (ctrlOptions.getAllUsers) { $scope.users = Users.getAll(); } $scope.attributes = Users.getAttributes(); }; init(); });

Hope this helps.

Recommend

  • API Versioning in SailsJS
  • Node.js and Express static middleware routing views
  • Angular UI-Router $urlRouterProvider.when handler result ignored by $state
  • Change Mapping of fields of CreateUserWizard control with membership provider asp.net 4.0
  • Why is this Exception?- The relationship between the two objects cannot be defined because they are
  • Firebase rules validation does not validate data
  • Have a problem with sending a gmail message to a new registerd user
  • Must include files in nanoc always be in the layouts folder?
  • How to configure karma and systemjs to run tests for angular ES6 transpiled by traceur into amd form
  • How to read image field from MSSQL with PHP
  • Unable to retrieve full text of title from JPEG metadata
  • HBase REST API Locking Rows
  • Dynamically update page based on an instance variable from Ajax
  • django - make datetimefield accept unix timestamp
  • Laravel lmutator $this->attributes return 'Undefined index: id'
  • CSS Grid, position absolute an element in a css grid item: IMPOSSIBLE
  • Extending the Django 1.11 User Model
  • retrieving data from url in iphone
  • how to get data attributes of dynamically generated element
  • Less Conflicting Session Manager for Zope 2
  • C# List of Panels
  • Error in installing package: fatal error: stdlib.h: no such file or directory
  • How to pass a value from ASP.NET MVC controller to ASP.NET webforms control inside MVC View?
  • Ubuntu and bcrypt
  • Is there a way to save the selected text and highlight it again once the page is refreshed?
  • ListItem.Attributes.Add not working
  • How to change the font size of a single index for UISegmentedControl?
  • Azure Cloud Service Web Role web pages do not load
  • swift auto completion not working in Xcode6-Beta
  • How would I use PHP exceptions to define a redirect?
  • Finding past revisions of files in StarTeam w/ .NET SDK / C#
  • jquery mobile loadPage not working
  • Cannot Parse HTML Data Using Android / JSOUP
  • How to get icons for entities from eclipse?
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Proper way to use connect-multiparty with express.js?
  • Load html files in TinyMce
  • C# - Getting references of reference
  • Angular 2 constructor injection vs direct access
  • JaxB to read class hierarchy