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'})
})

转载于:https://www.cnblogs.com/wdxue/p/8341940.html

angular之两种路由相关推荐

[html] history和hash两种路由方式的最大区别是什么？
[html] history和hash两种路由方式的最大区别是什么? hash 只在当前URL内刷新,history支持多个URL 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
【硬核解说】一口气讲明白Angular的5种路由守卫RouteGuard是嘛玩意儿
Angular的常用路由守卫有5种,按照执行顺序: ① CanLoad:进入到当前路由的时候触发(若用户没有权限访问,相应的模块并不会被加载.这里是指对应组件的代码). ↓ ② CanAcitivat ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
Vue-Router的两种路由模式
对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. ...
vue 的两种路由模式
第一种 hash 模式后面带#号 http://xx.xxx.x.xxx:8080/#/index 切换路由,只改变#后面的值,就可以切换路由,不重新刷新页面,浏览器也会记录,左右箭头可以进行前进和 ...
vue的两种路由模式原理
参考:https://juejin.cn/post/7127143415879303204 react中路由模式分为hash路由和history路由.hash路由的原理是window.onhashch ...
vue中两种路由跳转拼接参数
this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
前端路由的两种实现原理
2019独角兽企业重金招聘Python工程师标准>>> History API 这里不细说每一个 API 的用法,大家可以看 MDN 的文档:https://developer.mo ...

angular之两种路由

安装angular

自带路由

UI.route路由

angular之两种路由相关推荐

最新文章

热门文章