如何在角度js中将一个页面移动到另一个页面?

时间:2015-01-13 04:53:14

标签: angularjs angularjs-directive angularjs-scope angular-ui

你可以告诉我为什么我无法通过点击按钮将一个页面导航到另一个页面。 我喜欢那个

var loginCntrl=function($scope,$location){
  $scope.testClick =function(){
    alert('sss');
     $location.path("/no");


  }

$scope.name="naveen";
$scope.lastname="sharam";
$scope.fullname = function() {
    return $scope.firstname + $scope.lastname;
};
}

这里是plunker http://plnkr.co/edit/gQcXe0Njvx6Iviu8Fjep?p=preview

我想继续第二页。

由于

2 个答案:

答案 0 :(得分:0)

使用ui-router时,您应该使用$state从一个页面转移到另一个页面。您应该将$state注入您的控制器,然后您可以使用$state.go('appaa')转移到该状态。

有关详细信息,请参阅https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options

答案 1 :(得分:0)

你的问题不是那么清楚。您可能会尝试使用AngularJS创建单页应用程序 我们可以创建许多HTML页面并在单页中调用,而无需使用AngularJS $routeProviderhttps://docs.angularjs.org/api/ngRoute/provider/ $ routeProvider)刷新页面。

找到以下示例

1)创建三个html页面home.html,about.html,services.html并保存在'pages'文件夹中。

2)创建JS并添加以下脚本并保存在'js'文件夹(js / script.js)中。

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

// configure routes

spaApp.config(function($routeProvider) {   
    $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html'
        })
        .when('/about', {
            templateUrl : 'pages/about.html'
        })
        .when('/services', {
            templateUrl : 'pages/services.html'
        });
});

3)创建索引页并调用angular.min.js,script.js

<!DOCTYPE HTML>
<html ng-app="spaApp">
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
        <script type="text/javascript" src="js/script.js"></script>
    </head>
    <body>
        <h1>AngularJS Routing</h1>
        <ul class="menu"> 
            <li><a href="#/">Home</a></li>
            <li><a href="#/about">About</a></li>
            <li><a href="#/services">Services</a></li>
        </ul>
        <div class="contentwrap" ng-view>Loading...</div>
    </body>
</html>

Download working example from Github