gpt4 book ai didi

javascript - Angular Material 不工作 AngularJS

转载 作者:行者123 更新时间:2023-11-30 15:34:25 25 4
gpt4 key购买 nike

http://plnkr.co/edit/Lvdl4XpReQr6AzsuOQhP?p=preview

使用 Angular Material 时出现以下错误:未捕获错误:[$injector:unpr] http://errors.angularjs.org/1.4.2/ $injector/unpr?p0=%24%24forceReflowProvid…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue

路由.JS :

(function () {
var app = angular.module('angularMaterial', ['ngRoute','ngMaterial']);
app.config(function ($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: 'main.html',
controller: 'MainController'
})
.otherwise({ redirectTo: "/main" });

});
}());

Index.html : 用于显示基于路由的 html 页面的 Shell

<html lang="en" ng-app="angularMaterial">

<head>
<title>Angular Material Fundamentals</title>
<meta charset="utf-8" />
<link data-require="angular-material@*" data-semver="1.1.0" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css" />
<script data-require="angular-material@*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-animate@*" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular-animate.js"></script>
<script data-require="angular-aria@1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script data-require="angular-messages@1.5.5" data-semver="1.5.5" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="routing.js"></script>
<script src="MainController.js"></script>
</head>

<body ng-cloak="">
<header>
<h1>
Angular Material Fundamentals </h1>
</header>
<div ng-view=""></div>
</body>

</html>

主要.html:

<div>

<md-content flex layout-padding>
{{message}}
</md-content>


</div>

主 Controller .js :

function MainController($scope) {
$scope.message = "Angular Material is a UI component library for Angular JS developers. Angular Material components helps in constructing attractive, consistent, and functional web pages and web apps while adhering to modern web design principles like browser portability, device independence, and graceful degradation. It helps in creating faster, beautiful, and responsive websites. It is inspired from Google Material Design.";

}


MainController.$inject = ['$scope'];
angular.module('angularMaterial').controller('MainController', MainController);

请帮忙.....谢谢

最佳答案

Angular material对angular有依赖,所以需要先添加angular.js,再添加angular-material.min.js资源文件。

添加脚本资源的顺序应该是

<script data-require="angular.js@1.6.0" data-semver="1.6.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.js"></script>
<script data-require="angular-material@*" data-semver="1.1.0" src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

笨蛋:http://plnkr.co/edit/D8KNdE4phpxwCf6N5s4x?p=preview

关于javascript - Angular Material 不工作 AngularJS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41792173/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com