06 Creating Notes route controller and view

Notes

Wow. How have we gone this far without looking at app.js?

app/app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Let's give our app a better name than "myApp". Do a case-sensitive find-and-replace across the entire project, and replace "myApp" with "notely".

Your new app.js should look like this:

app/app.js

'use strict';

// Declare app level module which depends on views, and components
angular.module('notely', [
  'ngRoute',
  'notely.view1',
  'notely.view2',
  'notely.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Now let's break it down.

This file defines the main Angular module and route provider. The first argument to angular.module is the name of the app, and the second argument is an array containing the names of dependencies to this module, as strings. This is Angular's dependency injection mechanism.

Read More: AngularJS Dependency Injection Demystified

So this module is already setup to "depend" on the ngRoute module, as well as Notely.viewX modules that are loaded in separate javascript files. (You can see they are sourced with <script> tags in the HTML Layout.)

Below that, is a method named config that is chained to the module call. This injects the Angular $routeProvider into an anonymous function with instructions to redirect to one of our routes/paths, if no other routes (from other modules) match it first. This is a "catch-all" route, and it has been set to send visitors to /view1 if a route isn't given.

For our app, a reasonable default would be a notes page. Let's point the catch-all route to notes, which we'll create shortly:

Inject a dependency for the Notes module/controller that we'll soon create, and update the catch-all route:

app/app.js

angular.module('notely', [
...
  'notely.version',
  'notely.notes'
...
  $routeProvider.otherwise({redirectTo: '/notes'});
...

Make a new directory for our new module, app/notes, and add a file named notes.js under it:

app/notes/notes.js

'use strict';

angular.module('notely.notes', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/notes', {
    templateUrl: 'notes/notes.html',
    controller: 'NotesController'
  });
}])

.controller('NotesController', [function() {

}]);

Add a file app/notes/notes.html:

app/notes/notes.html

Welcome to Notely.

Specifying the dependencies to AngularJS is not sufficient to actually get those scripts sent to browsers. We must require the notes controller in index.html:

app/index.html

  <script src="notes/notes.js"></script>

Now, if you visit the root url (**http://localhost:8000/app), you should be taken to /notes and see the welcome message from app/notes/notes.html.

Commit.

Next: Loading Notes via an existing API