Question

我试过运行AngularJS应用程序，我有两个观点：

view1.html
view2.html
index.html，其中链接到view1和view2

但是当我点击它时它没有转到html，它没有显示任何内容，我的代码如下：

的index.html

<!doctype html>
<html ng-app="myapp">
<body>
<h3>hiiiiiiiii</h3>
<a href="#/view1">view1</a>
<a href="#/view2">view2</a>
<div ng-view></div>
<script src="js/app/app.js"/>
<script src="js/app/controllers.js" />
<script src="lib/Angular/angular.min.js"></script>
<script src="lib/Angular/angular-route.min.js"/>
<script src="lib/Angular/angular.js"/>


</body>
</html>

分音/ view1.html

 <div ng-controller="View1Ctrl">
 <p>This is the partial for view 1.</p>
</div>

分音/ view2.html

<div ng-controller="View2Ctrl">
 <p>This is the partial for view 2.</p>
 </div>

controllers.js

  var app=angular.module('myApp', []);
  alert("hiiii");
   app.controller('View1Ctrl', ['$scope', function($scope) {

  alert("hiiii");

   }]);
   app.controller('View2Ctrl', ['$scope', function($scope) {
  alert("hiiii");

 }]);

app.js

'use strict';

   // Declare app level module which depends on views, and components
 angular.module('myApp', [
    'ngRoute',
   'myApp.controllers'
  ]).
    config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/view1', {
        templateUrl: 'partials/view1.html',
        controller: 'View1Ctrl'
    });
    $routeProvider.when('/view2', {
        templateUrl: 'partials/view2.html',
        controller: 'View2Ctrl'});
   $routeProvider.otherwise({redirectTo: '/view1'});
  }]);

Answer 1

您只需加载angular.js或angular.min.js，而不是两者。

加载的java脚本的顺序很重要，如果您尝试使用未加载的库，则会出现错误。

您应该重新排序java脚本链接：

<script src="lib/Angular/angular.min.js"></script>
<script src="lib/Angular/angular-route.min.js"></script>
<script src="js/app/app.js"></script>
<script src="js/app/controllers.js"></script>

Answer 2

拼写错误：
<html ng-app="myapp"> vs angular.module('myApp', []);
应用名称必须完全相同（这是我们所有人都会遇到的常见错字）

AngularJS中的简单应用

2 个答案: