我正处于学习AngularJS的最初阶段。我有几年的Webdev经验（JS，HTML等），所以JS对我来说并不陌生。
我正在浏览https://thinkster.io/tutorials/mean-stack的教程。我仍然在前端部分。我还没有达到Node / Express / Mongodb主题！它非常棒，但能够看到正在进行的全部工作需要支付会员资格，而我现在觉得这是不必要的。如果我有这个，我可能会看到我的代码有什么不同，但是，唉。
正如我通常所做的那样，我已经从教程中改变了一些语义细节（例如＆＃34;人员＆＃34;而不是＆＃34;帖子＆＃34;）但他们不应该改变从根本上说，页面的功能。
麻烦的是，我无法让我的控制器接受控制＆＃34;事实上，在各个州。本教程使用ui-router。我认为还有其他路由选择（例如＆＃34; ngrouter？＆＃34;），这一切都很好，但我希望原则上能够完成这项工作。
以下是代码：
app.js
var moduleApp = angular.module('flapperNews', ["ui.router"]);
moduleApp.config([
"$stateProvider",
"$urlRouterProvider",
function($stateProvider, $urlRouterProvider)
{
$stateProvider
.state("home",
{
"url": "/home",
"templateUrl": "/home.html",
"controller": "MainCtrl"
});
$stateProvider
.state("friends",
{
"url": "/friends/{id}",
"templateUrl": "/friends.html",
"controller": "FriendsCtrl"
});
$urlRouterProvider.otherwise("home");
}
]);
moduleApp.factory("persons", [
function(){
return {
"persons": [
{
"name": "John",
"age": 31,
"friends": [
{"name": "Brynn", "relationship": "Wife"},
{"name": "Becca", "relationship": "Sister"}
],
"homePage": "http://www.google.com"
},
{
"name": "Brynn",
"age": 30,
"friends": [
{"name": "John", "relationship": "Husband"},
{"name": "Becca", "relationship": "Sister-in-Law"}
]
},
{
"name": "Becca",
"age": 26,
"friends": [
{"name": "John", "relationship": "Brother"},
{"name": "Becca", "relationship": "Sister-in-Law"}
]
}
]
};
}
]);
controllers.js
moduleApp.controller("MainCtrl", [
"$scope",
"persons",
function($scope, persons) {
the_scope = $scope;
$scope.test = 'Hello world!';
$scope.persons = persons.persons;
$scope.addPerson = function() {
if (typeof $scope.name !== "undefined" && $scope.name !== "" &&
typeof $scope.age !== "undefined" && $scope.age !== "" &&
!isNaN($scope.age))
{
$scope.persons.push({"name": $scope.name, "age": $scope.age, "homePage": $scope.homePage});
$scope.name = "";
$scope.age = "";
$scope.homePage = "";
}
};
$scope.getOlder = function(post) {
post.age++;
};
$scope.getYounger = function(post) {
post.age--;
};
}
]);
moduleApp.controller("FriendsCtrl", [
"$scope",
"$stateParams",
"persons",
function($scope, $stateParams, persons)
{
$scope.friends = persons.persons[$stateParams.id];
}
]);
的index.html
<html>
<head>
<title>My Angular App!</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="app.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="flapperNews"><!-- ng-controller="MainCtrl"-->
<div class="row">
<div class="col-md-6 col-md-offset-3">
<ui-view></ui-view>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-1">
<form ng-submit="addPerson();">
<label for="name">Name</label>
<input id="name" type="text" ng-model="name">
<br />
<label for="age">Age</label>
<input id="age" type="text" ng-model="age">
<br />
<label for="homePage">Home Page</label>
<input id="homePage" type="text" ng-model="homePage">
<br />
<button class="btn btn-primary" type="submit">Add Person</button>
</form>
<div>
{{ test }}
</div>
<div ng-repeat="person in persons | orderBy: '-age'">
<span ng-click="getYounger(person);">-</span>
<span ng-click="getOlder(person);">+</span>
<a ng-show="person.homePage" href="{{person.homePage}}">{{ person.name }}</a>
<span ng-hide="person.homePage">{{ person.name }}</span>
-
Age: {{ person.age }}
<span>
<a href="#/friends/{{ $index }}">Friends</a>
</span>
</div>
</div>
</div>
<script type="text/ng-template" id="/home.html">
<div class="page-header">
<h1>Flapper News</h1>
</div>
</script>
<script type="text/ng-template" id="/friends.html">
<div class="page-header">
<h3>
<a ng-show="person.homePage" href="{{person.homePage}}">{{ person.name }}</a>
<span ng-hide="person.homePage">{{ person.name }}</span>
</h3>
</div>
<div ng-repeat="friend in person.friends | orderBy: '-age'">
<span class="glyphicon glyphicon-thumbs-up" ng-click="getOlder"></span>
{{ friend.name }} - {{ friend.relationship }}
</div>
</script>
</body>
</html>
这是一个功能jsbin来仔细阅读。当您单击其中一个＆＃34; Friends＆＃34;按钮它启动状态更改。注意jsbin结合了两个js文件。
即使处于初始状态（＆＃34; / home＆＃34;），控制器也无法正常工作。该教程明确指出，您不应该需要＆＃34; ng-controller＆＃34;指令＆＃34; body＆＃34;标签，这不应该是问题。顺便提一下，当我做时，有＆＃34; ng-controller＆＃34; ＆＃34; body＆＃34;中的指令标签控制器似乎工作，这表明控制器定义是合理的。
我确定我错过了一些小的重要语义错误，但我已经在这方面工作了好几天（在我没有照顾婴儿的时间之外）并且无法弄明白。我真的很想继续学习本教程，但我觉得我可能错过了一些重要的东西。
为了抢先喜欢喝酒的社区成员：
现在已经说过了......任何仍在阅读的人，实际上感觉就像扔骨头的角骨一样，请帮忙。
谢谢！