AngularJs多重视图和路由的使用

时间 2019-11-17

原文原文链接

使用AngularJs来作多重视图和路由是在方便不过了，在开发过程当中，都有许多的页面，而这些页面都有相同的部分，好比页面的头部和尾部一般都是同样的，变化的都是主体部分，还有就是一些后端管理的一些项目，一般不变的都是头部，尾部和菜单部分，变化的都是右边的内容部分，使用AngularJs的多重视图和路由就能够很方便的实现这样的效果。在实现以前须要准备两个文件，一个是angular的主JS文件，另外一个是angular的路由JS文件，以下：html

<script src="js/angular.min.js"></script>
<script src="js/angular-route.min.js"></script>

在页面中引入这两个JS文件就可使用angular了，这里将实现这效果分为以下几步：angularjs

1.建立一个简单的布局文件后端

2.建立一个模块，能够写在当前的布局文件中也能够新开一个js文件，为了方便管理仍是分开好点数组

3.建立路由规则app

4.若是有用到控制器，再建立控制器

ide

接下来就具体来实现这个效果：布局

1.编码

<html>
    <meta charset="UTF-8">
    <script src="js/angular.min.js"></script>
    <script src="js/angular-route.min.js"></script>
    <title></title>
 
     <body>
    <header>
        <h1>页面头部</h1>
    </header>
    <!--这里就是渲染其余视图的地方-->
    <div data-ng-view=""></div>
    <footer>
        <h1>页面底部</h1>
    </footer>
    </body>
</html>

在angularjs中就是经过ng-view指令和路由结合在一块儿。url

2.建立模块spa

var mainApp=angular.module("main.app",['ngRoute']);

由于要使用路由，因此必须将ngRoute依赖加入进来

3.建立路由规则

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>内容部分</h1>"
    }).when("/index",{
        templateUrl:"index.html"
    }).otherwise({
        template:"<h2>这个是默认的模板哦</h2>"
    });
}]);

如上，咱们已经用when方法设置了两个路由。otherwise方法会在没有任何路由匹配时被调用，用它设置了一个默认的提示路由。能够看出来，这里有两中路由，一个路由是使用的模板，另外一个是使用的模板路径，其实在路由中还有不少的属性能够配置，好比配置controller,

resolve,redirectTo.

在路由中配置控制器，以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>内容部分</h1>",
        controller:"MainController"
    });
}]);

也能够写成这样

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>内容部分</h1>",
        controller:function($scope){}
    });
}]);

若是须要使用resolve,必须配置控制器，不然会报错，若是使用resolve属性，那么angularjs会将属性的键注入到配置的控制器中，使用以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>内容部分{{name}}</h1>",
        controller:"MainController",
        resolve:{
            name:function(){
                return "张三";
            }
        }
    });
}]);

列表对象能够是:

键：是注入到控制器中的名称

工厂：能够是一个服务工厂，也能够是一个返回值

在控制器中是这样获取上面注入的键

mainApp.controller("MainController",["name","$scope",function(name,$scope){
    $scope.name=name;
}]);

redirectTo的使用，它的做用是作转发，以下：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/",{
        template:"<h1>内容部分{{name}}</h1>",
        controller:"MainController",
        resolve:{
            name:function(){
                return "张三";
            }
        },
        redirectTo:"/index"
    }).when("/index",{
        templateUrl:"index.html"
    });
}]);

若是访问的是第一个路由，由于里面配置了redirectTo属性，那么就会转到它所配置的路由上。

到这里路由的配置就算完成了，若是须要获取路由的参数，能够经过控制器来获取。

$routeParams：

可使用它来获取路由参数，好比咱们将路由配置成以下格式：

mainApp.config(["$routeProvider",function($routeProvider){
    $routeProvider.when("/index/:name",{
        templateUrl:"index.html"
    });
}]);

那么访问的格式就是/index/zhangsan,这样经过控制器来获取的参数格式就是{"name":"zhangsan"},以下：

mainApp.controller("MainController",["$scope","$routeParams",function($scope,$routeParams){
    $scope.name=$routeParams;
}]);

$location服务，能够用它来解析请求的URL中的相关信息，控制器使用以下：

mainApp.controller("MainController",["$scope","$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>",function($scope,$<span style="font-family: Arial, Helvetica, sans-serif;">location</span>){
     
}]);

$location服务下有以下方法：

1.path();获取当前页面的路径，也能够设置一个新的路径path("/")，这样就修改成“/”的路由了

$location.path();//获取

$location.path("/");//设置

2.replace()
若是你但愿跳转后用户不能点击后退按钮（对于登陆以后的跳转这种发生在某个跳转以后的再次跳转颇有用），AngularJS提供了replace()方法来实现这个功能：
$location.path('/home');
$location.replace();
// 或者
$location.path('/home').replace();

3.absUrl()
absUrl()方法用来获取编码后的完整URL：
$location.absUrl()

4.hash()
hash()方法用来获取URL中的hash片断：
$location.hash(); // 返回当前的hash片断

5. host()
host()方法用来获取URL中的主机：
$location.host();// 当前URL的主机

6. port()
port()方法用来获取URL中的端口号：
$location.port();// 当前URL的端口

7. protocol()
protocol()方法用来获取URL中的协议：
$location.protocol();// 当前URL的协议

8. search()
search()方法用来获取URL中的查询串：
$location.search();
咱们能够向这个方法中传入新的查询参数，来修改URL中的查询串部分：
// 用对象设置查询
$location.search({name: 'Ari', username: 'auser'});
// 用字符串设置查询
$location.search('name=Ari&username=auser');
search方法能够接受两个参数。
search（可选，字符串或对象）
这个参数表明新的查询参数。hash对象的值能够是数组。
paramValue（可选，字符串）
若是search参数的类型是字符串，那么paramValue会作为该参数的值覆盖URL当中的对应
值。若是paramValue的值是null，对应的参数会被移除掉。

9. url()
url()方法用来获取当前页面的URL：
$location.url(); // 该URL的字符串
若是调用url()方法时传了参数，会设置并修改当前的URL，这会同时修改URL中的路径、
查询串和hash，并返回$location。
// 设置新的URL
$location.url('/home?name=Ari#hashthing');
url()方法能够接受两个参数。
url（可选，字符串）
新的URL的基础的前缀。

replace（可选，字符串）想要修改为的路径。