zoukankan      html  css  js  c++  java
  • angular入门-路由控制

    前端根据url做路由控制,主要用到angular中route模块$routeProvider

    遇到的问题:引入angualar按照教程所说一步步的进行,总是调试不出来和各种报错,报错原因无非就是$routeProvider 未定义

    主要是引入的angular.js没有包含angular-route这个模块需要我们自己额外的进行引用

    app.js

    1、定义模块

    2、定义路由规则

    controller.js

    定义控制器,不同的路由对应不同templateUrl  和controller

    index.html

    加载app.js controller.js

    view文件下放模块文件

    list.html

    detail.html

    代码部分:

    app.js

    //app.js
                var routeApp = angular.module('routeApp',['ngRoute']);
                routeApp.config(['$routeProvider',function ($routeProvider) {
                    $routeProvider
                        .when('/list', {
                            templateUrl: 'views/list.html',
                            controller: 'RouteListCtl'
                        })
                        .when('/list/:id/:content', {
                            templateUrl: 'views/detail.html',
                            controller: 'RouteDetailCtl'
                        })
                        .otherwise({
                            redirectTo: '/list'
                        });
                }]);

    controller.js

    //controller.js
     routeApp.controller('RouteListCtl',function($scope) {
        });
    routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
        $scope.id = $routeParams.id;
        $scope.content = $routeParams.content;
        console.log($routeParams)
    });

    index.html

    <!doctype html>
    <html ng-app="routeApp">
        <head>
        </head>
        <body>
             <div ng-view></div>
            <script src="angular.js"></script>
            <script src="angular-route.js"></script>
            <script src="app.js"></script>
            <script src="controller.js"></script>
        </body>
    </html>

    view/list.html

    1 <hr/>
    2 <h3>Route : List.html</h3>
    3 <ul>
    4     <li ng-repeat="id in [1, 2, 3 ]">
    5         <a href="#/list/{{ id }}/asdfsfdsf"> ID{{ id }}</a>
    6     </li>
    7 </ul>

    view/detail.html

    <hr/>
    <h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>
    <small>{{content}}</small>
  • 相关阅读:
    AspNet Core 核心 通过依赖注入(注入服务)
    AspNetCore 中使用 InentityServer4(2)
    AspNetCore中使用Ocelot之 IdentityServer4(1)
    AspNetCore+Swagger 生成Model 描述
    scp带密码拷贝文件
    redis集群之节点少于六个错误-解决
    [AWS DA Guru] Serverless compute Exam Tips
    [AWS] Lambda Invocation types
    [AWS Developer Guru] CI/CD
    [AWS] Lab: CloudFormation nested stack
  • 原文地址:https://www.cnblogs.com/knightshibiao/p/3823743.html
Copyright © 2011-2022 走看看