CODEWITHSUNDEEP
javascripthtmlangularjs
Ashane Alvis
Ashane Alvis

Reputation: 810

The angular js won't recognize my app?

Here I made an angularjs exercise, using this example here . The problem is that even-though I've called the script by ng-app and also by <script> tag. The compiler doesn't or couldn't find the app. What I've have done wrong?

This is the 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>

This is the 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('!');
}
]);

The error is that it says Failed to instantiate module MyApp due to: HomeCtrl is not defined... I've defined it too

Here it is:

(function () {

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

})();

Upvotes: 0

Views: 157

Answers (2)

Ashane Alvis
Ashane Alvis

Reputation: 810

You guys won't believe what I found out. Nobody didn't. My app did work all along. As of new edition of angularjs, My app failed to recognize my controllers is because... wait for it... "SINGLE QUOTES" = '...' So you have to name controllers inside single quotes.

So it would be;

controller: 'HomeCtrl'

There you have it. All those who got stuck doing this will now have a feeling to try out.

THANKS FOR THE HELP GUYS!

Also felt shame of posting this question as well.

Upvotes: 0

Skywalker
Skywalker

Reputation: 5194

First declare a controller within your angularJS code like so:

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

$scope.myFunc = function(){

 //YOUR FUNCTION CODE HERE

}
});

Put your functions within the controller and assign them to the $scope of the controller. And then use ng-controller within your HTML like so:

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

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

Hope this helps.

Upvotes: 1

Related Questions