Click here to Skip to main content
15,896,348 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Learning the Ways of the AngularJS
I have an app running and the JS works for the APP above but I can not get the JS(AngualrJS) to work with the view.
HTML
In the HTML I am calling a view

<body ng-app ="myApp">
.......
HTML and JS Code inbetween
........

New Area
<ng-view>



I have 3 controllers on the one ng-app

JavaScript

I have this to return the view
var app = angular.module('myApp', ['ngRoute']);

...........

JS Code between

...........
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/thesum', {
templateUrl: 'about.html',
controller: 'myCtrl12'
});
}]);

app.controller('myCtrl2', function(){
var self = this;
self.message ="Hello!";
});

I am learning this in order to understand how to get this to work with the MSFT MVC world, so baby steps any help is useful!
Posted

1 solution

It looks like the issue with the code has more to do with variable scoping, so I baked up this quick scope tutorial.

Now, moving into the JavaScript world from C#, the concept of scope can be very tricky. Block scope is not the norm (yet), as I can see you're well aware of from your self assignment. What Angular does is try to prop up the concept of block scope within specific blocks with use of the $scope provider.

Now, there are several different flavors of scope in Angular. The one you should be working with most often is the basic $scope, and it is regularly used in controllers, like so:
JavaScript
myApp.controller('someAwesomeController',['$scope',function($scope){
   $scope.message = 'Hello World!';
}]);


In the HTML, {{message}} is now available as a variable within someAwesomeController's perimeter.

You'll notice the Angular Dependency Injection, that's necessary to use the $scope provider, and thus make items available on the view. You can name the variable whatever you want within the function parameters, as long as the string portion is right. The parameters evaluate in order of declaration, and this is all to keep minification from breaking the code. For instance:

JavaScript
myApp.controller('someAwesomeController',['$scope','$route',function(s,r){
   s.message = 'Hello World!';
}]);


A controller scope will also have access to any controller scope that is is nested within. For instance:

HTML
<script type="text/javascript">
   myApp.controller('outer',['$scope',function($scope){ $scope.outer = 'Hello';}])
      .controller('inner',['$scope',function($scope){ $scope.inner = 'World'; }]);
</script>
<div ng-controller="outer">
   <p>{{outer}}</p> <!--Hello-->
   <div ng-controller="inner">
      <p>{{outer}} {{inner}}</p> <!--Hello World-->
   </div>
   <p>{{inner}}</p> <!--Nothing, inner is not defined here-->
</div>


Finally, 2 other concepts that you should be aware of are $rootScope and isolated scope.

Root Scope is basically a big global namespace that all $scope can access. Best practice is to use it sparingly.

Isolated scope is common in directives, and will not make the $scope of containing controllers available.

My wall-o-text not withstanding, I hope this helps you with your project. You can read more about Angular scope at:
https://docs.angularjs.org/guide/scope[^]
 
Share this answer
 
v2
Comments
MarcusCole6833 29-Oct-15 12:37pm    
Ty for the help, my major issue was running it locally and the Ajax calls, but any extra insight is never unwarranted or unnecessary as we are always constantly learning, thank you for your help!

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900