Question

我是角度js的新手，在我的网络应用中，我必须仅在特定页面上显示一些内容，但我不知道如何实现它。

以下是我的HTML模板（showContent.html），通过此模板生成我的所有页面，我只想显示内容的网页网址为http://localhost/myapps/top/

所以我尝试过这样的事情：

<div ng-if="location.path() === '/top'" style="float:right;">

                    <button ng-click="toggle()">Week</button>
                    <button ng-click="toggle1()">Month</button>
                    <button ng-click="toggle2()">Year</button>
                    <button ng-click="toggle3()">All</button>{{post.id}}
                    </div>

但它不起作用，我的内容完全隐藏在这种情况下。那么如何在角度js中实现仅在http://localhost/myapps/top/页面上显示我的内容。

TIA

Answer 1

检查这两个链接。在那里你会解释路线如何在angularjs中工作。使用路线f.e.在不同的网址上显示不同的内容

https://docs.angularjs.org/api/ngRoute/provider/$routeProvider https://docs.angularjs.org/tutorial/step_07

Answer 2

你应该使用Angular的$routeProvider provided。 routeProvider为每个模板创建一个关联 - 您可以关联模板，控制器和其他参数（如视图状态等）。请查看文档以获取更多信息，但下面的示例应足以解决您的问题。

var yourApp = angular.module('yourApp', ['ngRoute'] );

yourApp.config(['$routeProvider', function( $routeProvider ) {

$routeProvider

    .when('/', {
        templateUrl: 'myapps/home.html',
        controller: 'someCtrl'
    })

    .when('/top', {
        templateUrl: 'myapps/top.html',
        controller: 'anotherCtrl'

    .otherwise({ redirectTo: '/' });

}])

注意： 您还需要在应用程序中定义ng-view（可能在您的初始index.html文件中。您只能有一个每个应用程序的ng-view。

<div ng-view></div>

控制器可以在同一个JavaScript文件中定义，也可以在通过<script src='yourScript.js'></script>在页面上链接的另一个文件中定义。下面是一个如何定义控制器的示例。

yourApp.controller('anotherCtrl', [ '$scope', '$http', '$location',

    function( $scope, $http, $location ) {

         alert('You are now on a page using the anotherCtrl Controller!');  

}]);

另一个注释 ：Angular的一个令人惊奇的事情是dependency injection，这就是我们提供$scope的方式，{{ 1}}和$http个参数。当你进入棱角分明时，你一定要查看其他可用的服务。这些服务和指令是Angular非常棒的。

如何在角度js中显示基于模板文件的内容

2 个答案: