How do I implement page navigation in AngularJS?

Question

i have two html pages which are named main.html and detail.html. When click the link button in main,i wanna open detail page for details. Main.html:

<body ng-app="MyApp" ng-controller="mainController">
    <div data-role="page" data-theme="b">
         <a ng-href="detail.html"></a>
    </div>
</body>

detail.html:

<div data-role="page" data-theme="b"  ng-controller="DetailContoller">
<button>{{a}}</button></div>

Contoller:

MyApp.controller("mainController", function ($scope, $http, OranService, $location) {
$scope.a = 5;
$scope.items = [];});

MyApp.controller('DetailController', function ($scope, OranService) {
$scope.a = 1;});

When Click the link button in the main page, i see only a button which text {{a}}, and my url:'localhost/Main.html'. I dont want use target=_self vs. if i use ,when return click button press, main page will reload.

Do you have any suggestion?

Thanks!

wvdz · Accepted Answer · 2014-10-31 09:15:53Z

Looks like you're mixing jQuery Mobile and Angular notation.

To implement navigation in Angular you can use the core Angular service $routeProvider. You have to include the ng-route module for this.

Here's an example of how to config this on your module:

  angular.module('app', ['ngRoute'])

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

      $routeProvider
        .when('/page1', {
          templateUrl: 'page1.html',
          controller: 'Page1Ctrl'
        })
        .when('/page2', {
          templateUrl: 'page2.html',
          controller: 'Page2Ctrl'
        })
        .otherwise({
          redirectTo: '/page1'
        });
    }]);

Now in your html, use the directive ng-view to specify the tag that should contain the template.

<body ng-app="app">
    <div ng-view>
    </div>
</body>

Collectives™ on Stack Overflow

How do I implement page navigation in AngularJS?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related