我试图使用一些依赖于角度应用程序内部框架的javascript组件，但似乎javascript的框架并没有加载。 有没有办法让所有组件都工作，或者我必须为每个组件做一个指令？
的index.html
<head>
<meta charset="utf-8">
<title>Title</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.1/material.blue_grey-light_blue.min.css" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- load angular, ngRoute, ngAnimate -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script src="js/material.min.js"></script>
<script src="js/functions.js"></script>
</head>
<body ng-app="animateApp">
<div class="page {{ pageClass }}" ng-view></div>
</body>
随机HTML页面
<!-- Header -->
<div class="mdl-layout mdl-js-layout mdl-layout--overlay-drawer-button">
<header class="mdl-layout__header mdl-layout__header--waterfall">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Gallery</span>
<!-- Spacer -->
<div class="mdl-layout-spacer"></div>
<!-- Right Menu -->
<button id="header-menu" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">view_quilt</i>
</button>
</div>
<div class="mdl-layout__header-row">
<span>123 photos</span>
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<nav class="waterfall mdl-navigation">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right">
<label class="mdl-button mdl-js-button mdl-button--icon" for="waterfall-exp">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" name="sample" id="waterfall-exp" />
</div>
</div>
</nav>
</div>
</header>
<!-- Sidebar -->
<div class="mdl-layout__drawer">
<!-- Top -->
<div class="mdl-card mdl-shadow--2dp mdl-color--blue-grey-900 mdl-color-text--blue-grey-50 drawer-profile">
<div class="mdl-card__title user">
<img src="img/user.jpg" />
<span class="user-name">Jonathan Lee</span>
<span class="user-mail">jonathan@email.com</span>
<button id="user-menu" class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">arrow_drop_down</i>
</button>
</div>
<!-- Top-right User -->
<div class="mdl-card__menu">
<img class="sub-user" src="img/user.jpg" />
</div>
</div>
<!-- Dropdown Menu -->
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="user-menu">
<li class="mdl-menu__item">hello@email.com</li>
<li class="mdl-menu__item">info@domain.net</li>
<li class="mdl-menu__item">Add another account...</li>
</ul>
<!-- Main Navigation -->
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#"><i class="material-icons">home</i><span>Homepage</span></a>
<a class="mdl-navigation__link" href="#gallery-masonry.html"><i class="material-icons">account_circle</i><span>About</span></a>
<a class="mdl-navigation__link" href="#gallery.html"><i class="material-icons">collections</i><span>Gallery</span></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">star</i><span>Features</span></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">chat</i><span>Chat</span></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">contacts</i><span>Contact</span></a>
<div class="drawer-separator"></div>
<a class="mdl-navigation__link" href=""><i class="material-icons">email</i><span>Inbox</span></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">send</i><span>Send</span></a>
<a class="mdl-navigation__link" href=""><i class="material-icons">settings</i><span>Setting</span></a>
</nav>
</div>
<!-- Page Content -->
<main class="mdl-layout__content">
<div class="page-content">
<div class="mdl-grid gallery">
<div class="mdl-cell mdl-cell--4-col">
<a href="img/gallery.jpg" class="swipebox" title="Custom Caption"><img src="img/gallery.jpg"></a>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="img/gallery.jpg" class="swipebox" title="Custom Caption"><img src="img/gallery.jpg"></a>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="img/gallery.jpg" class="swipebox" title="Custom Caption"><img src="img/gallery.jpg"></a>
</div>
</div>
<div class="mdl-grid gallery">
<div class="mdl-cell mdl-cell--8-col">
<a href="img/test.jpg" class="swipebox" title="Custom Caption"><img src="img/test.jpg"></a>
</div>
<div class="mdl-cell mdl-cell--4-col">
<a href="img/gallery.jpg" class="swipebox" title="Custom Caption"><img src="img/gallery.jpg"></a>
</div>
</div>
<div class="mdl-grid gallery">
<div class="mdl-cell mdl-cell--12-col">
<a href="img/big.jpg" class="swipebox" title="Custom Caption"><img src="img/big.jpg"></a>
</div>
</div>
</div>
</main>
</div>
的javascript
var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']);
animateApp.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'home.html',
controller: 'mainController'
})
.when('/gallery', {
templateUrl: 'gallery.html',
controller: 'galleryController'
})
.when('/gallery-masonry', {
templateUrl: 'gallery-masonry.html',
controller: 'gallerymasonryController'
});
});
animateApp.controller('mainController', function($scope) {
$scope.pageClass = 'home';
});
animateApp.controller('galleryController', function($scope) {
$scope.pageClass = 'gallery';
});
animateApp.controller('gallerymasonryController', function($scope) {
$scope.pageClass = 'gallerymasonry';
});