AngularJS ui-router not rendering view - javascript

I've been struggling with getting my AngularJS app to display a view based on a template.
The issue: ui-router seems to be correctly "routing" all the files, because the template file (landing.html) is being delivered to the console as an object (see console.log(result) in main.js below). Nevertheless, the template file is not being displayed in the app where <div ui-view></div> is supposed to be.
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
##include('partials/head.html')
<body>
##include('partials/header.html')
<div ui-view></div>
##include('partials/footer.html')
</body>
</html>
main.js:
angular.module('myApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/',
controller: 'LandingCtrl as landing',
templateUrl: 'templates/landing.html'
});
$urlRouterProvider.otherwise('/landing');
}])
.run(['$http', '$templateCache', function($http, $templateCache) {
$http.get('templates/landing.html', {
cache: $templateCache
}).then(function(result) {
console.log(result);
});
}]);
My template file landing.html:
<main class="content">
##include('partials/search.html')
<h2>Show me the contents of landing.html!</h2>
</main>
I'm using grunt and made sure to have it both watch and copy the /templates into /dist. Overall the Angular app is behaving correctly (no ng errors in the console).
Also, if instead of specifying a template file (templateURL), I simply use template: <h2>Show me the contents of landing.html!</h2> in main.js then this is rendered in the view. There's something preventing a file from being rendered.
Question: Given ui-router is correctly finding and routing all files, does anyone have an idea as to why the app is simply not displaying the template file?
Edit Here is LandingCtrl.js:
(function() {
function LandingCtrl($scope, $location, $anchorScroll) {
$scope.goTo = function(id) {
$location.hash(id);
console.log($location.hash());
$anchorScroll();
};
}
angular
.module('myApp')
.controller('LandingCtrl', ['$scope', '$location', '$anchorScroll', LandingCtrl]);
})();

in your main.js file change the url of Landing State as below:
angular.module('myApp', [
'ui.router'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('landing', {
url: '/landing',
controller: 'LandingCtrl as landing',
templateUrl: 'templates/landing.html'
});
$urlRouterProvider.otherwise('/landing');
}])
.run(['$http', '$templateCache', function($http, $templateCache) {
$http.get('templates/landing.html', {
cache: $templateCache
}).then(function(result) {
console.log(result);
});
}]);

Related

Controller not registering when using nested view

My app was working fine until I changed routing from ngRoute to ui-Router so I could use power of views within views. Now the controllers of the views are not being registered. My folder structure is like this:
index.html
<html ng-app="myApp">
<body>
<div ui-view></div>
<script src="js/app.module.js"></script>
<script src="js/components/foodCategories/foodCategoriesController.js"></script>
<!-- other controllers -->
<script src="js/app.route.js"></script>
</body>
</html>
app.module.js
angular.module('myApp', ['ui.router'])
app.route.js
angular.module('myApp')
.config(['$stateProvider', '$urlRouterProvider', statesManager])
function statesManager($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/')
$stateProvider
.state('profile', {
url: '/profile',
views: {
'': {
templateUrl: '/js/components/profile.html'
},
'foodCategories#profile': {
templateUrl: '/js/components/foodCategories/foodCategories.html',
controller: 'FoodCategoriesController'
}
}
})
}
profile.html
<div ui-view="foodCategories"></div>
foodCategories.html
<div id="foodcategories" ng-controller="FoodCategoriesController">
<!-- other stuffs -->
foodCategoriesController.js
(function () {
angular
.module('myApp')
.controller('FoodCategoriesController', controlFunc)
function controlFunc ($scope) {
....my stuffs...
}
})()
I am not sure why the controller is not being registered. The controller file is loaded when I check Networks in Developers Tools but I get Error: [$controller:ctrlreg] on all controllers.
Thank You :)
You dont need ng-controller="FoodCategoriesController". Remove it.

Controllers in seperate files in Ionic and include order

I started to write an Ionic application and started to write my views and controllers. I want to use a tab-layout.
For clarity i want to seperate my controllers in different files.
My controllers-Folder:
controller.js
main.js
tabs.js
controller.js contains:
angular.module('myApp.controllers', []);
main.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js contains:
angular.module('myApp.controllers', ['myApp.services','ionic'])
.controller('TabsCtrl', function ($scope) {
});
In the app.js i specify my routings:
.state('tab', {
url: '/tab',
abstract: true,
templateUrl: 'app/templates/tabs.html',
controller: 'TabsCtrl'
})
.state('tab.main', {
url: '/main',
views: {
'tab-main': {
templateUrl: 'app/templates/main.html',
controller: 'MainCtrl'
}
}
})
And finally in my index.html i include all used files in the header:
<script src="app/app.js"></script>
<!-- Controller-Definition -->
<script src="app/controller/controller.js"></script>
<script src="app/controller/tabs.js"></script>
<script src="app/controller/main.js"></script>
My problem is that in the browser i get the error:
Argument 'TabsCtrl' is not a function, got undefined
and i don't know why its not working!
when i change the order of the tabs.js und main.js in the index.html file
i get:
Argument 'MainCtrl' is not a function, got undefined
Could someone give me help on this problem? it's probably is something small and simple but i don't get it :-)
You overwrite 'myApp.controllers' module in each file. Try this:
controller.js:
angular.module('myApp.controllers', ['myApp.services','ionic']);
main.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function ($scope) {
$scope.name = "Test";
});
tabs.js
angular.module('myApp.controllers')
.controller('TabsCtrl', function ($scope) {
});

text in controller is never logged/never ran Angular Rails

I'm building an application in Rails and I'm using Angular for part of the front end, generating views based on data provided in a json file. I've been following this tutorial, but I can't seem to get my controller to run and I have no idea why. Can anyone help me out?
Sample link: http://localhost:3000/events/events1
events.coffee.erb
app = angular.module('EventsApp', ['ui.router', 'templates'])
app.config [
'$stateProvider'
'$urlRouterProvider'
($stateProvider, $urlRouterProvider) ->
$stateProvider.state 'events',
url: '/events/{id}'
templateUrl: 'templates/_event.html'
controller: 'EventsCtrl'
]
app.controller 'EventsCtrl', [
'$scope'
'$stateParams'
($scope, $stateParams) ->
console.log $stateParams //this never shows up
console.log 'Sup' //this never shows up
$scope.greeting = 'Yo' //neither does this
]
events.html.erb
<div ng-app="EventsApp">
Yo! //this shows up, but not {{greeting}}
{{greeting}}
<ui-view></ui-view>
</div>
_event.html
<script type="text/ng-template" id="/event.html">
<div>
{{greeting}}
Yo!
</div>
</script>
Rails routes file:
get "events/*path" => "events#events"
Rails events_controller.rb
class EventsController < ApplicationController
layout "application"
def events
end
end
File layout:
--app
-----assets
-------javascripts
----------templates
------------_event.html
----------events.coffee.erb
------views
--------events
----------events.html.erb
Your angular code is poorly structured. I think you are mixing up your Javascript syntax with your Ruby syntax...
Try something closer to this:
angular.module('EventsApp', ['ui.router', 'templates'])
.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$stateProvider.state('events', {
url = '/events/{id}',
templateUrl: 'templates/_event.html',
controller: 'EventsCtrl'
}
}
])
.controller('EventsCtrl', [
'$scope', '$stateParams'
function($scope, $stateParams) {
console.log($stateParams);
console.log('Sup')
$scope.greeting = 'Yo';
}
]);

AngularJS DI with different modules

I am having some issues trying to use the Angular dependency injection with different modules. At the moment, I have the following. In my index.html, the files are loaded in the following order (end of <body> tag):
network.js
authentication.js
login.js
app.js
network.js
angular.module('services.network', [])
.factory('Network', ['$http', '$state', function ($http, $state) { ... }]);
authentication.js
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$state', 'Network', function ($state, Network) { ... }]);
login.js
angular.module('controllers.login', [])
.controller('LoginCtrl', ['$scope', function ($scope) { ... }]);
app.js
var app = angular.module('parkmobi', [
'ngRoute',
'services.network',
'services.authentication',
'controllers.login'
]);
app.run(['$rootScope', function ($rootScope) {
$rootScope.$on('$viewContentLoaded', function () {
$(document).foundation('reflow');
});
}])
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
});
}]);
Up until this point, everything seems to be quite happy. Now, however, I want to use the Authentication service in the LoginCtrl, which I would have thought is done as follows:
login.js
angular.module('controllers.login', ['services.authentication'])
.controller('LoginCtrl', ['$scope', 'Authentication', function ($scope, Authentication) { ... }]);
However, this causes the following injection error:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=%24stateProvider%20%3C-%20%24state%20%3C-%20Authentication
R/<#http://localhost/testapp/vendor/angularjs/angular.min.js:6:417
Error came because you've injected $state provider in your Authentication factory, without having ui.router module in app.js parkmobi module.
It should use $route instead of $state as your are doing your route in angular-router.
angular.module('services.authentication', ['services.network'])
.factory('Authentication', ['$route', 'Network', function ($route, Network) { ... }]);
Or if you want to use ui-router then you need to use $stateProvider while registering states & ui.router module should be include in your app.

What's the best way to determine a route's template based on $cookies value in AngularJS?

I'd like the root URL, /, of my AngularJS app to display a template based on cookie value. For example, when a login cookie is present display dashboard. When login cookie is absent, display a login screen.
I tried to inject $cookies to app.config to determine the template property of $route based on it, but that didn't work.
var myApp = angular.module('myApp', ['ngRoute', 'ngCookies']);
myApp.config([
'$routeProvider',
'$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: function() {
// read cookies here?
return '../../connect.html';
},
controller: "getAuthUrl"
});
$locationProvider.
html5Mode(true).
hashPrefix('!');
}
]);
Answering my own question...
After further investigation, I found out that $routeProvider is not what I should be using. $routeProvider is for serving templates based on URL routes. What this problem needed is the ui-router module, which is an official AngularJS module.
Instead of URLs, ui-router lets you specify page content based on "state". In my situation, I have a "loggedin" state and a "dashboard" state. Here's how I have implemented the solution:
var myApp = angular.module('myApp', ['ngCookies', 'ui.router']);
myApp.config([
'$stateProvider',
'$locationProvider',
function ($stateProvider, $locationProvider) {
$stateProvider.
state('login', {
template: '<h1>Login now.</h1>'
}).state('dashboard', {
template: '<h1>You are logged in. Welcome.</h1>'
});
$locationProvider.
html5Mode(true).
hashPrefix('!');
}
]);
myApp.controller('mainCtrl', [
'$scope',
'$state',
'$cookies',
function($scope, $state, $cookies) {
// You can read cookies here
if (true) {
console.log($cookies);
$state.go('dashboard');
}
else {
$state.go('login');
}
}
]);
And then the HTML is
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<script src='js/lib/angular.js'></script>
<script src='js/lib/angular-ui-router.js'></script>
<script src='js/lib/angular-cookies.js'></script>
<script src="js/app.js"></script>
</head>
<body ng-controller='mainCtrl'>
<div class="container" ui-view></div>
</body>
</html>
You can read all about ui-router in its wiki
Note: You have to use ui-router v0.0.2 at least. v0.0.1 won't work.

Categories

Resources