1、路由: angular:vue react angular都是单页面应用程序, 利用a标签的锚点 功能,页面之前跳转都是通过路由实现
2、路由的实现:
①angular使用路由 需要引入js文件 ②注入依赖 var app=angular.module('app',['ngRoute']) ; 路由注入到主模型上 ③使用路由 app.config() 里面注入服务 实现路由 ④配置项 路由提供的服务 $routeProvider app.config(['$routeProvider',function($routeProvider){ $routeProvider.when() }]) (1)$routeProvider服务 提供两个方法 .when() ;//配置路由的名称 .otherwise();//重定向 页面路由不对的不对 重新定向
(2) when('/名称',{//名称:使用英文 /home template:'展示内容', templateUrl:'展示内容',//路径 controller:['$scope',function($scope){
}] }) (3) otherwise({ //重定向 304 302 303 redirectTo:'/home' }) ⑤路由展示 <div ng-view></div> ⑥.路由导航 <a href="#!/home">第一页</a>
eg:
<ul> <li><a href="#!/home">首页</a></li>//#!/home阻止页面刷新,不刷新就能切换页面 <li><a href="#!/news">新闻</a></li> <li><a href="#!/dong">动态</a></li> </ul> <!-- 显示内容 --> <div ng-view></div> var app=angular.module('app',['ngRoute']); app.controller('main',['$scope','$location',function($scope,$location){ $location.path('/home') }]) //路由 app.config(['$routeProvider',function($routeProvider){ $routeProvider .when('/home',{ // template:'<h2>首页数据{{msg}}</h2>', // controller:['$scope',function($scope){ // $scope.msg='哈哈哈123' // }] templateUrl:'view/home.html', controller:['$scope',function($scope){ $scope.man='底下是一个数组', $scope.arr=[1,2,3,4,3,2] }] }) .when('/news',{ template:'<h2>新闻</h2>', }) .when('/dong',{ template:'<h2>动态</h2>' }) .otherwise({ redirectTo:'/home' }) }])③home.html页面
<div> <h3>首页的内容</h3> <p>第一段:{{man}}</p> <ul> <li ng-repeat='inte in arr track by $index'>{{inte}}</li> </ul> <ul> <li ng-repeat=''></li> </ul> </div>
