【发布时间】：2014-08-10 13:03:34
【问题描述】：
我开始自学 AngularJS，但我的测试代码返回错误“'angular' is not defined”，似乎正处于第一个障碍。
我认为这是因为当我开始引用“angular”库时没有加载它，但我不明白为什么会这样。
我的HTML文件如下
<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>FHIR Test Project</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="shortcut icon" href="/favicon.ico">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css(.tmp) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
<!-- build:js scripts/vendor/modernizr.js -->
<script src="../bower_components/modernizr/modernizr.js"></script>
<!-- endbuild -->
</head>
<body>
<!--[if lt IE 10]>
<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 class="container-fluid" ng-app="app">
<header ng-include="'templates/nav.html'"></header>
<div ui-view></div>
<div class="jumbotron">
<h1>'Allo, 'Allo!</h1>
<p class="lead">Always a pleasure scaffolding your apps.</p>
<p><a class="btn btn-lg btn-success" href="#">Splendid! <span class="glyphicon glyphicon-ok"></span></a></p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>HTML5 Boilerplate</h4>
<p>HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.</p>
<h4>Sass</h4>
<p>Sass is a mature, stable, and powerful professional grade CSS extension language.</p>
<h4>Bootstrap</h4>
<p>Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.</p>
<h4>Modernizr</h4>
<p>Modernizr is an open-souqqce JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.</p>
</div>
</div>
<footer ng-include="'templates/footer.html'"></footer>
</div>
<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/angular-ui-router/release/angular-ui-router.js"> </script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID.
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='//www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X');ga('send','pageview');
</script>
-->
<!-- build:js scripts/plugins.js -->
<!-- endbuild -->
<!-- build:js({app,.tmp}) scripts/main.js -->
<script src="scripts/main.js"></script>
<!-- endbuild -->
</body>
</html>
我的 JS 在 HTML 最后一行引用的“main.js”中。
“main.js”的内容是
'use strict';
angular.module('app',['ui.router'])
.config(['$urlRouteProvider','$stateProvider',function($urlRouteProvider,$stateProvider)
{
$urlRouteProvider.otherwise('/');
$stateProvider
.state('home', {
url: '/',
templete: 'testing 123'
});
}]);
【问题讨论】：
-
您可以通过按 f12 并查看开发人员工具来检查您的浏览器是否在查找角度时遇到问题。在 Chrome/FF 中有一个网络选项卡，您可以在其中查看尝试加载的项目及其状态。在 IE 中，您可以查看脚本标签并查看所有已加载的脚本。我的猜测是您没有正确引用角度的路径。
-
scrappedcola - 我在 chrome 上并且已经通过开发工具检查过，两个 angular js 文件正在加载
-
嗯 - 很多反对票正在进行，为什么？
标签： javascript angularjs