問(wèn)題描述

想要實(shí)現(xiàn)點(diǎn)擊鏈接會(huì)跳轉(zhuǎn)到詳情頁(yè)面，我是初學(xué)angular還請(qǐng)大神們解答。謝謝

問(wèn)題解答

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

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

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

// 注入 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’ })});

詳細(xì)的用法及不同可以自己參考一些文章，各有優(yōu)缺點(diǎn)

單頁(yè)面應(yīng)用的話需要用到 $router 將 url 和 templatecontroller 對(duì)應(yīng)起來(lái)。

<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);//})

如果你不寫(xiě)單頁(yè)面應(yīng)用，那就是正常的頁(yè)面地址。

上邊已經(jīng)說(shuō)的很全了,通常做法都是用ui-router跳轉(zhuǎn)到你定義好的state,比如這個(gè)樣子.