从单页应用程序开始

Sweetie 发表于 Dev

亲爱的

我是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带有＃附加，这表明在单击anchor tag时url得到＃，但是当我运行该应用程序时，为什么会有/＃/ Home

请指导我。

cgcladera

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

Angular使用＃以避免浏览器每次路由更改操作都加载整个页面。这就是代码中的锚点也使用＃的原因。

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

顺便说一句，您可以激活$ locationProvider的html5mode，不要使用前缀＃，而只是使用您的life;）。它使用相同的技术，问题是您的听众需要使用现代的浏览器，但是我敢肯定您使用的其他依赖项也需要这样做，对吗？

如何配置html5mode

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-9

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章