Question

我已经设置了一些我似乎无法开始工作的简单AngularJS。我的观点是：

<section ng-app="myApp">
  <header class="content_header">
    <h1>Cool App</h1>
  </header>

  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>

  <div ng-controller="AppCtrl">
    <h1>Message: {{message}}</h1>
  </div>

</section>

内部angular_main.js我有：

window.app = angular.module('myApp', ['ngResource']);

内部app_ctrl.js我有：

app.controller('AppCtrl', [
  '$scope', function($scope) {
    return $scope.message = "Angular Rocks!";
  }
]);

以正确的顺序加载JavaScript：

Angular Library
angular_main.js
app_ctrl.js

如果我将<section ng-app="myApp">更改为<section ng-app>，那么Hello World表单可以正常工作，但范围消息永远不会有效。

我错过了什么？

Answer 1

默认情况下，任何角度控制器都会返回$scope。因此，您无需明确指定return。试试这个：

app.controller('AppCtrl', [
  '$scope', function($scope) {
    $scope.message = "Angular Rocks!";
  }
]);

Answer 2

您不需要返回$ scope var。

window.app = angular.module('myApp', []);
app.controller('AppCtrl', function ($scope) {
    $scope.message = "Angular Rocks!";
});

请参阅小提琴示例 http://jsfiddle.net/imhassan66/dEFfK/

Answer 3

我为你创造了一个小提琴，展示了一种可以解决这个问题的方法： http://jsfiddle.net/KB2U4/2/

我做了什么：

我加载了angular-resource文件。你有吗？

我删除了全局。您不需要它，请使用angular.module("myApp")。请注意我没有声明任何依赖项。这样就可以恢复模块，不会污染全局命名空间。

代码：

HTML保持不变。

angular.module('myApp', ["ngResource"])

//The following can also be in another file as long as it is loaded afterwards

angular.module('myApp').controller("AppCtrl", ["$scope", function($scope){

   $scope.message = "This is a message"; 

}]);

Answer 4

    (function (angular) {
        "use strict";

        angular
            .module("employee", ["ngSanitize", "ngFileUpload", "smart-table", "ui.bootstrap", "ui.router", "ui.select"]);
    })(angular);

(function (angular) {
    "use strict";

    var config = ["$httpProvider", "$stateProvider", "$urlRouterProvider",
        function ($httpProvider, $stateProvider, $urlRouterProvider) {
            $urlRouterProvider.otherwise("/");

            $stateProvider
                .state("EmployeeList", {
                    url: "/employees",
                    templateUrl: "/Employee/List",
                    controller: "EmployeeListController"
                })
}];

    angular
        .module("employee")
        .config(config);
})(angular);

Answer 5

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="/Scripts/myApp.js"></script>

简单的AngularJS示例

5 个答案: