javascript - Angular JS routing no output -
i'm new angularjs , doing dan wahlin tutorial. im using 1.4.4 both angular , angular route. reason when run routing tutorial. no output
here relevant code files:
index.html
<!doctype html> <html lang="en-us" ng-app = 'app'> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <meta content="utf-8" http-equiv="encoding"> </head> <body> <div ng-view></div> <script src="scripts/angular.js"></script> <script src="scripts/angular-route.js"></script> <script src="app/app.js"></script> <script src="app/controllers/new_controller.js"></script> </body> </html> new_controller.js
function controller_people($scope) { $scope.person = [ { name: 'bob', gender: 'm', city: 'cincinnati' }, { name: 'jacob', gender: 'm', city: 'chicago' }, { name: 'tom', gender: 'm', city: 'new york' }, { name: 'jill', gender: 'f', city: 'las vegas' }, { name: 'elaine', gender: 'f', city: 'hollywood' }, { name: 'hannah', gender: 'f', city: 'miami' }]; $scope.order = function (var_name) { $scope.sort_by = var_name; $scope.reverse = !$scope.reverse; } } controller_people.$inject = ['$scope']; angular.module('app', []).controller('controller_people',controller_people); app.js
var app = angular.module('app', ['ngroute']); app.config( function ($routeprovider){ $routeprovider .when('/',{ controller: 'controller_people', templateurl: '/app/views/people.html' }) .otherwise({redirectto:'/'}); }); people.html
search name: <input type="text" ng-model="filter_by.name"> search gender: <input type="text" ng-model="filter_by.gender"> search city: <input type="text" ng-model="filter_by.city"><br> sort name: <input type="checkbox" ng-model="sort_by" ng-true-value="'name'"> sort gender: <input type="checkbox" ng-model="sort_by" ng-true-value="'gender'"> sort city: <input type="checkbox" ng-model="sort_by" ng-true-value="'city'"><br> <button ng-click="$scope.gender= 'm'">to view boys</button> <button ng-click="$scope.gender= 'f'">to view girls</button> <button ng-click="$scope.gender= 'a'">to view all</button> <br/> <br/> <table> <tr> <th ng-click="order('name')">name</th> <th ng-click="order('gender')">gender</th> <th ng-click="order('city')">city</th> </tr> <tr ng-repeat="kid in person | filter:filter_by | orderby:sort_by:reverse"> <td ng-if=" kid.gender == $scope.gender"> {{kid.name}} </td> <td ng-if=" kid.gender == $scope.gender"> {{kid.gender}} </td> <td ng-if=" kid.gender == $scope.gender"> {{kid.city}} </td> <td ng-if="$scope.gender=='a'"> {{kid.name}} </td> <td ng-if="$scope.gender=='a'"> {{kid.gender}} </td> <td ng-if="$scope.gender=='a'"> {{kid.city}} </td> </tr> </table> there no directory issue. scripts in correct folder. don't know why isn't working. id appreciate , help.
you need rearange loading order of scripts:
it should this:
<script src="scripts/angular.js"></script> <script src="scripts/angular-route.js"></script> <script src="app/app.js"></script> <script src="app/controllers/new_controller.js"></script>
Comments
Post a Comment