Link to home
Start Free TrialLog in
Avatar of Isaac Johnson
Isaac JohnsonFlag for United States of America

asked on

Where do I place script directives in the <head> using ng-view if <head> not allowed in view

I am creating html for ng view.  The views only contain html.

Where do I put the location of my javascripts which are currently in
the header?

<head>
    <title></title>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/angularjs.min.1.7.5.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.min.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/app.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/Controllers/vote.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/Controllers/home.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/services/vote.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/services/route.js"></script>

     
</head>

Open in new window

SOLUTION
Avatar of David Favor
David Favor
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Isaac Johnson

ASKER

Thanks Guys,

Now I've got the structure:

//index.hrml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/angularjs.min.1.7.5.js"></script>
    <!--<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular-route.min.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/app.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/Controllers/vote.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/Controllers/home.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/services/vote.js"></script>
    <script src="http://home-dev.kmhp.com/global/js/AngularJS/quick-survey/services/route.js"></script>
     
    <script>
        // app
        var app = angular.module('quickSurveyApp', ["ngRoute"]);

        // controller(s)
        app.controller("VoteCtrl", ["$scope", "qa", "$location", function ($scope, qa, $location) {
            $scope.activeQuestions = qa.activeQuestions;
            $scope.records = qa.records;
            $scope.QuestionText = qa[0].QuestionText;
            $scope.AnswerText = qa[0].AnswerText;
            $scope.Answers = qa[0].Answers;

            $scope.error = false;
            $scope.xxxxx = function () {
                $scope.error = !!$scope.answer;
            }
        }]);

        // service(s)
        app.factory("VoteService", ["$http", "$q", function ($http, $q) {
            var service = {};
            //Gets all data for page.
            service.pageInit = function (questionNumber) {
                var deferred = $q.defer();
                $http.get("http://home-dev.kmhp.com/insight/api-test-pages/Quick Survey/data.json").then(function (response) {
                    deferred.resolve(response.data);
                }, function (error) {
                    console.error(error);
                    deferred.reject("error");
                });
                return deferred.promise;
            };
            return service;
        }]);

        // route(s)
        app.config(["$routeProvider", function ($routeProvider) {
            $routeProvider.
            when("/", {
                templateUrl: "http://home-dev.kmhp.com/insight/api-test-pages/Quick Survey/survey.html",
                controller: "VoteCtrl",
                // it's is good to download the data before displaying the template without the data
                // so all we found in resolve is gonna be "resolved" before display the page and running the controller
                resolve: {
                    qa: ["VoteService", "$route", function (VoteService, $route) {
                        return VoteService.pageInit();
                    }]
                }

            }).
            otherwise({
                redirectTo: '/'
            });
        }]);
    </script>

     
</head>
<body ng-app="quickSurveyApp">
    <div>
        <h1>Quick Survey</h1>
        <div ng-view ></div>
    </div>
</body>
</html>
// view
<h1>Quick Survey</h1>
<div ng-model="QuestionText">
    <!--Question-->
    <h2>{{QuestionText}}</h2>
</div>
<!-- <div -->
<div ng-model="AnswerText">
    <!--Possible Answers-->

    <br ng-repeat-start="a in Answers" />
    <input id="button{{a.AnswerText}}" name="selection" value="{{a.AnswerText}}" type="radio" ng-model="$parent.answer" />
    <label for="button{{a.AnswerText}}" ng-repeat-end>{{a.AnswerText}}</label>
</div>
<br />

<br />
<div>
    <input id="surveybtn" type="button" value="Submit" ng-click="xxxxx()" />
</div>
======

Open in new window