How does app.config() work?

50 views
Skip to first unread message

Mariusz Wilk

unread,
Apr 28, 2015, 1:44:43 PM4/28/15
to ang...@googlegroups.com
I'm new to programming and I'm trying to built my first simple website but I'd like to use some Angular.js.
So when I click a button on the navbar I'd like the view and the controller to change. The way I understood it from the Codecademy course I could 
use app.config(function($routeProvider){...}) and depending on what's added to the Url the view and controller changes (but the navbar doesn't).
That way I define a clear link between a Url and content. But where's the link between the navbar button and the Url? How do I bind these two?  

Luke Kende

unread,
Apr 29, 2015, 2:37:30 AM4/29/15
to ang...@googlegroups.com
You don't, it will make the connection for you.  Just put ng-view somewhere in the html below the navbar, the link click will be caught by angular, then look at your config and decide what template/controller to load at the point of ng-view element.  (consider using html5mode: $locationProvider.html5Mode(true).hashPrefix('!');)

<body ng-controller='MainCtrl'>
<nav><a href="/home"></a><a href="/contact"></a?</nav>
<div ng-view></div>
</body>

$routeProvider
.when('/home', {
  templateUrl: '/partials/home.html',
  controller: 'HomeCtrl'
})
.when('/contact', {
  templateUrl: '/partials/contact.html',
  controller: 'HomeCtrl'
});

So if you were to use an actual <button> element, just change the location...

<button ng-click="goto('/home')">Home</button>

.controller('MainCtrl', ['$scope', '$location', function($scope, $location){
  $scope.goto = function(link){
    $location.path(link); //this just changes the URL for you the same as clicking a link

Mariusz Wilk

unread,
May 2, 2015, 2:13:43 PM5/2/15
to ang...@googlegroups.com
Thx! 
So I ended up using the following to get it to work:

My index.html includes:
<li><a href="/#/games">Games</a></li>

and my config() function includes:
.when('/games', {
     controller: 'Games',
     templateUrl: 'controllers/games.html'
})

It works but as you can see I need to use a # in my href since it simply appears in the url on its own.
I saw a suggestion to add the following:
app.config(['$locationProvider', function($locationProvider){
  $locationProvider.html5Mode(true).hashPrefix('!');
}]);

I did but as a separate config() function. And it doesn't work. Should I include this into my main config()?
app.config(function($routeProvider){
$routeProvider
.when('/', {
controller: 'Posts',
templateUrl: 'controllers/posts.html'
})
.when('/games', {
   controller: 'Games',
templateUrl: 'controllers/games.html'
})
});

If so, how?



Luke Kende

unread,
May 2, 2015, 2:45:08 PM5/2/15
to ang...@googlegroups.com
There should only be one config().  You can mass multiple dependencies into it... that's what the Array[] syntax is.  Notice the array passed into config() has many string-names to reference each provider needed, then the variable names are passed as arguments into the function.   So anytime you need more dependencies, just add it in both spots.

app.config(['$routeProvider','$locationProvider', function($routeProvider, $locationProvider){
  
  $routeProvider.when('/home'{ ... }); //all the route stuff... shortened for example

  $locationProvider.html5Mode(true).hashPrefix('!');

}]);

Now that you've set html5Mode, you shouldn't have to add anchors to your links:

<a href="/games">Games</a>

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/VjnEoJw2URI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Michał Wasiluk

unread,
May 2, 2015, 4:23:56 PM5/2/15
to ang...@googlegroups.com
@Luke Kenede -  Why there should be only one config block per module? 

Angular applies configuration blocks in the same order they were registered  (https://code.angularjs.org/1.3.15/docs/guide/module#configuration-blocks) 
I prefer to split large config blocks for code clarity.

Regards

You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.

Luke Kende

unread,
May 2, 2015, 5:15:37 PM5/2/15
to ang...@googlegroups.com
Michael, I hear you, but it's probably not a good code pattern for a newbie.  Understanding that you can add more dependencies vs creating a new config function for each provider is more the point here.  I believed that to be the issue, but now I see maybe it's not.  
Reply all
Reply to author
Forward
0 new messages