我是angularjs的新手，刚刚开始弄脏我的手。我已经下载了角度种子，并开始改变它。我有一个导航栏，当用户导航时显示不同的html页面。问题是页面正在正确加载，但我在那个没有加载的html页面的脚本标签中有一些javascript，它也没有在控制台中抛出任何错误。 这是我的index.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="/css/style1.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#/view1">Page 1</a></li>
<li><a href="#/view2">Page 2</a></li>
</ul>
</div>
</nav>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<!-- In production use:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
-->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
这是我的app.js
＆＃39;使用严格的＆＃39;;
angular.module('myApp', [
'ngRoute',
'myApp.view1',
'myApp.view2',
'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/view1'});
}]);
这是我的view1.js：
'use strict';
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: 'view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
这是我的view1.html，其中包含一个javascript脚本标记：
<div class="row">
<div class="charts">
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-sign-in fa-3x" ></i>
</div>
<div id="stats1"class="stats_box">
<span class="info-box-text">Number of sign-ups</span>
<span id="sign-up" class="percent">56,000</span>
</div>
<i id="red" class="fa fa-circle-o text-red" value="11000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="12000"></i>
<i id="green" class="fa fa-circle-o text-green" value="13000"></i>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-user fa-3x"></i>
</div>
<div id="stats2" class="stats_box">
<span class="info-box-text">Daily active users</span>
<span id="active" class="percent">23,000</span>
</div>
<div class='firstbox' id='fb2' >
<i id="red" class="fa fa-circle-o text-red" value="21000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="22000"></i>
<i id="green" class="fa fa-circle-o text-green" value="23000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats3"class="stats_box">
<span class="info-box-text">Average time active</span>
<span class="percent">80,000</span>
</div>
<div class='firstbox' id='fb3'>
<i id="red" class="fa fa-circle-o text-red" value="31000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="32000"></i>
<i id="green" class="fa fa-circle-o text-green" value="33000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget ">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats4" class="stats_box">
<span class="info-box-text">Total time run</span>
<span class="percent">39,000</span>
</div>
<div class='firstbox' id='fb4' >
<i id="red" class="fa fa-circle-o text-red" value="41000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="42000"></i>
<i id="green" class="fa fa-circle-o text-green" value="43000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget states-mdl">
<div class="sparkline">
<i class="fa fa-clock-o fa-3x"></i>
</div>
<div id="stats5"class="stats_box">
<span class="info-box-text">Total distance covered</span>
<span id="distance"class="percent">20,000</span>
</div>
<div class='firstbox' id='fb5' >
<i id="red" class="fa fa-circle-o text-red" value="51000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="52000"></i>
<i id="green" class="fa fa-circle-o text-green" value="53000"></i>
</div>
</div>
<div class="col-md-4 charts-grids stats-widget">
<div class="sparkline">
<i class="fa fa-bolt fa-3x"></i>
</div>
<div id="stats6"class="stats_box">
<span class="info-box-text">10K activated</span>
<span id="activated"class="percent">26,000</span>
</div>
<div class='firstbox' id='fb6' >
<i id="red" class="fa fa-circle-o text-red" value="61000"></i>
<i id="yellow" class="fa fa-circle-o text-yellow" value="62000"></i>
<i id="green" class="fa fa-circle-o text-green"value="63000"></i>
</div>
</div>
<div class="clearfix"> </div>
</div><!--end charts-->
</div><!--end row-->
<script>
var barChartData = {
labels : ["No. of sign-ups","Daily active users","Average time active","Total time run","Total distance covered","10K activated"],
datasets : [
{
fillColor : "#dd4b39",
strokeColor : "#dd4b39",
data : [10000,13000,56081,42001,5000,40000]
},
{
fillColor : "#f39c12",
strokeColor : "#f39c12",
data : [40000,70000,55000,21001,45023,70121,60093]
},
{
fillColor : "#00a65a",
strokeColor : "#00a65a",
data : [43010,75432,50966,66300,39000,12010,33098]
}
]
};
new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>