angular之两种路由
安装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'
})
})
angular之两种路由的更多相关文章
- Vue-router(前端路由)的两种路由模式
Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...
- Asp.Net Core下的两种路由配置方式
与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...
- ASP.NET Core MVC 中两种路由的简单配置
1.全局约定路由 这种方式配置优先级比较低,如果控制器或者方法上标记了特性路由那么优先走特性路由. 当建立好一个mvc项目里,路由都是默认配置好的. 如果建立的是空项目那么需要手动配置: 1.需要在C ...
- vue中两种路由跳转拼接参数
this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
- vue--前端路由及vue-router两种模式
前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...
- angular(一)路由的配置(1)
本篇文章是最近在公司里做项目的时候,尝试配置路由的过程.由于头尾,和路由主体,包括控制器组长都已配置好,我这里只是单纯的写一些配置单个副页面的过程.大家肯定会有看不懂的地方,后续会陆续更新完整的配置全 ...
- angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用
今天我们要讲的是ng2的路由系统. 例子
- 球形环境映射之angular方式的两种形式
图形学中,某些物体带有反射属性,会反射周围的环境.一种做法是沿着反射方向发一条光线,与场景求交,获取到交点的颜色值,作为反射的颜色.显然这种方法比较低效,更高效的方法是将被渲染物体所处的环境保存到一张 ...
- AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由)
AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由) 在AspNetWebApi管线中存在两种类型的消息处理程序(Message Handler) 1.全局消息处理程序,所有的请 ...
随机推荐
- socket阻塞与非阻塞,同步与异步I/O模型
作者:huangguisu 原文出处:http://blog.csdn.NET/hguisu/article/details/7453390 socket阻塞与非阻塞,同步与异步 1. 概念理解 在进 ...
- python 常见细节知识点
1. a[::-1]翻转 设有一个元组或者列表 a = (1,2,3,4) b = [1,2,3,4] 则a[::-1]和b[::-1]的含义是将元组或列表的内容翻转 a[::-1] # 结果为(4, ...
- python pyqtgraph 保存图片到本地
pyqtgraph官方给的示例居然会报错2333 官方文档传送门:#####pyqtgraph export pyqtgraph支持在可视化窗口中右键保存(Exporting from the GUI ...
- Oracle数据库字符集解释
转自:http://www.itpub.net/thread-836643-1-1.html Pl/SQL 执行select * from nls_database_parameters---可以查看 ...
- WPF 的 MVVM
Model——View——ViewModel http://www.cnblogs.com/fdyang/p/3877309.html
- OpenCV4Android编译
http://blog.sina.com.cn/s/blog_602f87700102vdnw.html (2015-04-02 11:10:01) 转载▼ 最近的一个项目中,需要自己编译Op ...
- 【机器学习算法-python实现】PCA 主成分分析、降维
1.背景 PCA(Principal Component Analysis),PAC的作用主要是减少数据集的维度,然后挑选出基本的特征. PCA的主要思想是移动坐标轴, ...
- [网页游戏开发]Morn简介及使用教程
网页游戏开发利器,morn系列教程之Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Mor ...
- 实记处理mongodb的NUMA问题
一次在启动mongodb的过程中,出现过NUMA这个问题, mongodb日志显示如下: WARNING: You are running on a NUMA machine. We suggest ...
- bzoj-2251 外星联络
题意: 给出一个字符串,求出现次数超过1的子串的出现个数. 字符串长度<=3000: 题解: 题目问的是子串的个数.那么首先我们要找到全部的子串. 而字符串的全部后缀的前缀能够不重不漏的表示全部 ...