angular之两种路由
2024-08-31 11:33:05
安装angular
npm install -g @angular/cli
ng new myapp
ng g component componentName
自带路由
引入:angular-route.js
<div ng-controller='ctr1'>
<a href='#home'>首页</a>
<a href='#mine'>我的</a>
<div ng-view></div>
<div>
angular.module('myapp',['ngRoute'])
.config(['$routerProvider','localProvider',function($routerProvider,$localProvider){
$localProvider.hashPrefix('')
$routerProvider
.when(
'/home',{
templateUrl:'home.html',
controller:'ctr1'
})
.when(
'/mine',{
templateUrl:'mine.html',
controller:function($scope){
$scope.name='little-rabbit'
},
}])
otherwise({redirectTo:'/home'});
})
UI.route路由
<div ng-controller='ctr1'>
<a ui-sref='#home'></a>
<a ui-sref='#list'></a>
<div ui-view></div>
<div>
angular.module('myapp',['ui.route','angularCSS'])
.config(function($stateProvider,$urlRouterProvider){
$urlRouterProvider.otherwise('home.html')
$stateProvider
.state(
'home',{
url:'/home',
templateUrl:'home/home.html',
css:'home/home.css'
})
.state(
name:'list',
url:'/list',
templateUrl:'list/list.html',
css:'list/list.css'
})
})
最新文章
- c# datagridview禁止自动生成额外列
- ajax提交Form
- C#中的延迟加载
- mysql 创建存储过程注意
- 《Java程序设计》第二次实验报告
- haproxy配置直接重定向url
- windows7 iis安装与配置
- Python系列之正则表达式详解
- 如何处理使用js兼容所有浏览器的问题
- 【深度学习系列】卷积神经网络CNN原理详解(一)——基本原理
- 基于【磁盘】操作的IO接口:File
- awk 相关的复习
- oracle 日志恢复数据
- #ASP.NET 自制免费.NET代码生成器KevinCodeBuilder
- @Transactional注解事务不回滚不起作用无效
- JDBC setCatalog
- Python基础--Python简介和入门
- stenciljs 学习十 服务器端渲染
- shiro实现基于机构加username的验证以及rememberMe
- apache -- xampp配置虚拟主机
热门文章
- ubuntu怎样打开命令行终端(5种方法)
- iOS开发 — (UINaVigationController)导航控制器,界面传值
- 关于 AlphaGo 论文的阅读笔记
- ListView 自己定义BaseAdapter实现单选打勾(无漏洞)
- 笔记09 saveFileDialog
- Spring Boot中使用RSocket
- 关于Yapi出现 请求异常,请检查 chrome network 错误信息...
- Unity3D 调用Java,Java调用Unity3D
- Python list 和 str 互转
- Thread join方法的用途