RouteProvider不工作

时间:2015-09-01 14:10:41

标签: javascript html angularjs angularjs-routing

我试图在angular中使用routeProvider,但它没有工作 我的HTML

 <html>
<head>      
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body ng-app="Myapp">
     <ng-view></ng-view>
</body>
<script src="app.js"></script>
</html>

这是app.js

var app = angular.module('Myapp',[]);
app.config(function($routeProvider){
    $routeProvider.when("/",
        {
        templateUrl:'data.html',
        controller: 'myctrl'
        }
    )
});
app.controller('myctrl',function($scope){
    $scope.model= {
        msg:"Route Worked"
    }
});

我的模板

<h1>{{model.msg}}</h1>

2 个答案:

答案 0 :(得分:1)

您需要先安装angular-route并在项目中加入。然后像你一样在你的应用程序中加载模块

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

详细信息进一步Documention

答案 1 :(得分:1)

Html 包含<script>的ngRoute。

<html>
    <head>      
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.14/angular-route.js"></script>
    </head>
    <body ng-app="Myapp">
         <ng-view></ng-view>
    </body>
    <script src="app.js"></script>
</html>

app.js

var app = angular.module('Myapp',["ngRoute"]);
app.config(function($routeProvider){
    $routeProvider.when("/",
        {
            templateUrl:'data.html',
            controller: 'myctrl'
        }
    )
});

app.controller('myctrl',function($scope){
    $scope.model= {
        msg:"Route Worked"
    }
});