AngularJS1.0的使用总结笔记------003

最新推荐文章于 2018-03-08 15:30:40 发布

古语静水流深

最新推荐文章于 2018-03-08 15:30:40 发布

阅读量1.2k

点赞数

文章标签： angularjs 路由

本文链接：https://blog.csdn.net/zhanghuiqi205/article/details/60142513

版权

今天给大家来说说AngularJS1.0的路由部分。。。。

在使用路由的这个功能的时候，需要引入AngularJS的angular-route这个文件。放在angular之后。因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现

路由的概括：路由功能是由 routeProvider服务和 ng-view 搭配实现，ng-view相当于提供了HTML模板的挂载点，当切换url进行跳转时，不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。

一般主要通过两个方法：

when()：配置路径和参数;

otherwise：配置其他的路径跳转。 可以参考下面代码：

<!DOCTYPE html>
<html ng-app="myApp" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
</head>
<body ng-controller="myController">
    <li>
        <a href="#/">首页</a>
        <a href="#/news">新闻</a>
        <a href="#/music">music</a>
    </li>
    <ng-view></ng-view>   <!--各个单页面的挂载点-->                   
</body>
</html>

JavaScript部分：

<script>
    var app = angular.module('myApp', ['ngRoute']);
    //需要注入$routeProvider
    app.config(function ($routeProvider) {
        console.log('$routeProvider:',$routeProvider);
        //第一个参数：路由的地址
        //第二参数：路由的对象
        $routeProvider.when('/', {
            template: '<div>首页</div>'
        }).when('/news', {
            template: '<div>新闻页</div>'
        }).when('/music', {
            template: '<div>音乐</div>'
        }).when('/error', {
            template: '<div>无法找到</div>'
        }).otherwise({//当路由地址都无法匹配的时候，进入这个函数
            redirectTo: '/error'//重定向
        })
    });
    app.controller('myController', ['$scope', function ($scope) {
    }])
</script>

结果显示为：

angularjs提供的route自身有很多不足之处，不能进行很多深层次的嵌套。所以，我们一般会引入angular-ui-router.js这个文件。这个文件提供了新的路由配置项；

如下面的代码：提供了$stateProvider和$urlRouterProvider两个属性。（代码仅供参考）

angular.module('myApp',['ionic','myApp.controller','myApp.service','ngResource'])
	.config(function($stateProvider,$urlRouterProvider){
		$stateProvider.state('tabs',{
			url:'/tabs',
			templateUrl:'template/tabs.html',
			controller:'tabsController'
		})
		$stateProvider.state('download',{
			url:'/download',
			templateUrl:'template/download.html',
			controller:'loadController'
		})
		$urlRouterProvider.otherwise('/tabs')
	})

路由的核心思想如下：

路由通过不同的路径，通过路由设置的view加载不同的页面，不同的页面加载不同的controller也达到不同的控制，说白了，路由就是给应用定义“状态”。使用路由的机制是需要站在一个全局的角度思考问题的，所以从整体的构架上面需要考虑的比较多，需要预先定义好状态。当然我这里也是简单的介绍一下路由，路由的状态名字后面也可以跟随一些参数，以对应不同的页面。实现更多的信息展示，比如在上面的url:‘/tabs:id’(后面跟随一些参数)，根据参数的不同加载不同的信息，这就需要我们去后面请求不同的信息，这就需要我们的请求数据的代码了，这就是下面要讲的$http,这个代码需要的一些文件了。下一篇就讲一讲如何使用ngResource模块来实现。。。。。。。

古语静水流深

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS1.0的使用总结笔记------003

今天给大家来说说AngularJS1.0的路由部分。。。。在使用路由的这个功能的时候，需要引入AngularJS的angular-route这个文件。放在angular之后。因为angular-route.js需要传入window.angular这个参数，而这个参数只有在加载完angular才会出现路由的概括：路由功能是由 routeProvider服务和 ng-view 搭配实
复制链接

扫一扫