Develop Reference

Recieving a "injector:modulerr" error when trying to inject UI-Router

'use strict';
angular.module('confusionApp', ['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
// route for the home page
.state('app', {
url:'/',
views: {
'header': {
templateUrl : 'views/header.html'
},
'content': {
template : '<h1>To be Completed</h1>',
controller : 'IndexController'
},
'footer': {
templateUrl : 'views/footer.html'
}
}
})
// route for the aboutus page
.state('app.aboutus', {
url:'aboutus',
views: {
'content#': {
template: '<h1>To be Completed</h1>'
}
}
})
// route for the contactus page
.state('app.contactus', {
url:'contactus',
views: {
'content#': {
templateUrl : 'views/contactus.html',
controller : 'ContactController'
}
}
})
// route for the menu page
.state('app.menu', {
url: 'menu',
views: {
'content#': {
templateUrl : 'views/menu.html',
controller : 'MenuController'
}
}
})
// route for the dishdetail page
.state('app.dishdetails', {
url: 'menu/:id',
views: {
'content#': {
templateUrl : 'views/dishdetail.html',
controller : 'DishDetailController'
}
}
});
$urlRouterProvider.otherwise('/');
});
For the app.js file I am trying to use the UI-Router, I used bower to install the the angular dependencies for the UI-Router. They currently have the right path when I include them in the tags. I checked to make sure that the files were also there inside of the bower_components file. Yet when I run the program nothing shows up and the only error that I recieve is the "Uncaught Error: [$injector:modulerr]" error.

It's seem like angular can't find ui-route module,
remember include it in your html. Use something like that
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-ui-router/angular-ui-router.js"></script>
if you are using bower.
Sorry by my english. I hope this will be useful for you.

I had similar issue. What fixed it was to inject '$stateProvider' and '$urlRouterProvider' before using them in the config function such as:
angular.module('confusionApp', ['ui.router'])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
// .. and so on
}]);

Try load ui.router before you load a script:
<!-- UI-Router -->
<script src="angular-ui-router.js"></script>
<script src="yourscript.js"></script>

Is it possible to separate login functionality and its template from the ng-view directive?

I'm building an AngularJS application with angular-ui-router to handle my routing.
I'm wondering if it's possible to seperate the login functionality and it's template completely from the ng-view directive, so the rest of my layout isn't shown before the user have been authenticated.
This is the current setup:
Any ideas on how to do this?
Thanks in advance!

Yeah using Ui-Router declare create a different state like this :
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'app/views/login.html',
})
.state('stateNameIfLoggedIn', {
url: '/dashboard',
controller: 'DifferentController',
templateUrl: 'app/views/differentTemplate.html',
userLoggedIn: true
})
In your LoginController check if the user is currently login redirect him to different state like this:
//controller code starts
if(userLoggedIn === true){
$state.go('stateNameIfLoggedIn')
}

The thing is that with the routeProvier before show the route with the template + controller you can check something and then control the route.
'use strict'
intranet
.config ($routeProvider) ->
$routeProvider
.when '/page1',
templateUrl: 'views/page1.html'
controller: 'Page1Ctrl'
.when '/page2',
templateUrl: 'views/page2.html'
controller: 'Page2Ctrl'
.otherwise
redirectTo: '/'
.run ($rootScope,Token,$location) ->
$rootScope.$on '$locationChangeStart', ->
Token.check()
$rootScope.active_menu = $location.path()
My token provider with check the token.
'use strict'
intranet
.provider 'Token', ->
#$get = ($location,$http,$q,$rootScope) ->
check: ()->
if localStorage['access_token']
$rootScope.loginMade = true
else
$rootScope.loginMade = false
$location.path '/login'
And that's my index for show or not the content.
<header-app></header-app>
<sidebar-app></sidebar-app>
<!-- Add your site or application content here -->
<div ng-view="" class="container" ng-class="{container_login : loginMade == false}">
</div>
<footer-app></footer-app>

Progress bar with ngRoute in angularjs

Hi currently i am using ngRoute to fetch template from backend. but because of the size of template, it freezes till the template is loaded. What i want is a progress bar that shows the status of template as it is downloading .
I have found that ngProgress might be something that i want but i have not been able to integrate the same. Here is a small snippet for the ngRoute
App.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl : '/templates/home.html',
controller : 'landing'
})
.when('/login', {
templateUrl : '/templates/login.html',
controller : 'authCtl'
})
.when('/signup', {
templateUrl : '/templates/signup.html',
controller : 'authCtl'
})
.otherwise({
templateUrl : '/templates/404.html',
controller : 'mainController'
});
$locationProvider.html5Mode(true);
});

