angular.js - angularjs怎么實現跳轉的，是要寫路由嗎

問題描述

想要實現點擊鏈接會跳轉到詳情頁面，我是初學angular還請大神們解答。謝謝

問題解答

方法1：使用 angular 自帶的 ngRoute 依賴： angular-route.js (bower install angular-route)網址： http://docs.angularjs.cn/api/ngRoute/service/$route#example用法：a.需要 ui 中用 ng-view 指令指定 如: <p ng-view></p> 這就相當于頁面的刷新區域b.配置注冊

// 注入 ngRoutevar angularApp = angular.module('Your App Name', [’ngRoute’])angularApp.config(function ($routeProvider) { $routeProvider. when(’/list’, {// 配置列表路由及 ControllertemplateUrl: ’partial/list.html’, //TODO 列表頁面controller: ’listController’ //TODO 列表控制器 }). when(’/detail’, {// 配置詳情路由及 ControllertemplateUrl: ’partial/detail.html’, //TODO 詳情頁面controller: ’detailController’ //TODO 詳情控制器 }). otherwise({//默認路由redirectTo: ’/list’ });});

方法2：使用第三方 ui-router 依賴：angular-ui-router.js (bower install angular-ui-router)網址：https://github.com/angular-ui/ui-router用法：a.需要 ui 中用 ui-view 指令指定 如: <p ui-view></p> 這就相當于頁面的刷新區域b.配置注冊

// 注入 ui.routervar angularApp = angular.module('Your App Name', [’ui.router’])angularApp.config(function ($stateProvider) { $stateProvider. state(’list’,{url:’/list’,templateUrl: ’list.html’,controller: ’listController’ }). state(’detail’,{url:’/detail’,templateUrl: ’detail.html’,controller: ’detailController’ })});

詳細的用法及不同可以自己參考一些文章，各有優缺點

單頁面應用的話需要用到 $router 將 url 和 templatecontroller 對應起來。

<a href=’#/detail/{{phone.id}}’>{{phone.name}}</a>

app.config(function($routeProvider) { $routeProvider// route for the home page.when(’/home’, { templateUrl : ’/static/view/layout/home.html’, controller : ’HomeController’}).when(’/detail/:id’, { templateUrl : ’/static/view/detail.html’, controller : ’DetailController’})})app.controller('DetailController', function($scope, $routerParams){ console.log($routerParams.id);//})

如果你不寫單頁面應用，那就是正常的頁面地址。

上邊已經說的很全了,通常做法都是用ui-router跳轉到你定義好的state,比如這個樣子.