I have a controller class named "BaseCtrl". This controller class takes care of global functions for the default/root HTML page "index.html". As my understanding of TypeScript (I am a TypeScript newbie), to use a controller for some HTML view, there are 3 things to do:
1) On the HTML view, I don't need to call controller explicitly. That is I don't need to use ng-controller attribute.
2) For 1) to be working, in route class of my application, I need to use a special property like "controllerAs" to specify the controller's alias (e.g controllerAs : "bc".
For example,
$routeProvider
.when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" });
3) Because $scope is not used, to access all stuffs (methods, properties) of controller class, I have to use the the controller's alias like "bc" from 2). For example, ng-model="bc.FirstName" etc.
My question: I have controller "BaseCtrl" as mentioned above. But this controller is not tied with any route in my application route class (please see my below route class codes). That means I don't have an alias for that controller. So, how can I call or access the controller's stuffs on the default/root "index.html"? Do I have to use "$scope" in the controller class' codes the same as in traditional non-TypeScript codes so that I do not worry about using controller's alias in view? I am using TypeScript for Angular codes.
Thank you for your help.
index.html codes:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS With TypeScript In Visual Studio</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="scripts/angular.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app/app.js"></script>
<script src="app/Constants/Constants.js"></script>
<script src="app/routes.js"></script>
<script src="app/models/AuthToken.js"></script>
<script src="app/services/SessionSrvc.js"></script>
<script src="app/controllers/BaseCtrl.js"></script>
</head>
<body ng-app="angularWithTs">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Angular URl-Based routing</a>
</div>
<ul class="nav navbar-nav">
<li>Login</li>
<li>Register</li>
<li>Presidents</li>
<li>Contacts</li>
<li>Logout</li>
</ul>
<ul class="nav navbar-nav pull-right">
<li>
<a disabled><span class="label label-success pull-right" ng-if="bc.loggedIn()">Logged In</span> </a>
</li>
</ul>
</div>
</nav>
<div>
<div ng-view></div>
</div>
</div>
</div>
</div>
</body>
</html>
route class codes:
/// <reference path="../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../scripts/typings/angularjs/angular-route.d.ts"/>
module angularWithTs {
"use strict";
function routes($routeProvider: ng.route.IRouteProvider, $locationProvider: ng.ILocationProvider) {
$routeProvider
.when("/login", { controller: "LoginCtrl", templateUrl: "app/views/login.html", controllerAs: "lc" });
$routeProvider
.when("/logout", { controller: "LogoutCtrl", templateUrl: "app/views/logout.html", controllerAs: "loc" });
$routeProvider.otherwise({ redirectTo: "/" });
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
}
routes.$inject = ["$routeProvider", "$locationProvider"];
angular.module("angularWithTs").config(routes);
}
BaseCtrl class codes:
module angularWithTs {
"use strict";
export class BaseCtrl {
static $inject = ["$location", "SessionSrvc"];
_sessionSrvc: SessionSrvc;
_$location: ng.ILocationService; // http://notebookheavy.com/2013/05/22/angularjs-and-typescript/
constructor($location: ng.ILocationService, sessionSrvc: SessionSrvc) {
this._sessionSrvc = sessionSrvc;
this._$location = $location;
}
loggedIn(): boolean {
return this._sessionSrvc.getToken() != "undefined";
}
OnLogoutButtonClicked() : void {
// do some stuffs
}
}
angular.module("angularWithTs").controller("BaseCtrl", BaseCtrl);
}
There is two ways to link controller with partial:
Using route, and you can define controllerAs property in the route object.
By defining ng-controller directive on some element. In this case you still can define alias. Example : <div ng-controller="BaseCtrl as vm">{{vm.name}}</div> So vm here an alias.
Of course case 1 is better practise, especially in case TypeScript usage. But choose which is better fit for your app.
Related
As a part of learning process, I am roaming around angular js routing concepts. For this, I created one inner folder inside app with two sample test html pages ..
When i run the app it should load first page from that folder but it does not not happening .. I am not sure where i have done wrong in this code...
I am getting error like this 'angular.js:4640Uncaught Error: [$injector:modulerr]'
Below is my controller code
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope','$log', function($scope,$log) {
}]);
myApp.controller('secondController', ['$scope','$log', function($scope,$log) {
}]);
and html code goes here
<!DOCTYPE html>
<html lang="en-us" ng-app="myApp">
<head>
<title>Learn and Understand AngularJS</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta charset="UTF-8">
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
html, body, input, select, textarea
{
font-size: 1.05em;
}
</style>
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home</li>
<li><i></i>second</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
</body>
</html>
and for main.html
<h1>this is main page</h1>
and for second.html
<h1>this is second page</h1>
Would any one please help on this query,
many thanks in advance..
Things seem to be working fine for me. See the working example below:
(Just change the href of Home link to #/)
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'Pages/main.html',
controller: 'mainController'
})
.when('/second', {
templateUrl: 'Pages/second.html',
controller: 'secondController'
})
});
myApp.controller('mainController', ['$scope', '$log',
function($scope, $log) {}
]);
myApp.controller('secondController', ['$scope', '$log',
function($scope, $log) {}
]);
html,
body,
input,
select,
textarea {
font-size: 1.05em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- load angular via CDN -->
<script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-route.min.js"></script>
<div ng-app="myApp">
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">AngularJS</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i>Home
</li>
<li><i></i>second
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div ng-view></div>
</div>
<script id="Pages/main.html" type="text/ng-template">
<h1>this is main page</h1>
</script>
<script id="Pages/second.html" type="text/ng-template">
<h1>this is second page</h1>
</script>
</div>
Edit
Don't directly serve your Angular code using file:/// protocol. It will not be able to make request to load resources. Use any simple lightweight servers, for example:
Python Simple server for Linux based platforms (python -m SimpleHTTPServer)
Mongoose for Windows
replace:
<li><i class="fa fa-home"></i>Home</li>
with
<li><i class="fa fa-home"></i>Home</li>
and it should work fine. i checked.
That error means angular could not find the module you're referring to. is your script able to connect to internet and can you make sure the angular cdn is not blocked by your firewall?
you could try to download the angular-route file and reference in your html and see if it works.
I checked Single Page Apps with AngularJS Routing and Templating tutorial
and found Pretty URLs in AngularJS: Removing the # tutorial for remove # tag from URL. I did all the things but I can't get the app working. It would be great help someone can help on this. These are my codes,
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<!-- define angular app -->
<html ng-app="scotchApp">
<head>
<base href="/">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<!-- define angular controller -->
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
After the first tutorial my URL become
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#/
but after Second one URL becomes
file:///C:/Users/MAX/Desktop/angular/AngularJS%20Routing/index.html#%2F
and links stop woking
It's easy to solve.
You just need to inject ($locationProvider) where you declare your module and put this code ($locationProvider.html5Mode(true)) inside the function.
Something like this.
var myApp = angular.module('myApp',[]);
myApp.config(function ($locationProvider){
$locationProvider.html5Mode(true);
});
You must not directly open angular's html files in your browser. You should rather start a simple http server for the same. The easiest way to do so,
Assuming you have Python 2.7 installed on your filesystem:
python -m http.server <portNo>
for serving the directory contents to http://localhost:<portNo>/
Then you also will be able to navigate to http://localhost:<portNo>/about and http://localhost:<portNo>/contact
Example:
Navigating to your project's main directory and then running python -m http.server 8888 would serve files to http://localhost:8888/ , where the routing should work correctly.
First, remove the hashmark from your <a href="#...">s, like <a href="about"> or <a href="/about">. I also suggest you to use ng-href instead of href
Second, use some local http server, like python -m http.server to serve your files.
Note: If you wisht to use html5 mode, and want your app to work well when the user does not land on index.html, but on another route, you must configure the http server to serve index.html on all of your routes. We do it usually by serving index.html directly instead of returning 404.
Finally with the help of above answers I figured to find an answer. (I used wamp server as local web server)
My sile structure
angulRoute
- script.js
- index.html
- pages
----- home.html
----- about.html
----- contact.html
// script.js
// create the module and name it scotchApp
// also include ngRoute for all our routing needs
var scotchApp = angular.module('scotchApp', ['ngRoute']);
// configure our routes
scotchApp.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/angulRoute/', {
templateUrl: 'pages/home.html',
controller: 'mainController'
})
// route for the about page
.when('/angulRoute/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'
})
// route for the contact page
.when('/angulRoute/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'
});
// use the HTML5 History API
$locationProvider.html5Mode(true);
});
// create the controller and inject Angular's $scope
scotchApp.controller('mainController', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
scotchApp.controller('aboutController', function($scope) {
$scope.message = 'Look! I am an about page.';
});
scotchApp.controller('contactController', function($scope) {
$scope.message = 'Contact us! JK. This is just a demo.';
});
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="scotchApp">
<head>
<meta charset="utf-8">
<!-- SCROLLS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<!-- SPELLS -->
<!-- load angular and angular route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="mainController">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a ng-href="/angulRoute/"><i class="fa fa-home"></i> Home</a></li>
<li><a ng-href="/angulRoute/about"><i class="fa fa-shield"></i> About</a></li>
<li><a ng-href="/angulRoute/contact"><i class="fa fa-comment"></i> Contact</a></li>
</ul>
</div>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<div id="main">
<!-- angular templating -->
<!-- this is where content will be injected -->
<div ng-view></div>
</div>
</body>
</html>
I am working through the mean-machine tutorial and have come to a road block when using ng-view to inject pages into the main layout. I have configured the routes in app.routes.js, defined the controllers in app.js, as well as created the html files for each page. Both app.js and app.routes.js have been loaded into the index.html file. mainController is working fine, just not the ancillary controllers. Please see the code below. Any idea on what I am doing wrong?
public/views/index.html
<html>
<head>
<meta charset="utf-8">
<title>My Routing App!</title>
<!-- set the base path for angular routing -->
<base href="/">
<!-- CSS -->
<!-- load bootstrap and fontawesome via CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style>
body { padding-top:50px; }
</style>
<!-- JS -->
<!-- load angular and angular-route via CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<!-- load our custom angular app files -->
<script src="js/app.js"></script>
<script src="js/app.routes.js"></script>
</head>
<body class="container" ng-app="routerApp" ng-controller="mainController as main">
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class ="navbar-header">
<a class="navbar-brand" href="/">Angular Routing Example</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-shield"></i> About</li>
<li><i class="fa fa-comment"></i> Contact</li>
</ul>
</nav>
</header>
<!-- MAIN CONTENT AND INJECTED VIEWS -->
<main>
<!-- angular templating will go here -->
<!-- this is where content will be injected -->
<div ng-view></div>
</main>
</body>
</html>
public/js/app.js
angular.module('routerApp', ['routerRoutes'])
// create the controllers
// this will be the controller for the ENTIRE site
.controller('mainController', function() {
var vm = this;
// create a bigMessage variable to display in our views
vm.bigMessage = 'A smooth sea never made a skilled sailor.';
})
// home page specific controller
.controller('homeController', function() {
var vm = this;
vm.message = 'This is the home page!';
})
// about page controller
.controller('aboutController', function() {
var vm = this;
vm.message = 'Look! I am an about page.';
})
// contact page controller
.controller('contactController', function() {
var vm = this;
vm.message = 'Contact us! JK. This is just a demo.';
});
public/js/app.routes.js
// inject ngRoute for all our routing needs
angular.module('routerRoutes', ['ngRoute'])
// configure our routes
.config(function($routeProvider, $locationProvider) {
$routeProvider
// route for the home page
.when('/', {
templateURL: 'views/pages/home.html',
controller: 'homeController',
controllerAs: 'home'
})
// route for the about page
.when('/about', {
templateURL: 'views/pages/about.html',
controller: 'aboutController',
controllerAs: 'about'
})
// route for the contact page
.when('/contact', {
templateURL: 'views/pages/contact.html',
controller: 'contactController',
controllerAs: 'contact'
});
// set our app to have pretty URLS
$locationProvider.html5Mode(true);
});
public/views/pages/home.html
<div class="jumbotron text-center">
<h1>Home Page</h1>
<p>{{ home.message }}</p>
</div>
public/views/pages/about.html
<div class="jumbotron text-center">
<h1>About Page</h1>
<p>{{ about.message }}</p>
</div>
public/views/pages/contact.html
<div class="jumbotron text-center">
<h1>Contact Page</h1>
<p>{{ contact.message }}</p>
</div>
Are you sure your templateURL properties have the right value? Try with public/views/pages/home.html or any full URL that shows up when you browse to your application in your browser.
See the documentation on the $routeProvider : https://docs.angularjs.org/api/ngRoute/provider/$routeProvider.
I'm new to angular and have been struggling to work out the best angular approach to solving this problem.
I have my shell page which has a place where I would like an element (toolbar) injected for each view.
Each view can have a slightly different toolbar (heading, buttons etc)
I would like to declare this toolbar in markup in the view so that I can bind data to it that the view is already using, and it's easier to maintain.
My understanding is that I could use a view for the injecting, but all the examples I have seen show it being populated from a template referenced in the routing file.
I have seen a directive used for updating the page title which does similar to what I want, https://github.com/apparentlymart/angularjs-viewhead but when I replicated/altered it and tried injecting complex html markup it didn't like it.
What is the recommended angular approach to solving this problem? Am I approaching the problem the wrong way?
Here is a simplified example.
http://plnkr.co/edit/n23vcBAc4tZUqBxnxcaY?p=preview
<!DOCTYPE html>
<html lang="en" data-ng-app="example">
<head>
<meta name="viewport" content="initial-scale=1" />
</head>
<body>
<a ui-sref="view1" class="md-button" >View 1</a>
<a ui-sref="view2" class="md-button" >View 2</a>
<div class="page-contents">
<div class="toolbar">This should be replaced with the toolbar from each page</div>
<div class="content-wrapper">
<div data-ui-view="page"></div>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<div class="view1" style="background-color: yellow;">
<div class="toolbar-1" style="background-color: gray;">Toolbar 1</div>
<h2>View 1</h2>
<div>View contents</div>
</div>
<div class="view2" style="background-color: lightgreen;">
<div class="toolbar-2" style="background-color: gray;">Toolbar 2</div>
<h2>View 2</h2>
<div>View contents</div>
</div>
angular
.module('example', [
'ui.router'
]);
(function () {
'use strict';
angular
.module('example')
.config(configureRoutes);
configureRoutes.$inject = ['$stateProvider', '$urlRouterProvider'];
/* #ngInject */
function configureRoutes($stateProvider, $urlRouterProvider) {
$stateProvider
.state('view1', {
url: '/view1',
views: {
'page': {
templateUrl: 'view1.html',
}
}
})
.state('view2', {
url: '/view2',
views: {
'page': {
templateUrl: 'view2.html'
}
}
})
$urlRouterProvider.otherwise('/view1');
}
})();
The way i solved this was to create a toolbar service and had it populated from the controller. It didn't achieve my original goal of putting it in markup, but it did simplify the implementation.
I am receiving the following error:
Argument 'mainController' is not a function, got undefined
Which is strange because the code worked before I started adding pages and content to the app.
HTML
<!DOCTYPE html>
<html lang="en" id="top" ng-app="myApp">
<head>
<title>Website</title>
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="css/main.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.min.js"></script>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/main.js"></script>
</head>
<body ng-controller="mainController">
<div class="menu">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
<div class="wrapper" ng-view></div>
</body>
</html>
JS
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider) {
$routeProvider
// route for the home page
.when('/', {
templateUrl : 'pages/dashboard.html',
controller : 'mainController'
})
// route for the settings page
.when('/settings', {
templateUrl : 'pages/settings.html',
controller : 'settingsController'
});
});
I started my code from a template.
You're confusing referencing a controller instance in your html (which binds it) to actually creating your controller within your application.
Declare it off of your root app module.
myApp.controller('mainController', ['$scope', function ($scope) {
}]};
In addition, since you're declaring a template and a controller pair, you cannot bind your controller on the body element. You should instead bind it within it's respective template.
<div class="menu" ng-controller="mainController">
<ul>
<li>Messages</li>
<li>Settings</li>
</ul>
</div>
If you absolutely want it to be bound to the body element, remove it from your routing declaration.