84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
想要實現點擊連結會跳到詳情頁面,我是初學angular還請大神們解答。謝謝
人生最曼妙的风景,竟是内心的淡定与从容!
方法1:使用angular 自帶的ngRoute 依賴: angular-route.js (bower install angular-route)網址:http://docs.angularjs.cn/api/ngRoute/service/$route#example用法:a.需要ui 中用ng-view 指令指定如:
// 注入 ngRoute var angularApp = angular.module("Your App Name", ['ngRoute']) angularApp.config(function ($routeProvider) { $routeProvider. when('/list', { // 配置列表路由及 Controller templateUrl: 'partial/list.html', //TODO 列表页面 controller: 'listController' //TODO 列表控制器 }). when('/detail', { // 配置详情路由及 Controller templateUrl: '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 指令指定如:
// 注入 ui.router var 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,比如這個樣子.
方法1:使用angular 自帶的ngRoute
這就相當於頁面的刷新區域依賴: angular-route.js (bower install angular-route)
網址:http://docs.angularjs.cn/api/ngRoute/service/$route#example
用法:
a.需要ui 中用ng-view 指令指定如:
b.配置註冊
方法2:使用第三方ui-router
這就相當於頁面的刷新區域依賴:angular-ui-router.js (bower install angular-ui-router)
網址:https://github.com/angular-ui/ui-router
用法:
a.需要ui 中用ui-view 指令指定如:
b.配置註冊
詳細的用法及不同可以自己參考一些文章,各有優缺點
單一頁面應用的話需要用到 $router 將 url 和 templatecontroller 對應起來。
如果你不寫單頁應用,那就是正常的頁面位址。
上邊已經說的很全了,通常做法都是用ui-router跳到你定義好的state,比如這個樣子.