2. 程式人生 > >AngularJs之ui.router路由基本配置及傳參方法

AngularJs之ui.router路由基本配置及傳參方法

阿新 • • 發佈：2019-01-01

使用AngularJs可以方便的做出單頁面應用，既然是應用，那就涉及到頁面跳轉的問題，使用Angularjs的路由外掛可以方便的使用路由功能，而且可以傳參非常容易。

程式碼如下：

路由外掛：angular-ui-router.js。

檔案：index.html

01<!DOCTYPE HTML>
02<html lang="en">
03<head>
04<meta charset="UTF-8">
05<title>路由測試</title>
06<style type="text/css">
07td{height:30px;line-height:30px;border:1px solid 
#ccc;text-align:center;padding:0 10px;}
08</style>
09</head>
10<body ng-app="app">
11<div class="nav">
12<a ui-sref="home">首頁</a>
13<a ui-sref="list">列表頁</a>
14<a ui-sref="article">文章頁</a>
15</div>
16<div ng-controller="ctr">
17<a href="javascript:;"
 ng-click="fn('hello', 'world');">點我</a>
18</div>
19<div ui-view></div>
20</body>
21</html>
22<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
23<script type="text/javascript" src="http://www.zymseo.com/js/angular-ui-router.js"></script>
24<script type="text/javascript">
25var m = angular.module('app', ['ui.router']);
26

相關推薦

AngularJs之ui.router路由基本配置及傳參方法

使用AngularJs可以方便的做出單頁面應用，既然是應用，那就涉及到頁面跳轉的問題，使用Angularjs的路由外掛可以方便的使用路由功能，而且可以傳參非常容易。程式碼如下：路由外掛：angular-ui-router.js。檔案：index.html01<!DOCT

C++和python混合程式設計之在python類建構函式中傳參方法

一、說明：C++專案中用到python相關的知識，這兩天研究了一下C++與python的混合程式設計，網上有很多這方面的介紹，但是怎麼使用python類的建構函式中傳參的介紹卻沒有，這裡研究一下，分享出來。(C++和python相互呼叫的相關介面查詢https:

React 學習筆記 （七）（路由及路由巢狀 react-router 4.x 基本配置及使用）

react-router 路由 根據使用者訪問的地址動態的載入不同的元件 1.安裝 npm install react-router-dom --save 2.引入 import { BrowserRouter as Router, Route, Link } fr

AngularJS路由之ui-router（二）

模組建立時新增模組依賴“ui.router” var app = angular.module('myApp', ['ui.router']);後就可以使用一個叫做$state的服務,使用$stateProvider來配置這個服務. $stateProvider和angu

AngularJS路由之ui-router（三）

一、為ui-router新增進度條 在使用動態控制器或者ajax，新增資料的時候需要進度條提示， 我們可以使用路由狀態的事件新增全域性進度條提示 $stateChangeStart: 當狀態開始改變時觸發 $stateChangeSuccess: 當狀態改變結束時觸發 二

第3篇：angularJS使用ui-router的巢狀路由配置

引入js檔案： <script type="text/javascript" src="lib/angular/angular-1.3.0.js"></script>

AngularJS路由之ui-router（一）

在angular1有內建的路由服務，使用$route可以幫助實現路由的切換，檢視的改變，但是$route只是包含了基本的功能，在很多場合不夠用。 uiRouter是第三方js庫。需要引入“angular-ui-router.min.js”檔案。 在Asp.Net中引入

AngularJS路由之ui-router（四）$state.go頁面跳轉

路由是這麼定義的： $stateProvider .state('page1', { url: '/page1', templateUrl: 'views/page1.htm', controller: 'page1Ctrl'

AngularJS學習之 ui router

ron span 登陸 也有 con 列表 tro 默認 blog 1.安裝 bower install --save angular_ui-router 2.在項目主頁面 index.html中添加 <div ui-view=""></ui-vie

angularJs模組ui-router之狀態巢狀和檢視巢狀

狀態巢狀的方法 狀態可以相互巢狀。有三個巢狀的方法： 使用“點標記法”，例如：.state('contacts.list', {})使用parent屬性，指定一個父狀態的名稱字串，例如：parent: 'contacts'使用parent屬性，指定一個父狀態物件，例如

AngularJs ui-router 路由的簡單介紹

以上程式碼修飾了“views”直接通過state的名稱繫結完對應的頁面模板。 state(name,stateConfig); 註冊一個狀態，並給定其配置。 引數： name：狀態的名稱。 stateConfig：狀態配置物件。配置具有以下各項屬性： template： string/func

angularJs模組ui-router之狀態管理

ui-router 的工作原理非常類似於 Angular 的路由控制器，但它只關注狀態。 在應用程式的整個使用者介面和導航中，一個狀態對應於一個頁面位置通過定義controller、template和view等屬性，來定義指定位置的使用者介面和介面行為通過巢狀的方式來

一個實驗搞定華為hybrid-vlan基本配置及原理

華為 hybrid-vlan實驗拓撲：2. 實驗需求：PC1和PC3屬於VLAN10 PC2和PC4屬於VLAN20 PC5和PC6屬於VLAN30。VLAN10和20的成員都可以和VLAN30中PC5通信，但是VLAN10和VLAN20的成員之間不能通信(通過二層技術實現此需求，就是華為Hybrid

Python之路58-Django安裝配置及一些基礎知識點

python目錄一、安裝Django二、創建工程三、創建app四、靜態文件五、模板路徑六、設置settings七、定義路由八、定義視圖九、渲染模板十、運行Django是一款Python的web框架一、安裝Djangopip3 install django安裝完成後C:\Python35\Script下面會生成

AngularJS1.6版本中ui-router路由中/#!/的解決方法 - zhuan

ret soft https variable name class over func efi 本地編譯出的文件可以正常運行，但是服務器編譯後到了測試那裏路由上就莫名的出現了/#!/，這導致了很多問題。 後來查了下是服務器編譯器把AngularJS升級到了1.6版本，而我

Django學習（一）---基本配置及創建項目、應用

cut 維護 onf response settings 通過 學習 clu render 安裝：在Django官網下載最新版Django然後通過pip安裝即可 一、創建項目 進入文件夾，打開cmd窗口，輸入django-admin startproject myblog(

angularjs之ui-bootstrap的Datepicker Popup不使用JS實現雙日期選擇控件

function 2.3 spa ots fun 自定義指令 str borde ext 最開始使用ui-bootstrap的Datepicker Popup日期選擇插件實現雙日期選擇時間範圍時，在網上搜了一些通過JS去實現的方法，不過後來發現可以不必通過JS去處理，只需要

Spring3 MVC 註解（一）---註解基本配置及@controller和 @RequestMapping 常用解釋（轉）

nal context pac 配置 註解 com inf 如何 文件中 一：配置web.xml 1)問題：spring項目中有多個配置文件mvc.xml dao.xml 2）解決：在web.xml中 <init-par

思科網絡設備的基本配置及顯示常用信息

思科路由器 思科交換機 網絡設備 常用基本配置 常用顯示信息進入網絡設備，通常先要進行基本配置，一下羅列了最常用的思科網絡設備配置（交換機、路由器通用）： Switch>enable //由用戶模式進入特權模式 Switch#configure terminal //進入全局配置模式 S

前端hash路由基本原理,及代碼的基本實現

alt ide class javascrip r.js border pop display 早期 路由就是指隨著瀏覽器地址欄的變化，展示給用戶的頁面也不相同。 早期的路由都是後端實現的，直接根據 url 來 reload 頁面，頁面變得越來越復雜服務器端壓力變大，隨著