安装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之两种路由的更多相关文章

  1. Vue-router(前端路由)的两种路由模式

    Vue的两种路由模式: hash.history:默认是hash模式: 前端路由(改变视图的同时不会向后端发出请求) 一.什么是hash模式和history模式? hash模式:是指url尾巴后的#号 ...

  2. Asp.Net Core下的两种路由配置方式

    与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...

  3. ASP.NET Core MVC 中两种路由的简单配置

    1.全局约定路由 这种方式配置优先级比较低,如果控制器或者方法上标记了特性路由那么优先走特性路由. 当建立好一个mvc项目里,路由都是默认配置好的. 如果建立的是空项目那么需要手动配置: 1.需要在C ...

  4. vue中两种路由跳转拼接参数

    this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...

  5. vue--前端路由及vue-router两种模式

    前言 路由这个概念最早在后端出现,随后前后端分离,直至当今的单页面应用,路由也在一直发生变化.本文来总结一下路由变化和vue-router中的路由模式区别相关知识点. 正文 1.什么是前端路由 (1) ...

  6. angular(一)路由的配置(1)

    本篇文章是最近在公司里做项目的时候,尝试配置路由的过程.由于头尾,和路由主体,包括控制器组长都已配置好,我这里只是单纯的写一些配置单个副页面的过程.大家肯定会有看不懂的地方,后续会陆续更新完整的配置全 ...

  7. angular2系列教程(十)两种启动方法、两个路由服务、引用类型和单例模式的妙用

    今天我们要讲的是ng2的路由系统. 例子

  8. 球形环境映射之angular方式的两种形式

    图形学中,某些物体带有反射属性,会反射周围的环境.一种做法是沿着反射方向发一条光线,与场景求交,获取到交点的颜色值,作为反射的颜色.显然这种方法比较低效,更高效的方法是将被渲染物体所处的环境保存到一张 ...

  9. AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由)

    AspNetWebApi管线中如果定义两种类型的消息处理程序(全局/路由) 在AspNetWebApi管线中存在两种类型的消息处理程序(Message Handler) 1.全局消息处理程序,所有的请 ...

随机推荐

  1. socket阻塞与非阻塞,同步与异步I/O模型

    作者:huangguisu 原文出处:http://blog.csdn.NET/hguisu/article/details/7453390 socket阻塞与非阻塞,同步与异步 1. 概念理解 在进 ...

  2. python 常见细节知识点

    1. a[::-1]翻转 设有一个元组或者列表 a = (1,2,3,4) b = [1,2,3,4] 则a[::-1]和b[::-1]的含义是将元组或列表的内容翻转 a[::-1] # 结果为(4, ...

  3. python pyqtgraph 保存图片到本地

    pyqtgraph官方给的示例居然会报错2333 官方文档传送门:#####pyqtgraph export pyqtgraph支持在可视化窗口中右键保存(Exporting from the GUI ...

  4. Oracle数据库字符集解释

    转自:http://www.itpub.net/thread-836643-1-1.html Pl/SQL 执行select * from nls_database_parameters---可以查看 ...

  5. WPF 的 MVVM

    Model——View——ViewModel http://www.cnblogs.com/fdyang/p/3877309.html

  6. OpenCV4Android编译

    http://blog.sina.com.cn/s/blog_602f87700102vdnw.html (2015-04-02 11:10:01) 转载▼     最近的一个项目中,需要自己编译Op ...

  7. 【机器学习算法-python实现】PCA 主成分分析、降维

    1.背景         PCA(Principal Component Analysis),PAC的作用主要是减少数据集的维度,然后挑选出基本的特征.         PCA的主要思想是移动坐标轴, ...

  8. [网页游戏开发]Morn简介及使用教程

    网页游戏开发利器,morn系列教程之Morn简介及使用教程 网页游戏开发的一大部分工作是在和UI制作上,一个好的工具及框架能使开发事半功倍,Adobe自带flash IDE和Flex各有不足. Mor ...

  9. 实记处理mongodb的NUMA问题

    一次在启动mongodb的过程中,出现过NUMA这个问题, mongodb日志显示如下: WARNING: You are running on a NUMA machine. We suggest ...

  10. bzoj-2251 外星联络

    题意: 给出一个字符串,求出现次数超过1的子串的出现个数. 字符串长度<=3000: 题解: 题目问的是子串的个数.那么首先我们要找到全部的子串. 而字符串的全部后缀的前缀能够不重不漏的表示全部 ...