angularJs---route

route

　　route---‘路由’

　　ajax的弊端：

　　　　1.ajax请求不会留下history记录

　　　　2.用户无法直接通过url进入应用中的指定页面（保存书签，分享朋友？）

　　　　3.ajax不利于SEO

　　前端路由的实现原理是什么？

　　　　#哈希也叫锚点，通过使用锚点实现页面刷新但不跳转。

　　　　html5中的history API

　　route可以说是angular的一大重点。 route可以实现局部页面无刷新跳转（相当于页面里嵌套了页面）　　

　　ng官方提供了一套路由 ng-route

　　1.引入外部文件：angular-route.js 2.把ngRoute模块注入到主模块 3.使用config函数注入$routeProvider服务 4.在需要载入页面的地方加上ng-view

　　$routeProvider的方法：

　　　　when（‘url’,{//code}）该对象的属性有template/templateUrl--文件地址 controller：‘控制器名称’ url表示拼接在网址后头 #!url

　　　　otherwise（{//code}）该方法表示默认的页面，接收一个对象，该对象有个属性redirectTo 表示从重定向

　　需要注意的是：当设置了controller选项时，主控制器就不能用在标签含有属性ng-view里面了。

index home

    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="./js/angular.js"></script>
<script src="./js/angular-route.js"></script>
<script>
var app = angular.module('app',['ngRoute']);
app.controller('myCtrl',function($scope){
$scope.name = 'dk';
})
app.config(function($routeProvider){
$routeProvider.when('/index',{
templateUrl:'./temp/index.html',controller: 'indexCtrl'
}).when('/home',{
templateUrl: './temp/home.html'
}).otherwise('/index',controller: 'indexCtrl'
})
});
app.controller('indexCtrl',function($scope){
$scope.name = 'jjk'
})
</script>

　　在chrome中显示：

　　从外部引入angular-route.js 但无法进行深层次嵌套，这时，可以选用第3方插件：angular-ui-route.js

　　用ng制作的spa（单页面应用）经常有路由嵌套、路由平行的情况

　　　　第一种情况：页面嵌套

index

    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

</body>
<script src="./js/angular.js"></script>
<script src="./js/angular-ui-router.js"></script>
<script>
var app = angular.module('app',['ui.router']);
app.controller('myCtrl',function($scope){
$scope.name = 'dk';
})
app.config(function($stateProvider,$urlRouterProvider)
{
$urlRouterProvider.when('','/index');
$stateProvider.state('index',{
url:'/index',templateUrl:'./temp/index.html'
// controller: 'indexCtrl'
 })
.state('index.page1',{
url: '/page1',templateUrl: './temp/page1.html'

    })
    .state(</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;index.page2</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,{
        url:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;/page2</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;,templateUrl:</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;./temp/page2.html</span><span style="background-color: #f5f5f5; color: #000000"&gt;'</span><span style="background-color: #f5f5f5; color: #000000"&gt;
    })
})

</script>

　　上面的代码中：

 $urlRouterProvider.when('','/index'); 表示默认页面　url 表示在当前网址的基础上加上url　同样可以有controller选项。在chrome中显示：

　　第2种情况：多个ui-view存在同一个页面，互为平行关系。　　body部分：

index home

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;ui-view name</span><span style="color: #0000ff"&gt;='view2'</span><span style="color: #0000ff"&gt;></span>

<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;ui-view name</span><span style="color: #0000ff"&gt;='view3' </span><span style="color: #ff0000"&gt;style</span><span style="color: #0000ff"&gt;="border:1px solid red"</span><span style="color: #0000ff"&gt;></span>

    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>

index first

'
},"view2": {
template: '

index second

'
},"view3":{
template:"

three

"
}
}
})
.state('home',{
url: '/home',views: {
"view1": {
template: '

home first

home second

'
}
}
})
})
</script>

</html>

　　在chrome中显示：

　　路由传参：在我们平时做的页面跳转都会传参，如：https://i.cnblogs.com/EditPosts.aspx?postid=6556246&update=1， postid=6556246&update=1就是参数。那路由又是如何实现传参的呢？

　　在url选项中: ‘/index/:id’ id即为参数如果设置了参数凡是页面/index/hot、/index/news之类的 hot news均表示参数而不是指第2层ui-view。

　　一般在a标签里实现路由跳转有2种写法：

　　　　1. hot为参数

　　　　2. 使用ui-sref

　　　　 index表示路由的名字 ({id:hot})表示参数

$stateChangeStart '、' $stateChangeSuccess '、' $stateChangeError '等事件

app = angular.module('app',['ui.router','routers','directives','controllers','ionic' '$rootScope','$http', $rootScope.$on('$stateChangeSuccess', (toState.name = 'home.list'

            $http({
                url: </span>"https://cnodejs.org/api/v1/topics"<span style="color: #000000"&gt;,method: </span>'GET'<span style="color: #000000"&gt;,params: {
                    limit: </span>10<span style="color: #000000"&gt;,page: </span>1<span style="color: #000000"&gt;,tab: toParams.id
                }
            }).then(</span><span style="color: #0000ff"&gt;function</span><span style="color: #000000"&gt; (res) {
                </span><span style="color: #008000"&gt;//</span><span style="color: #008000"&gt; console.log(res.data);</span>
                <span style="color: #0000ff"&gt;if</span><span style="color: #000000"&gt; (res.data.success) {
                    $rootScope.news </span>=<span style="color: #000000"&gt; res.data.data;
                    console.log($rootScope.news);
                }
            })
        }
    }
)

}])

　　注入$rootScope服务，监听$stateChangeSuccess

　　$rootScope.$on('$stateChangeSuccess',function (event,fromParams)｛//code｝

请使用手机"扫一扫"x

angularJs---route

route

相关文章