[AngularJS] Introduction to ui-router
UI to angularjs Router Introduction
2023-09-14 08:59:21 时间
Introduce to basic $stateProvider.state() with $stateParams services. Understand how nested router works.
Key Value:
ng-href="#/list/{{item.name}}"
.state('list.item', { url: '/:item', templateUrl: 'templates/list.item.tmpl.html', controller: 'ItemCtrl', controllerAs: 'item' })
ui-sref="list.item({item: item.name})" the same as ui-sref=".item({item: item.name})" <!-- ui.route understand to find the parent router-->
Note: we can put template into a spreated html, here we just put inside index.html and use type to define it.
script type="text/ng-template"
<!DOCTYPE html> <html ng-app="app"> <head> <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css"/> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.11/angular-ui-router.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div class="container"> <h4> A brief introduction to <strong class="text-danger">ui-router</strong> <span class="text-muted">(v0.2.0)</span> </h4> <div> <ul class="nav nav-pills"> <li><a ui-sref="home">Home</a></li> <li><a ui-sref="list">Shopping List</a></li> </ul> </div> <div ui-view></div> </div> <script type="text/ng-template" id="templates/home.tmpl.html"> <div class="row"> <h3>What is ui-router?</h3> <p>URL routing is a popular approach to matching the contents of a URL to specific functionality within a web application. URL routes programmatically present specific content to users based on the URL that they are visiting. It is a popular approach that has proven to be very effective.</p> <P>Something that might not be obvious is that URL routing is also a finite state machine. When you configure the routing for an app, you are laying out the various states the application can be in, and informing the application what to display and do when a specific route is encountered.</P> <p>AngularJS supplies URL routing by default. It is adequate, but also has some limitations.</p> </div> </script> <script type="text/ng-template" id="templates/list.tmpl.html"> <div class="row padded"> <div class="list-group col-xs-3"> <a class="list-group-item" ng-repeat="item in list.shoppingList" ng-class="{active: item.selected}" ng-href="#/list/{{item.name}}" ng-click="list.selectItem(item)">{{item.name}}</a> </div> <div ui-view class="col-xs-9"></div> </div> </script> <script type="text/ng-template" id="templates/list.item.tmpl.html"> <h3>{{item.item}}</h3> <img ng-src="//robohash.org/{{item.item}}.png"/> </script> <script src="app.js"></script> </body> </html>
"ui-view" is important to tell where ui-router should show the view.
/** * Created by Answer1215 on 12/16/2014. */ angular.module('app', ['ui.router']) .config(function($stateProvider, $urlRouterProvider) { $stateProvider .state('home', { url: '/home', templateUrl: 'templates/home.tmpl.html' }) .state('list', { url: '/list', templateUrl: 'templates/list.tmpl.html', controller: 'ListCtrl', controllerAs: 'list' }) //nested router: "list.item", // ui-router understands that item is under list parent. .state('list.item', { url: '/:item', templateUrl: 'templates/list.item.tmpl.html', controller: 'ItemCtrl', controllerAs: 'item' }) }) .controller('ListCtrl', ListCtrl) .controller('ItemCtrl', ItemCtrl) function ItemCtrl($stateParams) { var ItemCtrl = this; ItemCtrl.item = $stateParams.item; } function ListCtrl() { var ListCtrl = this; ListCtrl.shoppingList = [ {name: 'Milk'}, {name: 'Eggs'}, {name: 'Bread'}, {name: 'Cheese'}, {name: 'Ham'} ]; ListCtrl.selectItem = function(selectedItem) { _(ListCtrl.shoppingList).each(function(item) { item.selected = false; if(selectedItem === item) { selectedItem.selected = true; } }); }; }
Read More: https://egghead.io/lessons/angularjs-introduction-ui-router
相关文章
- 关于 SAP 电商云 Spartacus UI 里 Router 模块的 forRoot 方法
- Web UI自动化练习之篇一
- 自定义UI组件发布到npm仓库
- 本周精选优秀UI作品赏析-No.64(Dribbble优秀页面)
- 本周精选优秀UI作品赏析-No.62(品牌LOGO篇)
- Appium PO模式UI自动化测试框架——设计与实践
- to program_I Just Want To
- 【原创】Python UI自动化测试之定位元素
- 一文搞懂 Kafka 开源可视化 Web UI - Kafdrop
- sap.m.Table 和 sap. ui.table.Table 两个控件的功能对比
- sap.ui.comp.smarttable.SmartTable 一些属性的用法阐述
- 【鸿蒙 HarmonyOS】UI 布局 ( 网格布局 TableLayout )
- 【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件
- 【Android UI】Paint Gradient 渐变渲染 ③ ( RadialGradient 环形渐变渲染 | 在给定中心和半径的情况下绘制径向渐变的着色器 | 水波纹效果 )
- ORA-16444: ALTER SYSTEM FLUSH REDO TO STANDBY failed due to a corrupted control file or online log file. ORACLE 报错 故障修复 远程处理
- Android非UI线程更新UI的几种方法详解编程语言
- 微软展示Win10弹出菜单和右键菜单新UI:回归圆角
- 开源啦!「运维密码」小程序携全新 UI 开源啦!
- c#异步读取数据库与异步更新ui的代码实现