angular js 无法识别我的应用程序？

Question

我在这里做了一个 angularjs 练习，使用这个例子 here 。问题是，尽管我已经通过 ng-app 和 <script> 标记调用了脚本。编译器没有或无法找到该应用程序。我做错了什么？

这是index.html:-

<!DOCTYPE html>
<html ng-app="MyApp" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Scripting tutorial" />
    <title>Angularjs Responsive Website</title>
    <meta name="description" content="This is a tutorial that I did to learn more about angularjs" />

    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">


    <link href="css/StyleSheet.css" rel="stylesheet" />

    <script src="js/Scripts/jquery-1.9.1.min.js"></script>
    <script src="js/Scripts/angular.min.js"></script>
    <script src="js/Scripts/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/HomeCtrl.js"></script>
    <script src="js/ProjectCtrl.js"></script>
    <script src="js/ProjectCtrl.js"></script>
    <script src="js/AboutCtrl.js"></script>




</head>
<body>
    <!--links-->
    <header>
        <div class="wrap">
            <a href="#!"><img class="logo" src="images/sample_seller.gif" /></a>
            <nav>
                <ul>
                    <li><a id="workBtn" href="#!/" ng-class="{activeSmall:part == 'projects'}">Our Projects</a></li>
                    <li><a id="privacyBtn" href="#!/privacy" ng-class="{activeSmall:part == 'privacy'}">Privacy &amp; Terms</a></li>
                    <li><a id="aboutBtn" href="#!/about" ng-class="{activeSmall:part == 'about'}">About</a></li>
                    <li style="margin-right:0px"><a id="contactBtn" class="active" href="javascript.void(0)" ng-click="showForm()">Contact Us</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!--contact form-->
    <div class="paddRow contactRow">
        <div class="wrap">
            <div class="head">Contact Us</div>
            <img class="close" src="images/close-button.jpg" ng-click="closeForm()" />
            <form ng-submit="save()" class="contactForm" name="form" ng-hide="loaded">
                <input class="input" required="required" type="text" name="name" placeholder="Your Name" ng-model="message.name" />
                <input class="input email" required="required" type="email" name="email" value="" placeholder="Your Email" ng-model="message.email" />
                <textarea class="textarea" rows="5" required="required" placeholder="Your message" ng-model="message.text"></textarea>
                <button class="btn green">Send Message</button>
            </form>

            <!--contact us form response message-->
            <div ng-show="process" style="text-align:center">
                <img class="loader" src="images/loading.png" />
            </div>
            <div ng-show="success"><p>Your message has been sent, Thank You!</p></div>
        </div>
    </div>

    <!--Main Content-->
    <div style="position:relative">
        <div style="width:100%" ng-view ng-animate="{enter: 'view-enter', leave: 'view-leave'}"></div>
    </div>

</body>
</html>

这是app.js:-

'use strict';

var app = angular
            .module('MyApp',
            [
                'ngRoute'
            ])
            .config(['$routeProvider', function ($routeProvider) {
                $routeProvider
                    .when('/',
                    {
                        templateUrl: 'pages/pro-index.html',
                        controller: HomeCtrl
                    })
                    .when('project/:projectId',
                    {
                        templateUrl: function (params) {
                            return 'pages/' + params.projectId + '.html';
                        },
                        controller: ProjectCtrl,
                        activetab: 'projects'
                    })
                    .when('/privacy',
                    {
                        templateUrl: 'pages/privacy.html',
                        controller: PrivacyCtrl,
                        activetab: 'privacy'
                    })
                    .when('/about',
                    {
                        templateUrl: 'pages/about.html',
                        controller: AboutCtrl,
                        activetab: 'about'
                    })
                    .otherwise(
                    {
                        redirectTo: '/'
                    });
            }])
    .run(['$rootScope', '$http', '$browser', '$timeout', '$route', function ($scope, $http, $browser, $timeout, $route) {
        $scope.$on("$routeChangeSuccess", function (scope, next, current) {
            $scope.part = $route.current.activetab;
        });
        console.log('My app works!');
        //onclick event handlers
        $scope.showForm = function () {
            $('.contactRow').slideToggle();
        };
        $scope.closeForm = function () {
            $('.contactRow').slideUp();
        };

        // save the Contact us form
        $scope.save = function () {
            $scope.loaded = true;
            $scope.process = true;
            $http.post('sendemail.php', $scope.message).success(function () {
                $scope.success = true;
                $scope.process = false;
            });
        };
    }]);

app.config(['$locationProvider', function ($location) {
    $location.hashPrefix('!');
}
]);

错误是说由于以下原因无法实例化模块 MyApp： HomeCtrl没有定义...我也定义了

这里是：

(function () {

    angular
        .module('MyApp')
        .controller('HomeCtrl', HomeCtrl);
    HomeCtrl.$inject = ['$scope'];
    function HomeCtrl($scope) {
        $scope.Hello = "Hello";
    };

})();

Answer 1

首先在您的 angularJS 代码中声明一个控制器，如下所示：

var app = angular.module('myApp', []);
 app.controller('myCtrl', function($scope) {
 $scope.firstName = "John";
 $scope.lastName = "Doe";

$scope.myFunc = function(){

 //YOUR FUNCTION CODE HERE

}
});

将您的函数放在控制器中并将它们分配给控制器的 $scope。然后在你的 HTML 中使用 ng-controller 像这样：

<body ng-controller="myCtrl"> 
  Full Name: {{firstName + " " + lastName}}

  // RUN FUNCTION LIKE SO
  <button ng-click="myFunc()"></button>
</body>

希望对您有所帮助。

Answer 2

你们不会相信我发现的。没有人没有。我的应用程序确实一直有效。从 angularjs 的新版本开始，我的应用无法识别我的控制器是因为...等等... "SINGLE QUOTES" = '...' 所以您必须在单引号内命名控制器。

So it would be;

controller: 'HomeCtrl'

给你。所有被卡住的人现在都会有尝试的感觉。

感谢您的帮助！

也觉得发这个问题很丢脸

angular js 无法识别我的应用程序？

The angular js won't recognize my app?

html

javascript

angularjs