为什么我的简单Angular ui.router配置无法正常运行？

问题原因 #

你首次打开页面时默认访问的是站点根路径/，但你当前只配置了路径/home对应的路由规则，没有任何路由可以匹配根路径，ui.router找不到对应路由时就会触发$urlRouterProvider.otherwise的兜底逻辑，这就是你取消注释后会进入otherwise分支的原因。
如果不开启otherwise配置，ui.router没有匹配路由时不会加载任何模板到ui-view容器，所以页面会显示空白无法正常运行。

常用解决方案 #

• 保留$urlRouterProvider.otherwise('/home')配置：这是ui.router的标准用法，专门用于处理所有未匹配路由的兜底跳转，适配绝大多数站点默认打开就跳首页的需求，你当前场景完全可以直接使用。
• 单独配置根路径路由：如果你不想依赖otherwise兜底，可以给根路径单独配置重定向规则：

routerApp.config(function($stateProvider, $urlRouterProvider) {   
    // 根路径直接重定向到/home
    $urlRouterProvider.when('/', '/home');

    $stateProvider       
    .state('home', {
        url: '/home',
        templateUrl: 'main.html'
    })
});

• 也可以新增根路径对应的state，直接关联首页模板：

.state('root', {
    url: '/',
    templateUrl: 'main.html'
})

额外检查项 #

• 确认main.html文件的路径配置正确，要对应index.html的相对路径
• 不要直接用file协议打开index.html调试，本地开发建议用静态服务（比如npm的http-server）启动项目，避免浏览器跨域限制阻止模板文件加载。

内容的提问来源于stack exchange，提问作者Sean