从单页应用开始答案

【问题标题】：Starting with single page apps从单页应用开始
【发布时间】：2014-07-12 10:16:59
【问题描述】：

我是 Angularjs 的初学者，我已经为 angularjs 下载了模板“Angular Start”。它带有一些内置文件。比如homecontroller、AppjsFolder等

如果我使用的是空的 Mvc 项目，我想知道如何从 angularproject 开始？此外，当我运行应用程序时，我在浏览器中默认使用此 url：“http:/somelocalAddress/#/home”。谁能告诉我 # 是如何附加到 url 的，因为我可以看到它没有任何 route.config 文件。

我知道 Layout.cshtml 中有一些锚标签

 <li data-ng-class="{active : activeViewPath==='/home'}"><a href='#/home'>Home</a></li>
                    <li data-ng-class="{active : activeViewPath==='/demo'}"><a href="#/demo">Demo</a></li>
                    <li data-ng-class="{active : activeViewPath==='/angular'}"><a href='#/angular'>Learn Angular</a></li>
                    <li data-ng-class="{active : activeViewPath==='/about'}"><a href='#/about'>About</a></li>
                    <li data-ng-class="{active : activeViewPath==='/contact'}"><a href='#/contact'>Contact</a></li>

这里，anchortags 的 href 附有 # 并且它表明 url 在单击锚标签时得到 # 但是当我运行应用程序时为什么会有 /#/Home

请指导我。

【问题讨论】：

标签： angularjs asp.net-mvc-4 single-page-application angularjs-routing

【解决方案1】：

您正在使用 Angular ngRoute 模块。这是一个全ajax导航控制器。这意味着当您浏览路线时，您实际上并没有去任何地方，ngRoute 会下载部分 html 并将它们呈现在带有 ng-view 属性标记的 div 中，从而创建“假”（但高性能）的导航体验。

Angular 使用 # 来避免浏览器在每次路由更改操作时加载整个页面。这就是为什么代码中的锚也使用 # 的原因。

您的代码似乎是菜单的摘录，可能是引导菜单，它希望根据当前路径将“活动”类添加到相应的 li 部分。控制器可能正在使用$location 服务，以便使用 $location.path() 方法找出当前路径。当您调用 path() 时，它会返回不带“#”的当前路径，因此它也不会在 ng-class 属性中使用它。

顺便说一句，你可以激活$locationProvider的html5mode，不要使用前缀#，而只是你的生活;)。它使用相同的技术，问题是您的受众需要使用现代浏览器，但我很确定您使用的其他依赖项也需要，是吗？

如何配置html5mode

angular.module('myApp',[
    ...
    'ngRoute'
    ...
])
    .config(function($routeProvider, $locationProvider){
        $routeProvider
             .when('/path/to/my/route')
             .otherwise({
                 redirectTo: '/'
             });
        
        $locationProvider.html5Mode(true);
    });

【讨论】：