AngularJS codes structure. Are they any difference?

Question

AngularJS codes structure. Are they any difference?

New in angularJS, I would like to know what are the pros and cons between the codes below? Which is recommended to use?

$routeProvider.when('foo', {
    templateUrl: 'foo.html',
    controller: fooCtrl

    function fooCtrl() {
        //something here
    }
});

or

$routeProvider.when('foo', {
    templateUrl: 'foo.html'
});

app.controller("fooCtrl", function() {
    //something here
});

//in html
<div ng-controller="fooCtrl"></div>

javascript
angularjs

Answer 1

I prefer the second approach, and use it when developing our application. It is the elegant way of coding , seperating your routes-configuration, module-wiring etc from the Controllers. we can write the routes-config in a main file say app.coffee [I use coffeescript] defining like

routesConfig = ($route) ->
    $route.when('/employees',
        {templateUrl: 'employee.employeeView.html'})

Define the routesconfig and wiring modules [eg: employee.employeeController] here.

modules = ['employee.employeeController', 'user.userController']

you can create, start your angular application from here,

m = angular.module('app', modules)
m.config['$route', routesConfig]

Now you can specify the Controllers seperately, say in employeeController.coffee

name = 'employee.employeeController'
mod = angular.module(name, [])
mod.controller(name, [
    '$scope'
    '$log'
    ($scope, $log) ->
          $scope.name = 'java'

In your View, say employeeView.html

<div ng-controller="employee.employeeController">
 <div class ="info">
  Name is {{name}} 
</div>

Basically we seperated Controllers, View , application configuration from each other.

Answer 2

To add something specific to your question,

If you are using the first approach, then probably you are using your controller as a Route Controller, and in second approach , it is a View Controller. In both cases, controller will be instantiated for the mentioned route.

For instance, I have a main page index.html and i am adding many views (ng-view) in the basic html template. If you have two different sections of view in this template say 'section1' and 'section2' and each of them are included with ng-view, then you probably need two different controllers, and is good to define them using the second approach. Use this type of controller to initialize the scope with data,functions,watches etc and refer the controller in your view using ng-controller.

If you have a section, say 'section1' [representing the main html page] that is included via ng-view which encapsulates both section1 and section2, then that view needs route controller.

Do not use both the approaches for a single view/route as it would result in creating two instances of same controller for the same route.

I like to add two links here which eloborates this (your query) and address this query (problem in defining controllers in two places)

https://groups.google.com/forum/?fromgroups=#!topic/angular/52zE0ibOAgk

AngularJS can a $on method be called more than once for a single $broadcast?