Assign objects to properties in angular js, in attempt to reuse in another script tag

Question

I am trying to create an interactive experience using angular js. I was wondering if I could create properties, assign objects then instantiate them in a script tag in the 'index.html'?

for example

var app = angular.module('myApp');

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'Barry Bounce';
  $scope.barry =  {
    test1: function() {
        return "My name is slim shady"
    }

  }

}]);

index.html is as follows

<!doctype html>
<html>
  <head>

<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>

  </head>
  <body ng-app="myApp">


<div class="main" ng-controller="MainController">
  <script> document.write(barry.test1)</script>


</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->

<script src="js/controllers/MainController.js"></script>

  </body>
</html>

Then instantiate the {{ Barry }} with all the properties in a script tag in the index.html.

Is there a better way to approach this e.g using directive or factories

P.S I am new to angular js any guidance would be appreciated.

Why are you instantiating barry in index.html? That's not required. — Swati Maheshwari, Jun 04 '16 at 06:31

score 0 · Answer 1 · answered Jun 04 '16 at 06:43

There is no need for instantiating in HTML.It will automatically instantiate once declared in controller. And to Get that value in index.html you can use ng-model for binding.

var app = angular.module('myApp');

app.controller('MainController', ['$scope', function($scope) { 
  $scope.title = 'Barry Bounce';      
  $scope.barry = [
    {test1:'"My name is slim shady"'},
  ];     
  }    
}]);

<!doctype html>
<html>
  <head>

HTML

<title>Barry bounce</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.js"></script>

  </head>
  <body ng-app="myApp">


<div class="main" ng-controller="MainController">
<span ng-model="barry.test1"> </span


</div>

<!-- Modules -->
<script src="js/app.js"></script>

<!-- Controllers -->

<script src="js/controllers/MainController.js"></script>

  </body>
</html>

You can call function on page load, ng-click event, on key press etc Check this http://stackoverflow.com/questions/15458609/execute-function-on-page-load — Swati Maheshwari, Jun 04 '16 at 06:57

Assign objects to properties in angular js, in attempt to reuse in another script tag

1 Answers1