angularJS的router用法簡單介紹
本章節將分享一段關於angular的router程式碼例項,有需的朋友可以做一下參考。
下面就分別把相關程式碼列舉出來:
一.index.html程式碼:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> </head> <body ng-app="routeApp" class="ng-app:routeApp" id="routeApp"> <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2pre/html5shiv.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script> <div ng-view></div> <script src="http://localhost:81/js/angular.min.js"></script> <script> var routeApp = angular.module('routeApp',[]); routeApp.config(['$routeProvider',function ($routeProvider) { $routeProvider .when('/list', { templateUrl: 'list.html', controller: 'RouteListCtl' }) .when('/list/:id', { templateUrl: 'detail.html', controller: 'RouteDetailCtl' }) .otherwise({ redirectTo: '/list' }); }]); //controller routeApp.controller('RouteListCtl',function($scope) { }); routeApp.controller('RouteDetailCtl',function($scope, $routeParams) { $scope.id = $routeParams.id; }); </script> </body> </html>
二list.html相關:
執行下面程式碼:
[HTML] 純文字檢視 複製程式碼<hr/> <h3>Route : List.html</h3> <ul> <li ng-repeat="id in [1, 2, 3 ]"><a href="#/list/{{ id }}"> ID{{ id }}</a></li> </ul>
三.detail.html相關:
執行以下程式碼:
[HTML] 純文字檢視 複製程式碼<hr/> <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
相關文章
- javascript的this用法簡單介紹JavaScript
- jQuery filter() 用法簡單介紹jQueryFilter
- js WebSocket用法簡單介紹JSWeb
- javascript arguments用法簡單介紹JavaScript
- onerror事件用法簡單介紹Error事件
- javascript的分號(;)用法簡單介紹JavaScript
- AngularJs解決跨域簡單介紹AngularJS跨域
- <input type="number" >用法簡單介紹
- css 註釋用法簡單介紹CSS
- style.cssText用法簡單介紹CSS
- javascript with()語句用法簡單介紹JavaScript
- outerHTML屬性用法簡單介紹HTML
- js isNaN函式的用法簡單介紹JSNaN函式
- js中大括號{}的用法簡單介紹JS
- jQuery的index()函式用法簡單介紹jQueryIndex函式
- js eval()函式的用法簡單介紹JS函式
- div和span元素的用法簡單介紹
- meta標籤的viewport用法簡單介紹View
- CSS3 calc()用法簡單介紹CSSS3
- javascript innerText屬性用法簡單介紹JavaScript
- javascript call()函式用法簡單介紹JavaScript函式
- contenteditable屬性用法簡單介紹
- javascript trim()函式用法簡單介紹JavaScript函式
- getFullYear()函式用法簡單介紹函式
- js style.cssText用法簡單介紹JSCSS
- js isPrototypeOf()函式用法簡單介紹JS函式
- opacity屬性用法簡單介紹
- AngularJS實現的表單編輯提交功能簡單介紹AngularJS
- 簡單介紹SQLserver中的declare變數用法SQLServer變數
- js迴圈中reduce的用法簡單介紹JS
- javascript的逗號運算子的用法簡單介紹JavaScript
- javascript中的就加號+的用法簡單介紹JavaScript
- overflow-x 屬性用法簡單介紹
- background-size屬性用法簡單介紹
- zTree外掛常鍵用法簡單介紹
- document.compatMode用法簡單介紹
- Function.prototype.bind()方法用法簡單介紹Function
- js fromCharCode()函式用法簡單介紹JS函式