Have you tried angular-loading-bar?
https://chieffancypants.github.io/angular-loading-bar/

AngularJS directive templateUrl not loading into view

So I am using ui-view to route me to a partial.
//route.provider.js
(function() {
'use strict';
angular
.module('app')
.provider('RouteService', RouteService);
RouteService.$inject = ['$stateProvider', '$urlRouterProvider'];
function RouteService ($stateProvider, $urlRouterProvider) {
var service = {};
this.$get = function() { return service; };
this.initialize = function() {
$urlRouterProvider.otherwise('/login');
$stateProvider
.state('home', {
url: '/home',
controller: 'HomeController',
templateUrl: 'home/home.view.html',
controllerAs: 'viewModel'
})
.state('login', {
url: '/login',
controller: 'LoginController',
templateUrl: 'login/login.view.html',
controllerAs: 'viewModel'
})
//TODO Impliment the following partial pages...
.state('gensim', {
url: '/gensim',
templateUrl: 'general-simulation/simulation.view.html',
controller: 'TabsController',
controllerAs: 'tabs'
})
<...more routes...>
}
}
})();
The issue I am having is once it routes to
// general-simulation/simulation.view.html
I'd like it to use a custom directive to insert more html into the page.
Inside simulation.view.html I have this.
<div class="container">
<div class="row center">
<div class="col-xs-12">
<h1>General Simulation</h1>
<gs-tabs><h1>TEST!!!!</h1></gs-tabs>
</div>
</div>
</div>
The directive is constructed in
// tabs.directives.js
(function(){
'use strict';
angular
.module('app')
.directive('gsTabs', gsTabs);
function gsTabs () {
return {
restrict: "E",
templateURL: 'tabs.view.html'
};
}
})();
Finally, my tabs.view.html looks like this.
<h1>YOU HAVE ENTERED TABS PARTIAL</h1>
When I navigate to the page that displays simulation.view all I can see is:
General Simulation
TEST!!!!
So what am I doing wrong here. I checked for camelCasing and the page is not showing in errors. Any help would be greatly appreciated!
Update:
I viewed the network calls in chrome's dev tools.
simulation.view.html is being loaded but tabs.view.html isn't.
Request URL:http://sdc-stagt01/AngularJS/general-simulation/simulation.view.html
Request Method:GET
Status Code:200 OK
Remote Address:10.19.8.96:80
The file substructure is:
/general-simulation/tabs/tabs.controller.js
/general-simulation/tabs/tabs.directives.js
/general-simulation/tabs/tabs.view.html
/general-simulation/simulation.view.html

putting comment as answer
change templateURL to templateUrl

So entre's comment was a big help. That got chrome dev to start spitting out errors.
charlietfl Was on the right track with mentioning my file structure as well. I needed to change my directive to look like this:
templateUrl: 'general-simulation/tabs/tabs.view.html'
Thank you!

You have a typo here. templateUrl not templateURL
function gsTabs () {
return {
restrict: "E",
templateURL: 'tabs.view.html' // change this to templateUrl
};
}

Angular JS controller called twice (ng-controller)

I'm developping an ionic application and when using angular for login my controller is called twice,
I've looked through all the others similar questions but didn't find a solution .
The problem is even when I remove the ng-controller="LoginCtrl as lgnCtrl"
I get my controller called once but without two-way databinding.
here is my route file :
$stateProvider
.state('login', {
url: "/login",
views: {
'main': {
templateUrl: "app/user/loginView.html",
controller: "LoginCtrl",
controllerAs: "lgnCtrl"
}
}
})
$urlRouterProvider.otherwise('/login');
here is my controller
angular.module('starter.controllers')
.controller('LoginCtrl', LoginCtrl);
function LoginCtrl($state, $storage, $translate, $ionicPopup, LoginService, messageService) {
var lgnCtrl = this;
console.log("user dash 1zz");
return lgnCtrl;
}
and here is my views:
loginView.html :
<ion-view view-title="loginView" id="signinBlk">
<ion-content>
<div class="list list col span_1_of_2 " ng-controller="LoginCtrl as lgnCtrl">
</div>
</ion-content>
</ion-view>
index.html:
<body ng-app="starter">
<ion-nav-view name="main"></ion-nav-view>
</body>

if you already define your controller in route you dont need to define controller in html template remove the ng-controller attribute with value form html template then run it will run just once

Instead of having this
ng-controller="LoginCtrl as lgnCtrl"
in html, we can have this in the controller when the route is defined with a controller, for example in the controller, it will go like this
$routeProvider
.when("/", { templateUrl: "views/abc.html", controller: "LoginCtrl as lgnCtrl", caseInsensitiveMatch: true });
it worked like a charm
the functions in the controller are only called once.