angularjs - ui-router with global controllers not working -


i'm pretty amateur in angularjs, ui-router , mvc. have 2 views , controllers 2 pages of spa.

i'm using mvc, web api, angularjs , ui-router in project.

when run code, doesn't work. , error shown in browser console:

enter link description here

this code:

index.cshtml:

<!doctype html> <html ng-app="anbaruniversalsystemapp"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>sample</title> </head> <body>  <a ui-sref="drafttype">draft type</a> <a ui-sref="inv">inv</a>  <div class="container body-content">     <div ui-view></div>     </div>  @scripts.render("~/bundles/jquery") @scripts.render("~/bundles/bootstrap") @scripts.render("~/bundles/angularjs") @scripts.render("~/bundles/ui-router") @scripts.render("~/bundles/anbaruniversalsystemapp")

inv.cshtml:

<div ng-controller="invctrl"> {{invname}} </div>

drafttype.cshtml:

<div ng-controller="drafttypectrl"> {{drafttypename}} </div>

anbaruniversalsystemapp.js:

angular.module('anbaruniversalsystemapp', ['ui.router', 'ui.bootstrap']); var app = angular.module('anbaruniversalsystemapp', []); var configfunction = function ($stateprovider, $locationprovider, $controllerprovider) { $locationprovider.hashprefix('!').html5mode(true); $controllerprovider.allowglobals(); $stateprovider .state('inv', {     url: '/payeh/inv',     templateurl: 'payeh/inv.cshtml',     controller: 'invctrl' }) .state('drafttype', {     url: '/payeh/drafttype',     templateurl: 'payeh/drafttype.cshtml',     controller: 'drafttypectrl' }) } configfunction.$inject = ['$stateprovider', '$locationprovider', '$controllerprovider'];  app.config(configfunction); app.controller('invctrl', invctrl); app.controller('drafttypectrl', drafttypectrl);

invctrl.js:

function invctrl($scope) {     $scope.invname = "first inv"; }  invctrl.$inject = ["$scope"];

drafttypectrl.js:

function drafttypectrl($scope) {     $scope.drafttypename = "first inv"; }  drafttypectrl.$inject = ["$scope"];

routeconfig.cs:

namespace anbaruniversalsystem {     public class routeconfig     {         public static void registerroutes(routecollection routes)         {         routes.ignoreroute("{resource}.axd/{*pathinfo}");          routes.maproute(             name: "inv",             url: "payeh/inv",             defaults: new { controller = "payeh", action = "inv" });          routes.maproute(             name: "drafttype",             url: "payeh/drafttype",             defaults: new { controller = "payeh", action = "drafttype" });          routes.maproute(             name: "default",             url: "{*url}",             defaults: new { controller = "home", action = "index",             id = urlparameter.optional }         );     } } }

well, don't have access code, can guess. error saying $stateprovider has failed load. there problem dependencies.

change anbaruniversalsystemapp.js first 2 lines below , check if fixes error :

from :

angular.module('anbaruniversalsystemapp', ['ui.router', 'ui.bootstrap']); var app = angular.module('anbaruniversalsystemapp', []);

to :

var app = angular.module('anbaruniversalsystemapp', ['ui.router', 'ui.bootstrap']);

Comments

Post a Comment