Angularjs ng-route用法

最新推荐文章于 2020-07-07 07:01:00 发布

Manson_zh

最新推荐文章于 2020-07-07 07:01:00 发布

阅读量592

点赞数

分类专栏： Angularjs 文章标签： angularjs ng-route

本文链接：https://blog.csdn.net/Manson_zh/article/details/71602067

版权

Angularjs 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Angularjs 的ng-route应用于多视图的单页面应用，模块化开发

1,引用文件

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

2,主页面配置

<!doctype html>
<meta charset="UTF-8">
<html>
<head>
</head>
<body ng-app='myApp'>

<h1>AngularJS ng-route</h1>
<aside>
    <li><a href="#/">首页</a></li>
    <li><a href="#/part1">part1</a></li>
    <li><a href="#/part2">part2</a></li>
    <li><a href="#/part3">part3</a></li>
</aside>

<div ng-view></div>


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

3,路由跳转页part1

<div ng-controller="part1Controller">
    <h1>part1</h1>
</div>

4,JS

var app = angular.module('myApp',['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'首页'})
        .when('/part1',{templateUrl:'part1.html',controller:'part1Controller'})
        .otherwise({redirectTo:'/'});
}]);