AngularJs: Implemented IIFE in using ui router

Question

I'm trying to implement iife and this style to seperate my files in angularjs so I have config.js that will use ui.router that was implemented this way

//config.js
(function (module) {
    "use strict";
    module.config([
        "$stateProvider","$urlRouterProvider","$locationProvider",
    function ($stateProvider, $urlRouterProvider,$locationProvider) {

            $urlRouterProvider.otherwise("/Views/Profile.html");

            $stateProvider
                    .state("profile", {
                        url: "/",
                        templateUrl: "Profile.html",
                        controller: "profileController as vm"
                    })
                    .state("profiledetails", {
                        url: "ProfileDetails",
                        templateUrl:"ProfileDetails.html",
                        controller: "profileController as vm"
                    })

        }
    ])

})(angular.module("appMain", ["ui.grid","ui.router","profileService"]));

and I have this profile.html which has a link to profiledetail.html

<!DOCTYPE html>
<html ng-app="appMain">

<head>
  <title></title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />

  <link href="../Content/ui-grid.css" rel="stylesheet" />
  <link href="../Content/bootstrap.min.css" rel="stylesheet" />

</head>

<body class="container-fluid">
  <div ng-controller="profileController">
    <div id="profileGrid" ui-grid="gridOptions"></div>
  </div>
  <script src="../scripts/angular.js"></script>
  <script src="../scripts/angular-ui-router.js"></script>

  <script src="../scripts/angular-resource.js"></script>
  <script src="../scripts/ui-grid.min.js"></script>
  <script src="../scripts/App/config.js"></script>
  <script src="../scripts/App/Profile/profileService.js"></script>
  <script src="../scripts/App/Profile/profileController.js"></script>

  <script src="../scripts/App/helper.js"></script>

  <a href="#" ui-sref="profiledetails" class="btn btn-primary">profile details</a>
  <div ui-view></div>
</body>

</html>

And this is my profilecontroller.js

   (function(module) {
      "use strict";
      module.controller("profileController", ["$scope", "profileService", profileController]);

      function profileController($scope, profileService) {
        var vm = this;
        var scope = $scope;
        vm.profiles = getProfiles;
        var onProfiles = [{
          firstName: "Juan",
          lastName: "Dela Cruz"
        }, {
          firstName: "Andres",
          lastName: "Cruz"
        }];

        function getProfiles() {
          profileService.getProfiles()
            .then(onProfiles(result));
        };
        scope.gridOptions = {
          enableSorting: true,
          columnDefs: [{
            name: "firstName",
            field: "firstName"
          }, {
            name: "lastName",
            field: "lastName"
          }],
          data: onProfiles
        };
      }
 }(angular.module("appMain")));

In running the code and upon click to the link theres an error in chrome saying "Error: Could not resolve 'profiledetails' from state ''". Not sure if my implementation of iife caused this issue. Please someone guide me to the correct path.

You need to go to a state first right from the begining : stackoverflow.com/a/41781397/2829204 — CozyAzure
– CozyAzure, Commented Jan 25, 2017 at 7:47
I tried the 2 ways on entering the state that was mentioned on the post but the error still occur. but as I said on my reply to @Matthew Cawley, when I removed ui.router as dependency in the controller it remove the error but nothing happen, it did not redirect. })(angular.module("appMain", ["profileService", "ui.grid"])); — Vincent Echavez
– Vincent Echavez, Commented Jan 25, 2017 at 8:26

Matthew Cawley · Accepted Answer · 2017-01-25 10:22:14Z

1

You don't need to re-inject the module's dependencies when creating the profileController, and the iife parameter should immediately follow the closing curly bracket, so:

})(angular.module("appMain", ["profileService", "ui.grid","ui.router"]));

can become:

}(angular.module("appMain")));

This way you're retrieving the previously created module, rather than creating a new one. See the Creation versus Retrieval section of the docs for a note on this.

Also onProfiles is an array (not a function), so I think you need to change this:

function getProfiles() {
    profileService.getProfiles()
        .then(onProfiles(result));
    };

To something more like this:

function getProfiles() {
    profileService.getProfiles()
        .then(function(result){
             // do something with the "onProfiles" array here.
        });
    };

edited Jan 25, 2017 at 10:22

answered Jan 25, 2017 at 7:50

Matthew Cawley

2,8281 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vincent Echavez Over a year ago

I actually tried it but it did not display my ui grid and its data. One thing I notice is that when I tried to remove ui.router only like })(angular.module("appMain", ["profileService", "ui.grid"])); The error disappear but it did not redirect to profiledetails html

Matthew Cawley Over a year ago

Updated answer suggesting a slight amendment to the promise's callback function (assuming you are returning a promise from the service).

Vincent Echavez Over a year ago

I agree with you, it supposed to be using a service but for now it just using a variable onProfiles for the data of ui grid.

Vincent Echavez Over a year ago

looks like its really an issue on how I implemented my dependencies, i put all my dependencies in config.js })(angular.module("appMain", ["ui.grid","ui.router","profileService"])); while in controller I'll just need to this }(angular.module("appMain"))); and it did work properly, now it redirect to profiledetails. I updated my post for the code. Please do advice if I still need to modify something to improve my code. Thanks for the help.

Vincent Echavez Over a year ago

no, the array is a temporary value just to put data on the grid, later i'll use the result in a function to call the service and array values will be removed.

|

Salih Şenol Çakarcı · Accepted Answer · 2017-01-25 07:47:44Z

1

You use the same controller in your profile detail which is profileController

So in your html you should add

<a href="#" ui-sref="profiledetails" class="btn btn-primary">profile details</a>

<div ui-view></div>

So that routing to profile detail can process

answered Jan 25, 2017 at 7:47

Salih Şenol Çakarcı

2,33015 silver badges23 bronze badges

1 Comment

Vincent Echavez Over a year ago

yeah sorry I forgot to include that on my post. ill update my post. The error still occur even i have that.

Collectives™ on Stack Overflow

AngularJs: Implemented IIFE in using ui router

2 Answers 2

7 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Linked

Related