anjular js基础（路由的配置）

Angular js是由google创建的一种js框架，使用它可以扩展应用程序中的html词汇，从而在web应用程序中使用html声明动态内容。

了解创建一个页面所需的资源，创建出我们想要的页面后，通过配置路由，可以正确的了解如何正确的展示一个页面，以及从一个页面跳到另一个页面。

配置路由的步骤如下：

1.引入所需的ng-route包：

ng-route包为页面的跳转提供环境，我们需要在main.html中用<script>标签引入。讲完下面的步骤后会用代码展示出来。

2.引入文件之间的依赖关系：

<html lang="en" ng-app="orderMasterApp">

3.配置路由：

a.首先来了解一下页面地址和控制器之间的关系：

扫描二维码关注公众号，回复： 805730 查看本文章

.when('/order.html',Handler)//页面地址和控制器

然后可以写成：

.when(/'order.html',{templateURL:'页面模板'，controller:'控制器'})

然后配置order.html的控制器：

.when('order',{templateURL: 'order,html'
                         controller: '控制器的名字'})

下面来构造一个控制器，并设置它的名字，如设置order.html的控制器名字为：OrderCtrl，代码如下：

angular.module('orderMasterApp')
      .controller('OrderCtrl',function($scope,$location){
            这里面是控制器控制的内容
})

在实际写的过程中，我们会这样写：

anjular .module('orderMasterApp', [ngRoute])
.config(function ($routeProvider) {
        $routeProvider//路径的提供者
            .when('/', {
                templateUrl: 'html/order.html',//模板
                controller: 'OrderCtrl'//控制器
            })

路由是由$routeProvide来声明，是$route服务的提供者。

下面拿我写的代码展示一下：

html页面：

<div class="header">订餐</div>
    <div class="order">
        <button class="help_order" ng-click="go_to_order()">帮订餐</button>
        <button class="buttons" ng-click="go_to_menu()">看订单</button>
    </div>

控制器js页面：

var app = anjular .module('orderMasterApp', [ngRoute])

app.controller('OrderCtrl',function($scope,$location){
        $scope.go_to_order=function(){
            $location.path('select_menu')
        }
    })

route页面：

app.config(function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'html/order.html',
                controller: 'OrderCtrl'
            })
 })

main，html页面：

<html lang="en" ng-app="orderMasterApp">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="download/angular.min.js "></script>
    <script src="download/angular-route.min.js  "></script>
    <script src="js/route.js"></script>
    <script src="js/order_controller.js "></script>
</head>
<body>

     <div ng-view></div>
</body>
</html>

通过main.html页面上面order.html和js里面的代码展示在页面上，在main.html页面把需要引入的提供环境的文件都引入，点击按钮上的帮订餐按钮后就会执行控制js页面里面的go_to_order的函数，这里没有展示下个页面，只是将第一个页面展示出来了，如果写更多的页面的话都是用这个方法来配置路由实现跳转的。

anjular js基础（路由的配置）

猜你喜欢