Question

我正在研究Angular.js和Require.js。当我一起使用这两个时，角度不起作用。路由不起作用和角度表达式

任何人都可以指导我如何解决这个问题，提前谢谢

这是我的代码：

main.js

require.config({

    paths: {
        'angular': 'vendor/angular',
        'app':'app'
//        'ngResource': '../components/angular-resource/angular-resource',
//        'ngCookies': '../components/angular-cookies/angular-cookies',
//        'ngProgressLite': '../components/ngprogress-lite/ngprogress-lite'
    },
    shim: {
        ngResource: {
            deps: ['angular'],
            exports: 'angular'
        },
        ngCookies: {
            deps: ['angular'],
            exports: 'angular'
        },
        ngProgress: {
            deps: ['angular'],
            exports: 'angular'
        },
        angular: {
            exports: 'angular'
        }
    },
    baseUrl: '/Scripts'
});

require(['app'], function (app) {
    app.init();
});

require.js ..

app.js

define(function (require) {
    'use strict';

    var angular = require('angular');
    //        var services = require('./services/services');
    //        var controllers = require('./controllers/controllers');
    //        var directives = require('./directives/directives');
    var app = angular.module('likeastore', []);

    app.init = function () {
        angular.bootstrap(document, ['likeastore']);
    };

    app.config(['$routeProvider',
      function ($routeProvider) {
//          $httpProvider.responseInterceptors.push('httpInterceptor');

          $routeProvider.when('/favs', {
             templateUrl: '../views/Login.htm',
              controller: 'MyCtrl1'
          });

          $routeProvider.when('/favs', {
              templateUrl: '../views/Login.htm',
              controller: 'MyCtrl2'
          });

          $routeProvider.otherwise({
              templateUrl: '../views/Login.htm'/// <reference path="" />

          });              
      }
  ]);

    app.run(function ($window) {
//        auth.setAuthorizationHeaders();
//        user.initialize();
    });

    return app;
});

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
    <title></title>
    <!--<script src="Scripts/Vendor/angular.js" type="text/javascript"></script>-->
   <!-- <script src="Scripts/Vendor/angular-bootstrap.js" type="text/javascript"></script>
    <script src="Scripts/app.js" type="text/javascript"></script>-->
    <link href="Styles/Main.css" rel="stylesheet" type="text/css" />

 <!--   <script src="Scripts/controllers/LayOuts/Routing.js" type="text/javascript"></script>-->

</head>
<body ng-app>
    <div class="menuBarWrapper">
        <!--<img src="Images/Logo.png" style="background-color:rgba(255,0,0,0.5);height:53px;"/>-->
        <div style="position: relative; top: 10px; color: #333035; display: inline;">
            <div style="float: left;">
                <span style="font-family: Constantia; font-size: 40px;">AAAa</span> <span style="font-family: Palace Script MT;
                    font-size: 35px;">julers</span></div>
            <div>
                <ul id="menu" style="list-style-type: none; display: inline; vertical-align: text-top;">
                    <li class=""><a href="#"><i class="icon-chevron-right"></i>Overview</a></li>
                    <li class="active"><a href="#"><i class="icon-chevron-right"></i>Instances</a></li>
                    <li class=""><a href="#/favs"><i class="icon-chevron-right"></i>Images</a></li>
                    <li class=""><a href="#"><i class="icon-chevron-right"></i>Snapshots</a></li>
                    <li class=""><a href="#"><i class="icon-chevron-right"></i>Security Groups</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div ng-controller="">
    <div style="width: 100%; height: 100px; border-style: dotted; border-color: Blue;display:none;" ng-show="showSubRouting">        
    </div>
    </div>
    <span>
  1+2={{ 1+2 }}
</span>
    <div ng-view>
    </div>
    <!-- <input type="text" ng-model="message" />
    <div ng-controller="index">
        {{message}}
        <h5>
            Binding css classes</h5>
        <input type="text" ng-model="value" ng-class="{bold: isBold(), italic: isItalic(), underline: isUnderlined()}" />
    </div>-->

    <script src="Scripts/vendor/require.js" type="text/javascript" data-main="Scripts/main.js"></script>
   <!-- <script src="Scripts/app.js" type="text/javascript"></script>-->
</body>
</html>

Answer 1

我没有花很多时间在你的代码中 - 但我认为你应该在你的html文件中删除ng-app之后的

因为您正在手动启动应用程序（通常情况下）使用requirejs。

Angular和Require.Js

1 个答案: