找到你要的答案

Q:Browser not able to parse AngularJS code

Q:浏览器无法解析AngularJS代码

I have written a simple program in AngularJS after including the minified angular JS in the script tag but the browser is not able to parse the angular JS code. I have other programs with more or less same code and they are working fine.

Am I missing/overlooking anything ?

MVC Example

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>MVC Example</title>
        <script src="js/angular.min.js"></script>
        <script>
            function MyFirstCtrl($scope) {
                var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
                $scope.ourEmployees = employees;
            }
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>

Browser Output:

Number of Employees: {{ourEmployees.length}}

我写了一个简单的程序,在AngularJS包括在脚本标签的小角JS但浏览器不能解析角的JS代码。我有其他程序或多或少相同的代码,他们的工作罚款。

我错过了/忽略了什么?

MVC的例子

<!DOCTYPE html>
<html ng-app>
    <head>
        <title>MVC的例子</title>
        <script src="js/angular.min.js"></script>
        <script>
            function MyFirstCtrl($scope) {
                var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
                $scope.ourEmployees = employees;
            }
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>

浏览器输出:

Number of Employees: {{ourEmployees.length}}
answer1: 回答1:

You need to create a module to use with ng-app.

angular.module("foo", []);
angular.controller("MyFirstCtrl", MyFirstCtrl);

<html ng-app=foo>

您需要创建一个模块与NG应用程序一起使用。

angular.module("foo", []);
angular.controller("MyFirstCtrl", MyFirstCtrl);

<html ng-app=foo>
answer2: 回答2:

You need to start the app and add the controller in the right form:

<script>
var app = angular.module("app", []);
app.controller('MyFirstCtrl', ['$scope', function ($scope) {
    var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
    $scope.ourEmployees = employees;
}]);
<script>

您需要启动应用程序,并以正确的形式添加控制器:

<script>
var app = angular.module("app", []);
app.controller('MyFirstCtrl', ['$scope', function ($scope) {
    var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
    $scope.ourEmployees = employees;
}]);
<script>
answer3: 回答3:

After some R&D I finally figured out solution for both v1.2 and v1.3+

v1.2

<!DOCTYPE html>
<html ng-app=foo>
    <head>
        <title>MVC Example</title>
        <script src="js/angular.min-1.2.js"></script>
        <script>
            angular.module("foo", []);
            angular.controller("MyFirstCtrl", MyFirstCtrl);

            var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];

            function MyFirstCtrl($scope) {
                var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
                $scope.ourEmployees = employees;
            }
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>

v1.3+ Onwards

<!DOCTYPE html>
<html ng-app=foo>
    <head>
        <title>MVC Example</title>
        <script src="js/angular.min-1.4.js"></script>
        <script>
            var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
            var foo = angular.module("foo", []);
            foo.controller("MyFirstCtrl", function ($scope) {
                $scope.ourEmployees = employees;
            });
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>

一些研发后;我终于明白为1.2和V1.3 +解决方案

V1.2

<!DOCTYPE html>
<html ng-app=foo>
    <head>
        <title>MVC的例子</title>
        <script src="js/angular.min-1.2.js"></script>
        <script>
            angular.module("foo", []);
            angular.controller("MyFirstCtrl", MyFirstCtrl);

            var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];

            function MyFirstCtrl($scope) {
                var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
                $scope.ourEmployees = employees;
            }
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>

V1.3 +起

<!DOCTYPE html>
<html ng-app=foo>
    <head>
        <title>MVC的例子</title>
        <script src="js/angular.min-1.4.js"></script>
        <script>
            var employees = ['Catherine Grant', 'Monica Grant', 'Christopher Grant', 'Jennifer Grant'];
            var foo = angular.module("foo", []);
            foo.controller("MyFirstCtrl", function ($scope) {
                $scope.ourEmployees = employees;
            });
        </script>
    </head>
        <body ng-controller='MyFirstCtrl'>
        <h2>Number of Employees: {{ourEmployees.length}}</h2>
    </body>
</html>
javascript  angularjs  browser