Question

我开始自学AngularJS，并且因为我的测试代码返回错误而导致第一道障碍，＃34;＆＃39; angular＆＃39;未定义＆＃34;。

我认为这是因为＆＃34; angular＆＃34;我开始引用它时没有加载库但是我不明白为什么会出现这种情况。

我的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在＆＃34; main.js＆＃34;在HTML的最后一行引用。

＆＃34; main.js＆＃34;的内容是

'use strict';

angular.module('app',['ui.router'])
.config(['$urlRouteProvider','$stateProvider',function($urlRouteProvider,$stateProvider)
{
    $urlRouteProvider.otherwise('/');

    $stateProvider
        .state('home', {
            url: '/',
            templete: 'testing 123'
        });

}]);

Answer 1

我测试了您的代码，唯一的问题是$urlRouteProvider错误

解决方案

main.js

angular.module('app',['ui.router'])
.config(['$urlRouterProvider','$stateProvider',function($urlRouterProvider,$stateProvider) {
  $stateProvider
    .state('home', {
        url: '/',
        templete: '<div>testing 123</div>'
    });

  $urlRouterProvider.otherwise('/');
}]);

bower.json（bower install）

{
  "name": "whatever",
  "version": "0.0.0",
  "dependencies": {
    "angular-ui-router": "~0.2.10",
    "angular": "~1.2.18",
    "jquery": "~2.1.1",
    "modernizr": "~2.8.2"
  }
}

'angular'没有定义 - 为什么不呢？

1 个答案:

解决方案