• 首页
  • 问答

    • AngularJS 避繁就简的路由

    2023-07-08 10:41 25次浏览 问答

    AngularJS 路由允许我们通过不同的 URL 访问不同的内容。通过 AngularJS 可以实现多视图的单页Web应用（single page web application，SPA）。通常我们的URL形式为 http://runoob。
    com/first/page，但在单页Web应用中 AngularJS 通过 # + 标记 实现，例如：http://runoob。com/#/first
    http://runoob。com/#/second
    http://runoob。
    com/#/third先看看$routeProvider 的配置对象属性方法：路由设置对象解析：$routeProvider。when(url(路由名称), { template: string（模板提示字符串）, templateUrl: string（模板路径URL）, controller: string, function 或 array（在当前模板创建控制器，生成新的 $scope 作用域）, controllerAs: string(控制器别名), redirectTo: string, function（重定向地址）, resolve: object<key, function>（当前路由所依赖的模块）});实现路由的大致步骤：第一步：导入ngRoute模块<script type=”text/javascript” src=”js/angular-route。
    min。js”></script>第二步：在应用模块中使用ngRouteangular。module(“routeApp”, [“ngRoute”])第三步：使用 ng-view 指令<div ng-view>config([‘$routeProvider’, function ($routeProvider){ $routeProvider 。when(‘/home’, { templateUrl : ‘home。tpl。html’, controller : ‘HomeCtrl’, }) 。
    when(‘/computer’, { templateUrl : ‘computer。html’, }) 。when(‘/phone’, { templateUrl : ‘phone。html’, }) 。when(‘/other’, { templateUrl : ‘other。
    tpl。html’, controller : ‘OtherCtrl’, })}])。第五步：通过超链接使用路由<ul>1 route。
    html页面<html> <head> <meta charset=”utf-8″> <title>AngularJS 路由实例</title> <link rel=”stylesheet” type=”text/css” href=”css/bootstrap。
    min。css”> </head> <body ng-app=’routeApp’> <ul>min。js”></script> <script type=”text/javascript” src=”js/bootstrap。min。js”></script> <script type=”text/javascript” src=”js/angular。
    min。js”></script> <script type=”text/javascript” src=”js/angular-route。min。js”></script> <script type=”text/ng-template”>tpl。html”> <h1>{{data}}</h1> </script> <script type=”text/ng-template”>module(“routeApp”, [“ngRoute”]) 。config([‘$routeProvider’, function ($routeProvider){ $routeProvider 。when(‘/home’, { templateUrl : ‘home。
    tpl。html’, controller : ‘HomeCtrl’, }) 。when(‘/computer’, { templateUrl : ‘computer。html’, }) 。when(‘/phone’, { templateUrl : ‘phone。
    html’, }) 。when(‘/other’, { templateUrl : ‘other。tpl。html’, controller : ‘OtherCtrl’, }) }]) 。controller(‘defaultCtrl’, function ($scope) { $scope。
    computers = [ { id: 0, name: “宏基”, category: “Test”, price: 1。25 }, { id: 1, name: “联想”, category: “Test”, price: 2。45 }, { id: 2, name: “苹果”, category: “Test”, price: 4。
    25 } ]; $scope。phones = [ { id: 0, name: “三星”, category: “Test”, price: 1。25 }, { id: 1, name: “荣耀”, category: “Test”, price: 2。
    45 }, { id: 2, name: “魅族”, category: “Test”, price: 4。25 } ]; }) 。controller(“HomeCtrl”, function ($scope, $route) { $scope。
    $route = $route; $scope。data = “Home Home”; }) 。controller(“OtherCtrl”, function ($scope, $route) { $scope。$route = $route; $scope。
    data = “Other Other”; }) </script> </body> </html>2。computer。html 页面<div>name}}</td> <td>{{item。category}}</td> <td>id}}”>phone。html 页面<div>name}}</td> <td>{{item。category}}</td> <td>id}}”>

    1.文章《AngularJS 避繁就简的路由》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《AngularJS 避繁就简的路由》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