angularjs 路由的使用

最新推荐文章于 2020-12-20 12:02:04 发布

binggoogle

最新推荐文章于 2020-12-20 12:02:04 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： angularjs

本文链接：https://blog.csdn.net/binggoogle/article/details/49455423

版权

前端专栏收录该内容

76 篇文章 0 订阅

订阅专栏

index.html

入口：ng-app:”myapp”
显示代码片段: ng-view

<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src = "./framework/angular.min.js"></script>
<script type="text/javascript" src="./framework/angular-route.js"></script>

<script type="text/javascript" src="./js/app.js"></script>
<script type="text/javascript" src="./js/controllers.js"></script>
</head>
<body >
    <div ng-view></div>      
</body>
</html>

app.js

入口文件，定义module和route；
注意，使用路由，需要引入 ngRoute 模块，不然会 console显示[Error: [$injector:modulerr]][6]；
app模块定义了附加的 controllers，包含helloCtrl,worldCtrl

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

myapp.config(['$routeProvider',function($routeProvider){
    $routeProvider
    .when('/hello',{
        templateUrl:'tpls/hello.html',
        controller:'helloCtrl'
    })
    .when('/world',{
        templateUrl:'tpls/world.html',
        controller:'worldCtrl'
    })
    .otherwise({
        redirectTo:'/hello'
    });
}]);

controllers.js

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

appCtrl.controller('helloCtrl',['$scope',function($scope){
    $scope.greet = 'somebody';
}])


appCtrl.controller('worldCtrl',['$scope',function($scope){
    $scope.wwws = [{"title":"aa"},{"title":"bb"}];
}])